0

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'

3 Answers 3

2

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.

1

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;

};
5
  • As a test I'm trying to debug, Is the account name same as username I.e. Can I add username= "Tim Dalton" ? is this the correct and expected format Jan 17, 2017 at 16:43
  • Username format should be - domain\\user. In my environment, its spdev\\gautam.sheth . At your environment, it could be like spdev\\tim.dalton .Check the user profile property account name from central admin. Jan 17, 2017 at 17:49
  • Pls see updated question. Tried several jquery libraries however problems persist. In IE Developer tools IE 8 defaults Jan 18, 2017 at 11:15
  • I've tried option 1 above and repeatedly get error: Object doesn't support property or method 'getElementsByTagName' Jan 24, 2017 at 10:40
  • hmm, could be something to do with response of the data. Can you try option 2 , its a very standard library for SP2010. Jan 24, 2017 at 10:42
0
  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);
    
8
  • Will the above work on 2010? - Sorry should have mentioned earlier. Jan 17, 2017 at 13:15
  • Try it without the '15' after _layouts. so it should be '/_layouts/userphoto.asps....'
    – Aveenav
    Jan 17, 2017 at 15:27
  • Hi tried the following url in browser but all I'm getting is the blank image icon. tried many versions of account name but no joy. 'my.lilondon.com/_layouts/…\rajch' Jan 18, 2017 at 12:40
  • did you escape the username?
    – Aveenav
    Jan 18, 2017 at 15:09
  • I tried enteres the url into the browser directly ?AccountName=wl_dom\rajch and other alternatives with the claims notation also. Jan 18, 2017 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.