Display User Photo in Gallery on All device type

[h-nagao]

Introduction

This blog explains how to display a picture of user in Gallery control on ALL device types, PC, iOS, and Android.

In this blog, the data source is assumed to be SharePoint custom list with Person formatted field.

You can apply the code shown here to any type of apps, if your apps have data including principal name or Email of users.

Naively, to display a picture of user, you add Image to Gallery and set Image property as 

ThisItem.PersonFieldName.Picture

(In my sample list, PersonFieldName is SinglePerson and set field name on your list)

This approach works well on browser, however, when you launch app on mobile app, no pictures would displayed in your Gallery.

As commented within the following topic, any pictures that need to authentication on SharePoint are not supported.

https://powerusers.microsoft.com/t5/General-Discussion/Share-point-pictures-can-not-be-seen-on-IOS-D...

This is a reason why a picture of user is not displayed on mobile device.

Currently, we have another approach (workaround) to display a picture on ALL device types, which is using "Office365 Users" connector to get a picture.

Using "Office365 Users" as data source of user photo

"Office365 Users" connector has several functions to search users, get users profile, get user photo etc.

For a detail of this connector, see this link.

Please remember that to use these functions, we first add the connector as a data source within your app.

*App makers sometimes forget this step, therefore would get an error "Name isn't valid".

After adding a connection, return to Gallery control.

To display user photo on all device types, we set Image property of Image as

If(
 !IsBlank(ThisItem.PersonFieldName.Email), 
  Office365Users.UserPhotoV2(ThisItem.PersonFieldName.Email)
)

Condition of If statement avoids an error arise when you move screen having this Gallery.

As a result of using Office365 Users connector, we can display photo on both PC and mobile app.

Additional Remarks -For multiple-valued person field

If you need to display users photo regarding multiple-valued person field, you add (sub) Gallery inside Gallery items, and insert image to that Gallery.

Items property of sub Gallery is 

ThisItem.MultiPersonFieldName

and also set Image property inside sub Gallery as in the case of single person field:

If(
 !IsBlank(ThisItem.Email), 
  Office365Users.UserPhotoV2(ThisItem.Email)
)

Because we already specified field name in Items property, no need to add field name for Image property.