Query User Profile Service for Multiple Users in SharePoint Using SPServices

Lot of people are using the SPServices these days. SPServices is a jQuery library which encapsulates SharePoint Web Services with jQuery to make it easy to call them.

In this post, I will show how to query the user profile service from the SharePoint (2010/2013/Office 365) using the SPServices. As it will retrieve the properties of multiple users and there is no batch query possible in SharePoint to retrieve the properties of all users in one shot, we will leverage the async and cache property of the SPServices to query properties of multiple users.

Before we begin let’s make sure that SPServices is loaded correctly and SPServices JS files are loaded.

Download the jquery.SPServices-0.6.2.min.js file from here and reference in the code as below. I will suggest to upload it in the Site Assets Library.

 <script type="text/javascript" language="javascript" src="../SiteAssets/jquery-1.6.1.min.js"></script>  
 <script type="text/javascript" language="javascript" src="../SiteAssets/jquery.SPServices-0.6.2.min.js"></script>  
 <script type="text/javascript" language="javascript">  
  $(document).ready(function() {  
   alert("jQuery Loaded");  
   alert($().SPServices.SPGetCurrentSite());  
  });  
 </script>  

If we get both the alerts that means our Jquery and SPservices javascript files are loaded and we can move further.
Now to begin with for the demo purpose we will retrieve the users stored in the SharePoint group and we will display the user profile properties from that user list.
We will store the usernames of all the users in the ‘usersList’ array and push their login name in it.

 var userDivPnl;  
 var usersList = [];  
 $().SPServices({  
   operation: "GetUserCollectionFromGroup",  
   groupName: 'Members Group',  
   async: false,  
   completefunc: function(xml, Status) {  
     $(xml.responseXML).SPFilterNode("User").each(function() {  
       var name = $(this).attr("Name").toUpperCase();  
       var accountname = $(this).attr("LoginName");  
       usersList.push(accountname);  
       //Replacing the special characters from the loginname  
       var login = accountname.split("|")[2].replace("@", "_").replaceAll(".", "");  
       //Generate the HTML Div structure to add users properties in each div  
       userDivPnl += '<div>' +  
         '<div > ' +  
         '<div class="profile_photo" style="width: 100px;"> ' +  
         '     <img height="96" width="96" id="profile_' + login + '" src="' + noProfileImg + '" style="border-radius: 100%;"/> ' +  
         '</div> ' +  
         '&nbsp;&nbsp; ' +  
         '<div > ' +  
         '<p id="dispname_' + login + '"></p> ' +  
         '<p id="jobtitle_' + login + '"></p> ' +  
         '<p id="country_' + login + '"></p> ' +  
         '<p id="contact_' + login + '"><a href="#"></a></p> ' +  
         '<p><a id="email_' + login + '"></a></p> ' +  
         '</div> ' +  
         '</div> ' +  
         '</div> ';  
     });  
     userDivPnl += '</div>';  
     $("#container").append(userDivPnl);  
   }  
 });  

Once we have the raw DIV structure of the user profiles are ready for each user we will load them with the asynchronous call of the SPServices.
We will make call to the GetUserProfileByName method of the SP Services.

 //Retreive all the user profiles properties async  
 $.each(usersList, function(index, value) {  
   $().SPServices({  
     operation: "GetUserProfileByName",  
     AccountName: value,  
     async: true,  
     cache: true,  
     completefunc: function(xData, xStatus) {  
       // generate a unique div id for each user from login name  
       var idVal = value.split("|")[2].replace("@", "_").replaceAll(".", "");  
       var profilePicPath = getUPValue(xData.responseXML, "PictureURL") === "" ? noProfileImg : getUPValue(xData.responseXML, "PictureURL");  
       var email = getUPValue(xData.responseXML, "WorkEmail");  
       var contact = getUPValue(xData.responseXML, "WorkPhone") === "" ? "--" : getUPValue(xData.responseXML, "WorkPhone");  
       var country = getUPValue(xData.responseXML, "CountryName") === "" ? "--" : getUPValue(xData.responseXML, "CountryName");  
       var jobTitle = getUPValue(xData.responseXML, "Title") === "" ? "--" : getUPValue(xData.responseXML, "Title");  
       $("#dispname_" + idVal).text(getUPValue(xData.responseXML, "PreferredName"));  
       $("#jobtitle_" + idVal).text(jobTitle);  
       $("#country_" + idVal).text(country);  
       $("#contact_" + idVal).text(contact);  
       $("#email_" + idVal).text(email);  
       $("#email_" + idVal).attr("href", "mailto:" + email);  
       if (profilePicPath != noProfileImg)  
         $("#profile_" + idVal).attr("src", profilePicPath);  
     }  
   });  
 });  
 function getUPValue(x, p) {  
   var thisValue = $(x).SPFilterNode("PropertyData").filter(function() {  
     return $(this).find("Name").text() == p;  
   }).find("Values").text();  
   return thisValue;  
 }  

This should retrieve the user profile values from the user profile service. As you can see we have set the async and cache property to true.

So once the page is loaded it will gradually load the data from the user profile service asynchronously. Cache will enable the page to cache the data as the user profile data is not changed so frequently.

Happy SharePointing!