Post
Ask Question

How to Show User Presence on Mouse Hover in SharePoint 2013

Introduction

This Presence helps users to get in touch with their colleagues easily. A user can see more information about colleagues, like contact numbers, designation, departments without going to their personal page. Also it indicates the presence of a colleague whether he/she is available, away or offline.

Presentation

The presence awareness of SharePoint depends on a couple of different pieces of technology, all working together, namely:

  • SharePoint
  • Exchange
  • Lync
  • Active Directory

 This is a very easy and straight-forward requirement for single users. What if you need to provide a presence indicator of more than one user? In thay case you need to be careful with some parameters in the code above. These are:

  • The “id“must be unique and format must be like: “id="imn_716,type=sip"”.
  • Provide an “alt” attribute value to the image.
  • Provide a “src” attribute to the image.
  • And of course be careful with the classes.

User Presence with Picture

Now in this article we will see how to display the OC or Lync Presence of a user on mouse hover on the picture of the user. In one of my articles we saw how to get my followers and of those I am following. In this article let's display users to whom I am following. You can use these snippets in Custom Web parts or Content Editor Web parts to show the respective user presence status.

Lync Presence: DefaultRender
  1.    <span>  
  2.  <span class='ms-imnSpan'>  
  3.   <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >  
  4.    <span class='ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10'>  
  5.     <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='[email protected]' id='imn_1,ty    pe=sip' />  
  6.    </span>  
  7.   </a>  
  8.  </span>  
  9. <span>  
  10.  <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'>  
  11. <img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='Us  er Presence' sip='[email protected]' id='imn_2,type=sip' /></a>Parth P  
  12. </span>  
  13. </span>  
  • Lync Presence: WithPictureDetailView
  1. <div>  
  2. <div class="ms-tableRow">  
  3.  <div>  
  4.   <span class='ms-imnSpan'>  
  5.   <a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >  
  6.    <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='[email protected]' id='imn_661,type=sip' /></span>  
  7.   </a>  
  8.   </span></span>  
  9. </div>  
  10. <div class="ms-tableCell ms-verticalAlignTop">  
  11. <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='[email protected]' 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='[email protected]' id='imn_34523,type=sip' /></a> Parth P</span></div></li></ul></div>  
  12. </div>  
  13. </div>  
Use the following procedure to create a sample.

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select "Site Actions" | "Edit Page".

Edit the page, go to the "Insert" tab in the Ribbon and click the "Web Part" option. In the "Web Parts" picker area, go to the "Media and Content" category, select the "Script Editor" Web Part and press the "Add button".

Step 3: Once the Web Part is inserted into the page, you will see an "EDIT SNIPPET" link; click it. You can insert the HTML and/or JavaScript as in the following: 
  1. <script type="text/javascript">  
  2.         function showPresencePeople(followed) {  
  3.   
  4.   
  5.             var htmlStr = "";  
  6.   
  7.             ClientContext context = new Microsoft.SharePoint.Client.ClientContext(“http://SPSite”);  
  8.   
  9.             GroupCollection groupCollection = context.Web.SiteGroups;  
  10.             context.Load(groupCollection,  
  11.             groups = > groups.Include(  
  12.             group = > group.Users));  
  13.   
  14.             context.ExecuteQuery();  
  15.   
  16.             foreach (Group group in groupCollection)  
  17.             {  
  18.             UserCollection userCollection = group.Users;  
  19.   
  20.             foreach (User userObj in userCollection)  
  21.             {  
  22.              
  23.             var userName = userObj.get_name();  
  24.             var userSiteUri = userObj.get_personalSiteUri();  
  25.             var userId = userObj.get_id();  
  26.             var userPictureUri = userObj.get_imageUri();  
  27.             var userEmailAddress = userObj.get_emailAddress();  
  28.   
  29.             if (userPictureUri == null) {  
  30.                 var picsStr = '<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 onload="IMNRC(\'' + userEmailAddress + '\')" name="imnmark" title="' + userName + '" ShowOfflinePawn=  "1" class="ms-spimn-img ms-spimn-presence-disconnected-8x72x32" src="/_layouts/15/images/spimn.png?rev=23" alt="' + userName + '" sip="' + userEmailAddress + '" id="imn_' + i + ',type=sip" /></span></a></span></span><span class="ms-imnSpan"><a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1"><img onload="IMNRC(\'' + userEmailAddress + '\')" name="imnmark" title="T_' + userName + '" ShowOfflinePawn="1" class=" ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="A' + userName + '" sip="' + userEmailAddress + '" id="simn_' + i + ',type=sip" /></a><span class="ms-peopleux-imgUserLink"><span class="ms-peopleux-userImgWrapper" style="width:72px; height:72px"><a href="' + userSiteUri + '"><img style="min-width:72px; min-height:72px; clip:rect(0px, 72px, 72px, 0px); max-width:72px" src="/_layouts/15/images/PersonPlaceholder.200x150x32.png" alt="' + userName + '" /></a></span></span></span>';  
  31.             }  
  32.             else {  
  33.                 var picsStr = '<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 onload="IMNRC(\'' + userEmailAddress + '\')" name="imnmark" title="' + userName + '" ShowOfflinePawn=  "1" class="ms-spimn-img ms-spimn-presence-disconnected-8x72x32" src="/_layouts/15/images/spimn.png?rev=23" alt="' + userName + '" sip="' + userEmailAddress + '" id="imn_' + i + ',type=sip" /></span></a></span></span><span class="ms-imnSpan"><a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1"><img onload="IMNRC(\'' + userEmailAddress + '\')" name="imnmark" title="T_' + userName + '" ShowOfflinePawn="1" class=" ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="A' + userName + '" sip="' + userEmailAddress + '" id="simn_' + i + ',type=sip" /></a><span class="ms-peopleux-imgUserLink"><span class="ms-peopleux-userImgWrapper" style="width:72px; height:72px"><a href="' + userSiteUri + '"><img style="min-width:72px; min-height:72px; clip:rect(0px, 72px, 72px, 0px); max-width:72px" src="' + userPictureUri + '" alt="' + userName + '" /></a></span></span></span>';  
  34.             }  
  35.   
  36.             htmlStr += picsStr;  
  37.         }  
  38.   
  39.             }  
  40.              
  41.   
  42.                   
  43.             $('#followedDiv').html(htmlStr);  
  44.         }  
  45. </script>  
  46. <div id=" followedDiv'"></div>  
In this code, the values of attributes, like sip, alt and src are given properly and are mandatory.
 
Here the userEmailAddress variable stores the email address of the user, the userPictureUri stores the URL of the user picture, the userName stores the name of the user and userSiteUri is the URL of the My Site page URL.

If you are rendering a presence for multiple/single users using the preceding snippets, ensure you:

  • Set the email id, image source and alt property accordingly
  • Id property always has unique value
  • Opening and closing tags are managed properly.
The Output of the Presence Indicator with Picture is as in the following:
Presence Indicator.jpg 
 
Important: when you are using JavaScript to generate this HTML and then bind it to the control as in the example above, do not forget to call “IMNRC“ on the “onload” of the image where the presence is displayed. Without this “IMNRC” call the user presence indicator will not work.

 


Similar Articles