Display a User Photo or Initials in Power Apps with Examples

A few days before, I was trying to store the upcoming Power Apps workshop details in a gallery control. There, I needed to display the presenter’s image, but some presenters didn’t have a profile picture, so alternatively, we were required to display their initials.

Suppose someone’s name is Serena Waldroff; the initials will be SW, displayed in the gallery image. In this article, I will explain how to display a user photo or initials in Power Apps with a simple example.

Table of Contents:

Display a User Photo or Initials in Power Apps

In the example below, you can see the Power Apps gallery control, which contains the upcoming workshop details. The presenter’s profile picture is displayed for each workshop title, and the initials are displayed for the presenter who doesn’t have a profile picture.

Here is the SharePoint list that contains Power Apps upcoming workshop details.

This list contains the columns below.

Column Name	Data Type
WorkShop Name	Title
Description	Multiple lines of text
Date	Date & Time
Location	Single line of text
Presenter	Person
Registration Link	Hyperlink

Follow the steps below to achieve this!

1. Connect the above SharePoint list & Office365Users to the Power Apps application.

2. First, we’ll see how to get the user profile picture from the Office365Users connector. Add an image control and provide the formula below for its image property.

Office365Users.UserPhotoV2("miriamg@sgz52.onmicrosoft.com")

Here, Office365Users is the connector, and UserPhotoV2 is a method used to display the user’s photo. In place of the above email, provide your user’s mail.

If you want to display the current user’s image with this connector, replace the mail within quotes with User().Email.

Office365Users.UserPhotoV2(User().Email)

This way, we’ll get the image of users with the Office365Users connector.

3. In the new screen, add a gallery control and provide the formula below for its Items property.

AddColumns(
    'Upcoming PowerApps Work Shops',
    PresenterImage,
    If(
        !IsBlank(Presenter.Email) && Office365Users.UserPhotoMetadata(Presenter.Email).HasPhoto,
        Office365Users.UserPhotoV2(Presenter.Email),
        ""
    ),
    Initials,
    If(
        IsBlank(Office365Users.UserPhotoMetadata(Presenter.Email).HasPhoto) || !Office365Users.UserPhotoMetadata(Presenter.Email).HasPhoto,
        Left(Presenter.DisplayName,1) & If(Find(" ",Presenter.DisplayName) > 0,Mid(Presenter.DisplayName,Find(" ", Presenter.DisplayName) + 1,1),"" ),"" 
    )
)

Here,

‘Upcoming PowerApps Work Shops’ = SharePoint list name.
PresenterImage, Initials = Custom columns, which store user images and initials from their names.
Presenter = SharePoint person column name.
Using the Office365Users.UserPhotoMetadata() function, we’re checking whether the user has a profile picture.
If the user has an email and profile picture, then we’re storing the user image with this formula Office365Users.UserPhotoV2(Presenter.Email) into the PresenterImage custom column.
If the user doesn’t have a profile picture or email, we get the 1st letters from the name & surname and store them in the Initials column using the Left, Mid, and Find functions.

power apps display a user photo or initials

4. Add an image control inside the gallery control and provide the formulas below for the given properties.

Image = ThisItem.Presenter.Picture
Visible = !IsBlank(ThisItem.PresenterImage)

Here, we used the above formula on its Visible property to make this image control visible only when the user has a profile picture.ThisItem.Presenter.Picture is used to display the user image.