SharePoint 2013: How to show User Presence on mouse hover.
This Presence helps users to get in touch with their colleagues easily. User can see more information about colleagues like contact numbers, designation, departments without going to their personal page. Also it indicates the presence of colleague whether he/she available, away or offline.
SharePoint Lync/OC Presence
If you go to any SharePoint list, you can see user name with the presence icon in front of name under the ‘Modified By’ column or field. You can get below html code using any developer tool from these controls:
< 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-online-10x10x32"
src = "/_layouts/15/images/spimn.png" alt="Available" sip="ID@domain.com" id="imn_715,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" alt="Available"
sip = "ID@domain.com" id="imn_716,type=sip"></a>
< a class="ms-subtleLink" onclick="GoToLinkOrDialogNewWindow(this);return false;" href="/yammer/_layouts/15/userdisp.aspx?ID=259">User Name</a>
</ span >
</ span >
Now modify above code by providing correct “sip” and then post this code on any SharePoint page with the help of content editor web part. You will see the presence indicator of that user like below.
This is very easy and straight forward requirement for single user. What if you have to provide presence indicator of users more than one? In this case you need to be careful with some parameters in above code. These are:
- The “id“must be unique and format must be like: “id="imn_716,type=sip"”.
- Provide “alt” attribute value to the image.
- Provide “src” attribute to the image.
- And of course careful with the classes.
User Presence with Picture
Now in this article we will see how to display the OC or Lync Presence of user on mouse hover on the Picture of user. In one of my article we seen how to get my followers and those I am following. In this article let’s display users to whom I am following.
The Output of Presence Indicator with Picture is like below:
The below code snippet is used to generate this output:
< script type="text/javascript">
function showPeople(followed) {
var htmlStr = "";
for (var i = 0; i < 3 ; i++) {
var userObj = followed[i];
var userName = userObj.get_name();
var userSiteUri = userObj.get_personalSiteUri();
var userId = userObj.get_id();
var userPictureUri = userObj.get_imageUri();
var userEmailAddress = userObj.get_emailAddress();
if (userPictureUri == null) {
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>';
}
else {
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>';
}
htmlStr += picsStr;
}
$('#followedDiv').html(htmlStr);
}
</ script >
< div id=" followedDiv'”></div>
In this code; values to attributes like **sip, alt, src **are given properly and which are mandatory. Here **userEmailAddress **variable stores the email address of user,**userPictureUri **stores the URL of the user picture, **userName **stores the name of user and **userSiteUri **is the URL of My Site page URL.
Once the all images loads successfully, now do mouse hover on any user picture, the Lync/OC Presence Tool tip box appears. also the User Presence indicator appears in front of user picture.
**Important: **when you are using JavaScript to generate this html and then binding it the control as in above example; do not forget to call “IMNRC“ on “onload” of image where presence is displayed. Without this “IMNRC” call user presence indicator will not work.
In this way you can implement user presence indicator in our application. With slight modification you can display the name of user instead of Picture, or both Picture and name.