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.

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.

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,

Now, here is the final code.