Using Javascript to access user profile image

Question

I have a persons field in a list which displays the Users Name (Not userid/Account name)

On another site within the same site collection I can retrieve this information but I need to query UPS and display the Photo of the user.

I've looked at the following but the image is not being returned (I've altered the domain\userid) https://msdn.microsoft.com/en-us/library/office/jj920104.aspx

I'm running sharepoint 2010

Thanks

UPDATE

   <asp:Content id="Content1" runat="server" contentplaceholderid="PlaceHolderMain">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<script type="text/javascript">

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

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

function GetProfilePicture(){
        var userName="wl_dom1\\tim dalton";
        var soapEnv =
            "<?xml version='1.0' encoding='utf-8'?> \
    <soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
  <soap:Body> \
    <GetUserProfileByName xmlns='http://microsoft.com/webservices/SharePointPortalServer/UserProfileService'> \
      <AccountName>"+ userName +"</AccountName> \
    </GetUserProfileByName> \
  </soap:Body> \
</soap:Envelope>";


$(function() {
  //Chech jQuery loaded


        $.ajax({
            url: "http://share.lilondon.com/sites/arsitecoll/_vti_bin/userprofileservice.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
 });       


}   

function processResult(xData, status) {
        var results = $(xData.responseXML);
        console.log(results);
        var elmValue = results.getElementsByTagName("Value");

        var pictureUrl;

        //you will have to iterate through xml to find PictureUrl name and value

        for (i = 0; i < elmValue.length; i++) {
            if (elmValue[i].parentNode.parentNode.parentNode.childNodes[2].text =='PictureUrl') {
                pictureUrl = elmValue[i].childNodes[0].nodeValue;
                break;
            }
        }               
        console.log(pictureUrl);
 }











</script>

Note I've added '$(function() {'

Error SCRIPT438: Object doesn't support property or method 'addEventListener' File: jquery.min.js, Line: 2, Column: 29928

SCRIPT5007: The value of the property '$' is null or undefined, not a Function object

I then changed jQuery version to 1.10.2 and tried other 1.x.x versions and get a new error. So thing any version above 1 adds addition issues, maybe because of the browser or sp2010.

Object doesn't support property or method 'getElementsByTagName'

Answer 1

You can call the REST api and query for the PictureUrl/PictureURL user property.

var webUrl = _spPageContextInfo.webAbsoluteUrl;
webUrl = (webUrl.endsWith('/') ? webUrl : webUrl + '/');

// ***** Use only one of the following statements *****

//Get all properties of current user
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetMyProperties";
//Get single property of current user
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetMyProperties/PictureUrl";
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl";
//Get Multiple Properties for the current user
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl,AccountName";

//Get all properties of Specific User - Office 365/SharePoint Online
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='i:0%23.f|membership|[email protected]'";
//Get all properties of Specific User - SharePoint 2013 On-Premise
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='domain\\username'";
//Get Specific UserProfile Property of Specific User - Office 365/SharePoint Online
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName='PictureURL')?@v='i:0%23.f|membership|[email protected]'";
//Get Specific UserProfile Property of Specific User - SharePoint 2013 On-Premise
var apiUrl = webUrl + "_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName='PictureURL')?@v='domain\\username'";

$.ajax({
    url: apiUrl,
    type: "GET",
    headers: { "accept": "application/json;odata=verbose" },
    success: onCompleted,
    error: onError
});

function onCompleted(data) {
    // do something with data
}
function onError(error) {
    console.log(error);
}

Take care on the property name. Use the PictureUrl property when querying the GetMyProperties endpoint and PictureURL when querying the GetUserProfilePropertyFor endpoint.

Answer 2

Cecilia provided the correct answer for 2013.

But I saw in the comments that you are using SP2010, so you can try below code.

Have used JSOM and REST api both. You might need to modify the processResult method for XML parsing and getting the value of picture url.

Just ensure that jQuery is available before making REST call.

Option 1:

var item;
var userName;

function getItem(itemId){
    var clientContext = new SP.ClientContext.get_current();

    var web = clientContext.get_web();

    var list = web.get_lists().getByTitle('CustomList');

    item = list.getItemById(itemId);

    clientContext.load(item);

    clientContext.executeQueryAsync(onSuccess, onFailure);

}

function onSuccess(){

    console.log(item.get_item("Userolumn").get_lookupValue());

    userName = item.get_item("Usercolumn").get_lookupValue();

    //username would be like domain\\user
    GetProfilePicture(userName);
}
function onFailure(data){

    console.log("Failure!" + data);
}

function GetProfilePicture(userName){

        var soapEnv =
            "<?xml version='1.0' encoding='utf-8'?> \
    <soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
  <soap:Body> \
    <GetUserProfileByName xmlns='http://microsoft.com/webservices/SharePointPortalServer/UserProfileService'> \
      <AccountName>"+ userName +"</AccountName> \
    </GetUserProfileByName> \
  </soap:Body> \
</soap:Envelope>";

        $.ajax({
            url: "http://sitecollectionurl/_vti_bin/userprofileservice.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });

}   
function processResult(xData, status) {
        var results = $(xData.responseXML);
        console.log(results);
        var elmValue = results.getElementsByTagName("Value");

        var pictureUrl;

        //you will have to iterate through xml to find PictureUrl name and value

        for (i = 0; i < elmValue.length; i++) {
            if (elmValue[i].parentNode.parentNode.parentNode.childNodes[2].text =='PictureUrl') {
                pictureUrl = elmValue[i].childNodes[0].nodeValue;
                break;
            }
        }               
        console.log(pictureUrl);
 }

Option 2: Use the SPServices library as below. Just add jQuery and SPServices js references and you are good to go.

SPServices

$().SPServices({
    operation: "GetUserProfileByName",
    async: true,
    AccountName: "domain\\user",
    completefunc: function (xData, Status) {
        firstName = getUPValue(xData.responseXML, "FirstName");     
        manager = getUPValue(xData.responseXML, "PictureUrl");
    }
});


function getUPValue(x, p) {
    var thisValue = $(x).SPFilterNode("PropertyData").filter(function () {
    return $(this).find("Name").text() == p;
    }).find("Values").text();
    return thisValue;

};

Answer 3

1. For the person field, you can edit the column and select 'Name with picture and details' option under Show Field option.

2. You can retrieve the user id and account name using CSOM or JSLink then use the URL below to retrieve the picture URL without the querying user profile.

   // Get user field value
   var assignedToVal = item.get_item('AssignedTo');
   var userName = assignedToVal.get_lookupValue();   
   window.console && console.log(userName);
   
   // Construct profile picture URL
   var pictureUrl = _spPageContextInfo.webAbsoluteUrl + '/_layouts/15/userphoto.aspx?accountname=' + escapeProperly(userName);
   window.console && console.log(pictureUrl);