Query User Profile Service for Multiple Users in SharePoint Using SPServices

Aug 25, 2015 at 10:58 PM

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");

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 = [];
 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");
 //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>';

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) {
 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;
 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!

Found this article by Dhaval Shah valuable? Help by Sharing ...

  • Click on the banners at the top of article or in the right panel to visit my blog's sponsors. They are all hand-picked and are selected based on providing great products and services to the SharePoint community.
  • I’d be very grateful if you’d help it spread by Sharing. Below, you should find links to sharing this article on your favorite social media sites.
Related Posts by Dhaval Shah blog comments powered by Disqus