Raghu's SharePoint Column : SharePoint - My Lifeline!!

Raghu's SharePoint Column

Lync Presence Indicators code snippets in SharePoint 2013

In my previous post I gave an intro on the various presence indicators available in SharePoint 2013. In this post I will provide JavaScript snippets which are rendered by SharePoint to show the respective presence mode.

You can use these snippets in Custom Web parts or Content Editor Web parts to show the respective user presence status.

1. Lync Presence –  DefaultRender


<span>
 <span class='ms-imnSpan'>
  <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >
   <span class='ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10'>
    <img name='imnmark' title='' ShowOfflinePawn='1' class='ms-spimn-img ms-spimn-presence-disconnected-10x10x32' src=    '/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='test@hotmail.com' id='imn_1,ty    pe=sip' />
   </span>
  </a>
 </span>
<span>
 <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'>
<img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='Us  er Presence' sip='test@hotmail.com' id='imn_2,type=sip' /></a>Raghavendra Shanbhag
</span>
</span>

2. Lync Presence – WithPictureDetailView


<div>
<div class="ms-tableRow">
 <div>
  <span class='ms-imnSpan'>
  <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >
   <span class='ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10'><img name='imnmark' title='' ShowOfflinePaw   n='1' class='ms-spimn-img ms-spimn-presence-disconnected-10x10x32' src='/_layouts/15/images/spimn.png?rev=23' alt='   User Presence' sip='test@hotmail.com' id='imn_661,type=sip' /></span>
  </a>
  </span></span>
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<div class="ms-peopleux-userImgDiv"><span class="ms-imnSpan"><a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'><img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='test@hotmail.com' id='imn_3452,type=sip' /></a><span><img style="width:62px; height:62px; border:none" src="http://www.bing.com" alt=" Ram" /></span></span></span></div></div><div class="ms-tableCell ms-peopleux-userdetails ms-noList"><ul style="max-width:150px"><li><div class="ms-noWrap"><span><a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'><img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='test@hotmail.com' id='imn_34523,type=sip' /></a>Raghavendra Shanbhag</span></div></li></ul></div>
</div>
</div>

3. Lync Presence – WithPicture


<div>
<div>
    <span>
       <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'><img name='imnmark'        title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' s       ip='test@hotmail.com' id='imn_1,type=sip' /></a>
   <span>
   <img style="width:62px; height:62px; border:none" src="http://www.bing.com" alt=" Ram" />
   </span>
  </span></span>
</div>
<div class="ms-floatLeft ms-descriptiontext"><span class="ms-verticalAlignTop ms-noWrap ms-displayInlineBlock">
    <span class='ms-imnSpan'><a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' ><span class='ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10'><img name='imnmark' title='' ShowOfflinePawn='1' class='ms-spimn-img ms-spimn-presence-disconnected-10x10x32' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='test@hotmail.com' id='imn_2,type=sip' /></span></a></span><span class="ms-noWrap ms-imnSpan"><a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'><img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='test@hotmail.com' id='imn_3,type=sip' /></a>Ram</span>
</span>
</div>
</div>

4. Lync Presence – PresenceOnly


<span class='ms-imnSpan'>
   <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >
    <span class='ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10'><img name='imnmark' title='' ShowOfflinePa    wn='1' class='ms-spimn-img ms-spimn-presence-disconnected-10x10x32' src='/_layouts/15/images/spimn.png?rev=23' alt    ='User Presence' sip='test@hotmail.com' id='imn_1,type=sip' />
   </span>
  </a>
</span>

5. Lync Presence – PictureOnly


<div>
<div>
<div class="ms-tableCell">
  <span class='ms-imnSpan'><a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-prese  nceLink' ><span class='ms-spimn-presenceWrapper ms-spimn-imgSize-8x72'><img name='imnmark' title='' ShowOfflinePawn=  '1' class='ms-spimn-img ms-spimn-presence-disconnected-8x72x32' src='/_layouts/15/images/spimn.png?rev=23' alt='User   Presence' sip='test@hotmail.com' id='imn_1,type=sip' /></span></a></span></span></div>
<div class="ms-tableCell ms-verticalAlignTop">
<div class="ms-peopleux-userImgDiv"><span class="ms-imnSpan"><a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'><img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='test@hotmail.com' id='imn_2,type=sip' /></a><span class="ms-peopleux-imgUserLink"><span class="ms-peopleux-userImgWrapper" style="width:72px; height:72px"><img style="min-width:72px; min-height:72px; clip:rect(0px, 72px, 72px, 0px); max-width:72px" src="http://www.bing.com" alt=" Ram" /></span></span></span></div>
</div>
</div>
</div>

Points to Ponder

If you are rendering presence for multiple/single user using the above snippets, make sure you

  1. Set the email id, image source and alt  property accordingly
  2. Id property  always has unique value
  3. Opening and closing tags are managed properly.
 
Comments

Hi, I want to display the current logged in user presence, how to pass the current user email into this, If i pass in java-script it is not loading anything, please help me to sort out this.

Hi Sendil,
You can use SPServices or EcmaScript client object model to get logged in user email id and set it to sip property. Check out the below link for Get Logged In User info using SPServices. Dont forget to call ProcessImn(); at the end of your javascript call to show the presence on load.

Do you know of a way to stop the IMNShowOOUIMouse call, because I want to show the presence as in your PictureOnly code but I do not want the hover panel (contact card) to appear when the user mouses over the presence bar or picture?

I believe the Contact card on move hover of the presence/pic comes up because of the office/lync client. Is there any specific reason you are looking to remove it? I didn’t play around it, but using JQuery you can try to remove the move hover event for the control.

Hello there Raghavendra,

Great post (along with your other one outlining the code), both were very helpful. I would to know if its possible/how to display the presence in text. We are working with SharePoint & Office 2013.

Ideally, I would display With Picture Detail View, and underneath the username display the text presence.. For example, it would have my face and the green dot, and underneath say “Jarrod Ferguson” “Available”. Is this a possibility? I would love to speak further with you about it, please get back to me or send me an email.

Thanks!
Jarrod

Hi Jarrod,

Thanks for leaving a comment on the post. Regarding your question about showing lync presence as a text is really cool. The presence comes up only when ProcessImn() is called, you can try to write a jquery to get the text from the presence based on the presence control.. i will give it a shot in my free time.

Yea, I think that would be a helpful think to display– would love to see it. Thanks for the reply and please let me know if you have any luck with that! Thanks again, cheers.

The presence indicator is always showing the disconnected image…. but when I hover over it, the hover panel shows the correct status.

How come the status image is not showing the correct value??

Thanks

Hi Kav,
We need to explicitly call ProcessImn(); to render the correct status, also make sure if you have 2 instance of lync presence make sure the ids are different.

What modifications would be needed for SharePoint 2010? We have Lync 2013 and with the above code in SharePoint 2010, I can get the proper status but the images seem to be broken – so I’m not seeing green, red, etc. Ideally a way to chose these myself would be great. I too would also like to see the person’s status message if possible as text.SharePoint 2013 is in the works but it won’t be deployed for another year and I have a project integrating this with other Non-SharePoint things that I’m working on that is too cool to wait!

Hi Thomas,
Good to know the above snippet is working to some extent in SP2010, currently i do not have an SP2010 test environment and it would be difficult for me to respond to your query immediately. I would definitely look into this once i have the environment ready.

Hi Raghvendra,
I have used this code and it has resolved my distorted Presence indicator issue. but now using this class I am not able to place it on the correct position ie. on right side adjacent to the profile pic. please suggest.
Code in aspx file :

 <img align="absmiddle" id="RecentMembersPresenceIndicator${UserID}" border="0" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" onload="IMNRC('${WorkEmail}', this)" showofflinepawn="1" src="/_layouts/15/images/imnhdr.gif” />

Hi Devansh,
You might have to check with your designer as this might get screwed up in other browser, he will be the right person to guide you.

Hi Raghvendra,

Thanks for the snippets. I have two questions.

Firstly it only seems to work if I have another web part on the page that also shows the presence ( for example a doc lib ). I guess I need to call some initialisation code first.

I tried to call “ProcessImn(); ” but that did not make a difference.

Do you know how to make the snippets work on a page by themselves?

And the second question is that the snippets only work if the id is unique but how do I generate a unique ID? It looks like they need to be in numerical order.

Hi Tom,

1. Yes you need to call ProcessImn(); to show the presence – they do work on a page have tested the above snippets by placing them in CEWP

2. You can use Math.Random() to generate random number for uniuqeID , need not be in a numerical order any unique id on the page should do.

We don’t have Lync,we have Office Communicator 2007 and 2007 R2(OCS),but the above script is not working for OCS.
Please help me on this.

Thanks,
Venkat babu

Great article Raghavendra,
I used the DefaultRender template and it works great in IE, however in Chrome it fires an exception in sharepoint function IMNGetOOUILocation (Init.js) after calling ProcessImn().
After debugging the sharepoint js file, i discovered, that sharepoint requires class=’ms-imnSpan’ for second span element as well (span containing link on user’s name).
So hopefully it helps someone. :)

Tested on SharePoint Online.

Thanks folt, good to know that it worked in SharePoint Online.

HI,

Thanks for the info, am able to add my Lync2103 ID in the sahrepoint portal. But when i add other user its not showing the status. I even tried creating a a new snippet it does not work, let me know how i add other users or a group oh lync users.

Regards
Prashanth

Does this require external federation to be enabled in any way?

No this doesn’t require. Its a default feature

Hello Raghvendra,

Thanks for great post!

Have one doubt, i tried your code for more than one user but it work fine for only one user. As for other user, on mouseover it show lync status with data for first user only. Is there anything need to do?

It should work fine for all the users on the page. cross check with the id’s

Hi Raghavnedra,

Nice.

Tried the code Lync Presence – PictureOnly. it is working fine in IE but as soon as we open it in Chrome, it is not giving the presence information. Any change do we need to do to make it working in Chrome

Hi Gagan, It should work on chrome provided you have NameCntrl activex control installed as add in

I tried this technique in my on-premise SharePoint pages and connected to Office 365 Lync, but not succeeded. It doesn’t display anything, but when hovering there is an info card shown. Is this technique can also be used to Lync Online?

Hi Ganagus – I never tried this with Lync Online. Did you get any solution or workaround ?

HI Thanks so much for this – it works well except i have a problem with the little jelly bean – it doesn’t come up with anything – just the placeholder image as it can’t find that paticular file. I’ve lcoated a file with all of the status on one image “imnon.png” but if i update the source to this file lcoation it just shows the wholeimage rather then the specific bean that relates to their status. Any thoughts?

Hi Daniel,

I have not faced such issue till now, if you are trying to show image, it shows the complete sprite image, you will end up finding the image position in the sprite. I wont recommend you to do this try finding out the actual issuel and let me know if i can be of any help.

Hi Raghavendra,
Thank you for your post. It is working perfect for me Lync Presence – WithPicture Here I am facing one issue. That control is in Update panel becoz of this, in post back presence indicator is not showing user presence. Could you please help me on this.

Thanks in Advance.

Shiva Mamuduri

Hi Shiva,

I am sure you might have found the solution by now, anyways in case if you have not found try calling the ProcessImn() again

Hi Raghavendra,

Great Post!!
I have tried the code works for presence only.But, it is working only for the static HTML. And, it is not working for the dynamically generated HTML. Is there anything need to do?

Hi Venkat – as mentioned in earlier replies check with the ID’s, each control should have unique id

Hi Raghavendra,

Awesome Post!!

But when i access site from other domain i.e. I have add lync presence in SharePoint site and access SharePoint site from different domain then it shows error like “Permission Denied” in “namectrl.ShowOOUI” method.

Have you got this kind of issue?
I have found this link to add sharepoint site in “Trusted site”. but it makes me low. because it will have dependencies that each user have to add site in “Trusted site”.

Can you help me?

Thanks,
Kaushal Khamar

Hi Kaushal,

Yes I have experienced this issue and adding it to trusted sites resolved it. As a workaround you can add the url to trusted/intranet sites for all the users by pushing it through domain policy.

Leave a Reply
*

Protected by WP Anti Spam