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.


Presentation:
The presence awareness of SharePoint depends on a couple different pieces of technology all working together, namely:
– SharePoint
– Exchange
– Lync
– Active Directory

Read some SharePoint 2013 tutorials 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:
1. The “id“must be unique and format must be like: “id=”imn_716,type=sip””.
2. Provide “alt” attribute value to the image.
3. Provide “src” attribute to the image.
4. 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.

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-10×10′>
<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=’parth@live.com’ id=’imn_2,type=sip’ /></a>Parth P
</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-10×10′><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=’Parth@live.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> Parth P</span></div></li></ul></div>
</div>
</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:



<script type=”text/javascript”>
function showPresencePeople(followed) {
var htmlStr = “”;
ClientContext context = new Microsoft.SharePoint.Client.ClientContext(“http://SPSite”);
GroupCollection groupCollection = context.Web.SiteGroups;
context.Load(groupCollection,
groups = > groups.Include(
group = > group.Users));
context.ExecuteQuery();
foreach (Group group in groupCollection)
{
UserCollection userCollection = group.Users;
foreach (User userObj in userCollection)
{
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-8×72″><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-8×72″><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.

If you are rendering presence for multiple/single user using the above snippets, make sure 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 Presence Indicator with Picture is like below:

SharePoint 2013: How to show User Presence on mouse hover
SharePoint 2013: How to show User Presence on mouse hover


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →