Monday, 29 May 2017

Office 365 / SharePoint online – Getting current user profile image (picture url) without callback in JSOM

Hi All,

In this article I’ll share one little finding which I recently found. This is related to the current user profile image which we need to show on our SharePoint online site in our custom master page. Generally in JSOM whenever we call / load something we need call backs. So we need to depend on either respective success or failure method. Here I’ll share how we can get current user or any user profile image without callback.

Background: In our one of the SharePoint online site, we need to show current logged in user profile image.  We have our custom master page. So we need to basically get the current user property – “Picture URL” and render. Since there is no another option we could found we have implemented using JSOM. So code is really simple as shown below.

Note: Here only shared sample code and not the complete one.

We have written one method “fetchUserDetails” which loads the user details as below


SP.SOD.executeOrDelayUntilScriptLoaded(fetchUserDetails, 'SP.UserProfiles.js');

     var userProfileProperties;

     function fetchUserDetails() {

         //Get Current Context  
         var clientContext = new SP.ClientContext.get_current();

         //Get Instance of People Manager Class
         var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);

         //Get properties of the current logged in user
         userProfileProperties = peopleManager.getMyProperties();
           
         //Load all the properties.
         clientContext.load(userProfileProperties);

         //Execute the Query.
         clientContext.executeQueryAsync(onfetchUserDetailsSuccess,onfail);

     } // fetchUserDetails

Success method as below


function onfetchUserDetailsSuccess () {

           //Get picture URL
           var pictureUrl = userProfileProperties.get_pictureUrl();

           //Currently just showing in alert
           alert(pictureUrl);    
} // onfetchUserDetailsSuccess

Disadvantage of above approach: There is nothing wrong in above approach but then we need to wait for the call back and then we get the profile image for current user. It’s not like that directly we will get the current user profile image. So it’s also a bit lazy loading.

New approach: Just while googling for some issue, I found that there is delve service which directly returns the any user profile image without call back. Service name is “DelveApi.ashx” and way to call it as


// Get current site URL
    var currentSiteURL = _spPageContextInfo.siteAbsoluteUrl;

    //Form the delve service URL
    var delveServiceURL = currentSiteURL +  "/_vti_bin/DelveApi.ashx/people/profileimage?userId=" + _spPageContextInfo.userLoginName + "&size=L";

We could also mention the size (L, M and S). Actually this service download the respective image as per specified the Size. So we could either use “div” tag or “img” tag and set the “src” property of them. No dependency on callback or no need to handle the failed method.

One more benefit of using this approach is, if we know the login name of the user then we can easily download there profile image by specifying respective login name to userId parameter. Currently here we are passing current logged in user’s login name. This is useful where in some scenarios we need show the users listing.

I hope you will find this little finding useful.


Thanks!

Enjoy Reading!

As usual any comment / suggestions / feedback / questions always welcome :)

2 comments:

Aakash Morya said...

Hi, Thanks for sharing alternative approach.

I am having one more approach which does the same thing without using any Callback function.

One can use following URL to fetch the profile image for current logged in user.

var profilePicUrl = _spPageContextInfo.siteAbsoluteUrl+ "/_layouts/15/userphoto.aspx?size=L&accountname=" + _spPageContextInfo.userLoginName;

This will return the profile image from the picture library "User Photos" located in MySite.

You can add this too in your post for your reader.

Prasham Sabadra said...

Hi Aakash,

Thanks a lot for your comment and thanks for sharing the details.