Get User Profile Display Picture Information in SharePoint 2013 CSOM

Introduction

In the SharePoint 2013 environment, SP.UserProfiles JavaScript is used to get user profiles and user properties in custom solutions and apps for SharePoint 2013.

The following are the various objects supported in the SP.userProfile namespace:

• HashTag
• HashTagCollection
• PeopleManager
• PersonProperties
• ProfileLoader
• UserProfile
• UserProfilePropertiesForUser

In this article, I will provide the sample code to get the user profile display picture information for a specific user and display it in your custom application page.

Code

// Ensure that the SP.UserProfiles.js file is loaded before the custom code runs.

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

var userProfileProperties;

 

function getUserProperties() {

 

    // get the target users domain name and account name.

    var targetUser = "SomeDomain\\SomeUserName";

    // Get the current client context.

    var clientContext = new SP.ClientContext.get_current();

    //Get PeopleManager Instance

    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);

    // Get the properties to retrieve

    var profilePropertyNames = ["PreferredName", "PictureURL"];

    var userProfilePropertiesForUser = new SP.UserProfiles.UserProfilePropertiesForUser(

    clientContext,

    targetUser,

    profilePropertyNames);

    // Get user profile properties for the target user

    userProfileProperties =peopleManager.getUserProfilePropertiesFor(userProfilePropertiesForUser);

    // Load the UserProfilePropertiesForUser object.

    clientContext.load(userProfilePropertiesForUser);

    //Execute the Query

    clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);

}

 

// This function runs if the executeQueryAsync call succeeds.

function onRequestSuccess() {

    document.getElementById("profilelink").href = userProfileProperties[1];;

    document.getElementById("username").innerHTML = userProfileProperties[0];

    if (userProfileProperties[1]!== null) {

        document.getElementById("Userprofileimage").src = userProfileProperties[1];

    }

}

 

// This function runs if the executeQueryAsync call fails.

function onRequestFail(sender, args) {

    $get("Userprofileimage ").innerHTML = "Error: " + args.get_message();

}

Code Walkthrough

UserProfilePropertiesForUser Method: Represents a set of user profile properties for a specified user.

getUserProfilePropertiesFor Method: Gets the specified user profile properties for the specified user.

onRequestSuccess: This will be called if the query becomes successful

onRequestFail: This block will be executed if the query fails.

userProfileProperties: This variable holds the User Display Information.

Userprofileimage: HTML Img Tag to hold the display picture.

Summary

I hope this article helps you techies. Happy SharePointing.