SharePoint 2013: Display a User with Presence Indicator in a Custom WebPart

When building a custom WebPart that displays users, I wanted to show the Users as displayed in the people Search. screen1

Just a Picture with a small Presence indicator stroke on the left side. This is how Lync shows users as well. It's possible to use SharePoint JS functions to Render a User like this.

Getting User Data

To render a User the SharePoint 2013 way we need some Contextual Information about the User we want to display. For showing Presence we need the User’s SipAddress. Besides that I want to show the Profile Picture and the Preferred Name. With the new Search REST Api there are lots of easy ways to do this. In this example I'm using Search to retrieve some users based on a Profile Property. My REST Url is as follows:

"'Department=ICT'&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'&rowlimit='100'&selectproperties='FirstName, LastName, PictureURL, SipAddress, PreferredName, WorkEmail'"

I'm looking for people that have their Department property filled with "ICT". The sourceid is the GUID of the Default Result Source "Local People Results" (This is a fixed GUID same for On Prem and SharePoint Online). With selectproperties I can indicate what I want to get back from Search.

Handle Search Results from REST

The result object is a very complex object that needs some parsing. Even when using selectproperties, still some overhead is coming into the results. To get the correct Values based on the Fieldnames we can use the jQuery.grep() function to query the object array and get back the correct values. I use this function:

getValueByKey: function (key, results) { var postItem = jQuery.grep(results, function (e) { if (e.Key === key) return e; })[0].Value;

return postItem; }

The results argument is the Object Array that holds the results, the key argument is the Property Name of which we need the Value.

Next: Create a User Context

To render the User I use a SharePoint function "RenderUserFieldWorker(renderCtx, fieldSchemaData, userData, listSchema)". This function is available in the clienttemplates.js. First we have to Ensure that script file and then create the rendering. This script makes sure everything is in place.

EnsureScriptFunc("clienttemplates.js", "RenderUserFieldWorker", function () { ULS2Vv:; //Parse Results var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results; for (i = 0; i < results.length; i++) { //Get the correct properties var item = results[i]; var itemCell = item.Cells; var itemResults = itemCell.results; //Get Values for User var sip = getValueByKey("SipAddress", itemResults); var userPic = getValueByKey("PictureURL", itemResults); var fullname = getValueByKey("PreferredName", itemResults); var lastname = getValueByKey("LastName", itemResults); var email = getValueByKey("WorkEmail", itemResults); //Use SharePoint Render Template to render User with Presence var renderCtx = new ContextInfo(); renderCtx.Templates = {}; renderCtx.Templates["Fields"] = {}; var fieldSchemaData = { "PictureOnly": "1", "PictureSize": "Size_72px" }; var listSchema = { "EffectivePresenceEnabled": "1", "PresenceAlt": "User Presence" }; var userData = { "title": fullname, "email": email, "picture": userPic, "sip": sip }; var user = RenderUserFieldWorker(renderCtx, fieldSchemaData, userData, listSchema); } //Enable Presence ProcessImn(); )};

The variable user now contains the HTML to render a User’s profile picture with the Presence Stroke. The final step to activate the Presence is the function ProcessImn(). That function makes sure that all Presence Controls on the Page are showing the latest status.

The Presence only becomes available when you have Lync setup correctly. For Office 365 use the Desktop Setup to accomplish this.

Download a complete example right here!