Fetch User Details And Profile Picture From Person Or Group Field Using REST API

Introduction

In one of my projects (on Office 365), I have a requirement to scroll the key contacts of a project with the user's details - Full Name, Department, Job Title, Phone (Work/ Mobile) and Picture URL. Since all contacts are internal employees, I don’t have to input user details, I just need a person and a group field in a list to capture the user.

 

In this article, we will learn how to fetch the user details and profile URL using REST API.

Approach

I have created a custom list (Key Contacts) with a people field by the name Contact. By default, List REST API returns User ID despite the show field selected in the column properties. Most of you might have thought the selection of “Name (with picture and details)” property would return all properties along with profile URL but it will return ID only since it is a lookup field.

REST URL - https:{sitecollection}/_api/web/lists/getbytitle('{ListName}’)/items

Response

 

In order to retrieve the user details, we have to include $expand OData query option. Now, this will allow fetching entities associated for the given property in the response. Explicitly specify which details (Contact/FirstName) you would like to retrieve, apparently there is no option to select all fields (like this Contact/*).

All fields names must be case sensitive and refer to the Internal names not to the display names.

For example - Contact/email will not work, it should be Contact/EMail

REST URL

https:{sitecollection}/_api/web/lists/getbytitle('{ListName}’)/items?$select=Contact/FirstName,Contact/LastName,Contact/JobTitle,Contact/WorkPhone,Contact/EMail,Contact/UserName&$expand=Contact/Id

Response

 

Thus, you can retrieve the details of the user. However, not all properties are retuned (this is on SharePoint online ) as stated here. It says “The Query to the field <fieldname> is not successful” for few fields.

I was successful with the following.

• Title
• Name
• EMail
• MobilePhone
• SipAddress
• Department
• JobTitle
• FirstName
• LastName
• WorkPhone
• UserName
• Office
• ID
• Modified
• Created

Mainly, one of my key details, “Picture URL” is missing. This really gave me a hiccup since it is the only one missing for my requirement and I didn’t want to make another user profile REST call to retrieve the URL. Anyhow, I figured out the option.

If you inspect the HTML of the profile URL in the IE developer, you can derive a URL format.

 

URL format is as follows, which takes account name (Email) as the input and Size(L/M/S) based on you design this acts as a rendition ID.

_spPageContextInfo.siteServerRelativeUrl + "/_layouts/15/userphoto.aspx?size=L&accountname=" + Email

Below are the image dimension variations,

• L - 200px * 200px
• M - 72px * 72px
• S - 48px * 48px

Now, here is the final code.

Note

For carousel (scroll) functionality, insert bootstrap CSS reference. Since I added it globally in the master page, I have not included that here. 

<div id="KeyContactsContainer" class="carousel slide wt-keycontacts" data-ride="carousel">
    <span>Key Contacts</span>
    <div id="Key_Contacts" class="carousel-inner">

    </div>
    <!-- Carousel controls -->
    <a class="carousel-control wt-left-carousel-control" href="#KeyContactsContainer" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control wt-right-carousel-control" href="#KeyContactsContainer" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var i = 0;
        var ListUrl = _spPageContextInfo.siteServerRelativeUrl + "/_api/web/lists/getbytitle('Key Contacts')/items";
        var Select = "?$select=Contact/FirstName,Contact/LastName,Contact/JobTitle,Contact/WorkPhone,Contact/EMail,Contact/UserName&$expand=Contact/Id";
        var Sort = "&$orderby=Position asc";
        var Filter = "&$filter=ContentType eq 'Key Contact'";
        var Query = Select + Sort + Filter;
        $.ajax({
            url: ListUrl + Query,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                if (data.d != undefined) {
                    var KeyContactsHTML = "";

                    $.each(data.d.results, function (index, item) {

                        $("#KeyContactsContainer").show();
                        var FirstName = item.Contact.FirstName;
                        var LastName = item.Contact.LastName;
                        var JobTitle = item.Contact.JobTitle || "";
                        var WorkPhone = item.Contact.WorkPhone || "";
                        var EMail = item.Contact.EMail;
                        var UserName = item.Contact.UserName;
                        UserName = UserName.split("@")[0];
                        var ImgSrc = _spPageContextInfo.siteServerRelativeUrl + "/_layouts/15/userphoto.aspx?size=L&accountname=" + EMail

                        ImgSrc = ImgSrc.replace("UserName", UserName);

                        KeyContactsHTML = "<div class='item" + (i == 0 ? " active" : "") + "'>"
                            + "<img src='" + ImgSrc + "' class='img-circle wt-keycontacts-image' style='min-height: 100px;'>"
                            + "<div class='wt-keycontacts-text'>"
                            + "<div class='wt-keycontacts-text-name'>" + FirstName + "  " + LastName + "</div>"
                            + "<div class='wt-keycontacts-text-title'>" + JobTitle + "</div>"
                            + "<div class='wt-email'>" + EMail + "</div>"
                            + "<div class='wt-phone' style='padding-left: 20px;'>" + WorkPhone + "</div>"
                            + "</div ></div > ";

                        $("#Key_Contacts").append(KeyContactsHTML);

                        //increase count until .each is done.
                        i++;
                    });

                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("POST error:\n" + xhr.status + "\n" + thrownError);
            }
        });

    });

</script>