cancel
Showing results for 
Search instead for 
Did you mean: 

Display User Photo in Gallery on All device type

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.

naive.png

 

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.

O365Connector.png

 

 

 

 

 

 

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.

 

UsingO365.pngO365 result.png

 

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.

MultiPerson.png

 

Comments

its not working, getting errorprofilepic_error.PNG

Meet Our Blog Authors
  • PowerApps Community Mentor 2018, Practicing surgeon and former Professor of Surgery, University of Illinois, Chicago.
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 12 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • My name is Timothy Shaw and I create digital solutions using the Power Platform, Office 365, and Azure SQL and handle the IT for a small company in the energy sector. When not building the future :), I enjoy playing guitar, good (or really bad!) sci-fi, Xbox therapy, and hanging with my wife and son. Twitter: @ShortForTim