Handling Missing User Profile Photos in Canvas Apps

Lately I’ve been spending a lot of time working with photos in Canvas Apps in order to create more of a visual impact in my user interface design. Often this photo can come from the Office 365 User’s profile photo upload but we can’t necessarily predict or control whether the end user will definitely have a photo uploaded.

In this example I wanted to use data from Shifts to show who is going to be on annual leave this week, and the code that I am using to retrieve the photo is as follows where ‘userId’ is the column to identify the user in the list of Shifts records.

Office365Users.UserPhotoV2(Text(ThisItem.userId))

The Power Fx formula tries to obtain the photo based upon the userId of the returned Gallery Item. Immediately we receive an error and depending on the way that you’re trying to identify the Office365User, this error can vary, sometimes showing ‘resource not found’ too!

A screenshot of a canvas app displaying an error due to an invalid error for the 'id' parameter.

The reason for this error is that the Canvas App doesn’t know what to show as the image if it can’t find the Office365Users’ photo. Whilst this doesn’t seem significant right now as other images are showing, it will prevent any proceeding functions from behaving correctly and your end users may have a degraded user experience when running the app.

A screenshot of the Canvas app showing errors on the canvas and in the notification bar explaining that the photo could not be found.

Fortunately we can fix this with some minor edits.

Use IfError to Control the Situation

The IfError function is a way to identify whether an error occurs and what the ‘fallback’ should be in that particular event. We use IfError as opposed to IsError as this formula is specifically designed to revert to an alternative if the error occurs, whereas if we use IsError, we would need to combine this with an If statement and repeat parts of our code because IsError only returns whether an error actually occurred. I have used IfError as shown below:

IfError(Office365Users.UserPhotoV2(ThisItem.userId),SampleImage)

By adapting our previous snippet of code and using SampleImage as the fallback, this guarantees that we will not see a system error for this particular reason moving forward, and that a placeholder image will be shown for any users that do not have a profile picture. All proceeding code can execute with no problems too.

A screenshot of the canvas app showing error handling and a placeholder image if the photo could not be found for the Office 365 User.

This also increases the perception of quality. Showing a placeholder image instead of a blank circle indicates that there is data that has been returned rather than giving the impression that something hasn’t loaded.

As you’d expect though, it’s difficult to tell who this person is with the placeholder image showing, so it’d be worth adding an additional identifier such as the Office365Users’ Display Name underneath the photo too. This can easily be done with the Office365Users Connector with the following code, but I haven’t shown it in this example as I was working with real data.

Office365Users.UserProfileV2(ThisItem.userId).displayName

References

Microsoft Learn | Error, IfError, IsError, IsBlankOrError functions in Power Apps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s