Todd Baginski's Blog - A SharePoint, Mobile, Office365, PowerApps and Azure Blog

HOW TO: Display Office 365 User Profile Images in PowerApps

12 March 2018

Comments:

2
 March 12, 2018
 2

In almost every PowerApp you develop that integrates with Office 365 you will find yourself displaying Office 365 profile pictures for people.  Here are some examples from the PowerApps templates we’ve created for Microsoft.

Onboarding Tasks PowerApp Template

Shoutouts PowerApp Template

The Errors

If you don’t do it right, you will see run-time errors that typically look like this:

Note: These errors only appear at run-time, you will not see them occur when running the PowerApp from the editor in preview mode, however, they will show up in the editor designer, like this.

The Pattern

To display Office 365 profile pictures without throwing errors, you need to do several checks ahead of time to ensure you do not see errors in the PowerApp.

Note: Previously, a bug existed in the connector that returns if a user has a profile picture or not.  Thankfully, the bug has been corrected in the connector, and now this pattern is possible to implement.

Here’s how to go about it.

  1. Check to see if the user has an Id
  2. Check to see if the user is an external user by inspecting the domain for their email account
  3. Check to see if the user has a profile picture
  4. If any of the checks fail, display a placeholder image
  5. If all of the checks pass, call Office365Users.UserPhoto to return the photo and display it

 

Here’s what this looks like in code:

Here’s the code if you want to copy and paste.

If(
    IsBlank(ThisItem.Id),
    'profilepic-generic-user',
    If(
       Not(UserDomain.Text = MyDomain),
       'profilepic-generic-user',
       (
        If(
            Office365Users.UserPhotoMetadata(ThisItem.Id).HasPhoto = true,
            Office365Users.UserPhoto(ThisItem.Id),
            'profilepic-generic-user')
           )
       )
   )
[UPDATE 6-20-2018]

When you call Office365User.UserPhotoMetadata you can pass in the User.Id or User.UserPrincipalName returned from Office365Users.SearchUser.

At this time, the Office365User.UserPhotoMetadata function does not support passing in the User.Mail field returned from Office365Users.SearchUser.  This may fail if a user’s email address is different than their user principal, so it is not recommended to pass email addresses into Office365User.UserPhotoMetadata.

[/UPDATE]
Sample PowerApp

To demonstrate this, my buddy Alex Belikov and I created a nice little PowerApp that shows two different galleries of people and their Office 365 profile pictures.

The gallery on the left includes all the checks.  The gallery on the right does not.  In both cases shown below, I am returning internal and external users who do and do not have a profile picture.

Notice, when I refresh the list of people in the gallery on the left, no error messages appear.

However, when I refresh the gallery on the right, an error message appears because the external user does not have a profile picture.

You can download the sample PowerApp here.

 

2 responses on “HOW TO: Display Office 365 User Profile Images in PowerApps

  1. Jan says:

    Hi Todd,
    thank you for this manual, I tried this on my own but failing and still getting the errors.
    The reason is that in our company if user doesn’t have a picture there is no value in the parameter HasPhoto.
    So instead of getting the error on calling the image, I’m getting it on checking the HasPhoto value.
    Do you have any experience with this?

    Kind Regards
    Jan

    • Todd Baginski says:

      Hi Jan, thanks for reading. Yes, we have experience with this issue. The connector is throwing that error, it should have been fixed. I’ll touch base with the PowerApps team to check it out.