Power Apps Display A User Photo Or Initials

Displaying a user photo in an app helps a user quickly identify a person. In most organizations not everyone has a user photo. So what can we do when this happens? I enjoy the Office 365 fallback method where a user’s initials are shown inside a circle shape with a unique color for the person. This design is not included in Power Apps out-of-the box but we can make it for ourselves.

In this article will show you how to display a user photo in Power Apps.

Table of Contents:
Introduction: The Messages App
Setup the SharePoint List
Create A Gallery With Tasks And Assigned By
Add The User Profile Picture
Display The User's Initials When No Photo Is Available
Assign A Fill Color For The Initials

Introduction: The Messages App

Workers at a research lab use the Messages App to assign to communicate and assign each other tasks. The profile picture of the person who sent the message is displayed beside the task name.

Setup the SharePoint List

Create a SharePoint list called Tasks List to hold all of the meetings with the following columns:

• Title (single-line text)
• Assigned To (person)
• Due Date (date & time)

Load the SharePoint list with this data:

Create A Gallery With Tasks And Assigned By

Open Power Apps Studio and create a new mobile app from blank. Insert a gallery onto the screen and add the Tasks List SharePoint list as a datasource.

The Items property of the gallery should show this code.

'Tasks List'

Add two labels to the screen to display the task title and who it was assigned by. Then insert one more label with a gray Fill property to act as a separator between the gallery items.

Write the following code in the Text property of the labels for Title & Assigned By respectively.

ThisItem.Title

ThisItem.AssignedBy.Display Name

Add The User Profile Picture

Each gallery item shows a profile picture of the person who assigned the task.

Insert an image control into the gallery. The image control will show as a square shape by default. Use these properties to change it to a circle shape instead.

Height: 70
RadiusTopLeft: 90
RadiusTopRight: 90
RadiusBottomLeft: 90
RadiusBottomRight: 90
Width: 70

To obtain the user profile picture we must use the Office365Users connector. Add it to the Messages app.

Then update the Items property of the gallery with this code to add profile pictures in a new column called UserPhoto. It is likely that some users in the organization will not have a photo and attempting to download a missing photo will cause a runtime error in Power Apps. To avoid this we can perform a check with the UserPhotoMetadata action of the Office365Users connector and only get the photos for users who have one.

AddColumns(
    'Tasks List',
    "UserPhoto",
    If(
        // check if the the user has an email and a profile picture
        !IsBlank(AssignedBy.Email)
        And Office365Users.UserPhotoMetadata(AssignedBy.Email).HasPhoto,
        // get the profile picture
        Office365Users.UserPhotoV2(AssignedBy.Email)
    )
)

Now we are ready to display the profile picture in the gallery.

Go to the Image property of the Image control and use this code.

ThisItem.UserPhoto

Display The User’s Initials When No Photo Is Available

When no photo is available for a user we will display their initials instead just like in other Office 365 apps. Insert a new button into the gallery…

…and give it the properties below to make it a circle that is the same size as the profile picture. We reference the profile picture in the X & Y properties to ensure the button appears in exactly the same position. If a profile picture exists, the initials should not show so we check the photo with the IsBlank function in the Visible property of the button.

Color: White
DisplayMode: DisplayMode.View
Height: 70
RadiusTopLeft: 90
RadiusTopRight: 90
RadiusBottomLeft: 90
RadiusBottomRight: 90
Width: 70
X: img_UserPhoto.X
Y: img_UserPhoto.Y
Visible: IsBlank(img_UserPhoto)

Next, we will determine the user’s initials.

Once again, go to the gallery’s Items property and add the new code below. We get the user’s initials by looking at the givenName and surname properties of the user in Office 365.

AddColumns(
    'Tasks List',
    "UserPhoto",
    If(
        !IsBlank(AssignedBy.Email)
        And Office365Users.UserPhotoMetadata(AssignedBy.Email).HasPhoto,
        Office365Users.UserPhotoV2(AssignedBy.Email)
    ),
    // *** NEW CODE ***
    "Initials",
    With(
        {
            // get the user record
            varRecordUser: If(
                !IsBlank(AssignedBy.Email),
                Office365Users.UserProfileV2(AssignedBy.Email)
            )
        },
        // find the user initials
        Concatenate(
            Left(varRecordUser.givenName, 1),
            Left(varRecordUser.surname, 1)
        )
    )
)

Use this code in the Text property of the button to show the initials

ThisItem.Initials

Assign A Fill Color For The Initials

The initials should display a different color for each user in the gallery with no profile picture. This makes each user easier to identify.

Use this code in the Fill property of the initials button. If you’d like to use your own custom set of colors update the variable varColors with alternate values.

With(
    {
        varChar: ForAll(
            Sequence(26),
            {
                Letter: Char(64+Value),
                Number: Value
            }
        ),
        varColors: Table(
            {Color: "#d13438", ID: 1}, // Red 10
            {Color: "#ca5010", ID: 2}, // Orange 20
            {Color: "#fce100", ID: 3}, // Yellow 10
            {Color: "#0b6a0b", ID: 4}, // Green 20
            {Color: "#00ad56", ID: 5}, // Green Cyan 10
            {Color: "#00b7c3", ID: 6}, // Cyan 10
            {Color: "#0078d4", ID: 7}, // Cyan Blue 20
            {Color: "#5c2e91", ID: 8}, // Blue Magenta 30
            {Color: "#881798", ID: 10}, // Magenta 20
            {Color: "#e3008c", ID: 11}, // Magenta Pink 10
            {Color: "#69797e", ID: 12}  // Gray 20
        )
    },
    LookUp(
        varColors,
        ID=Mod(
            Sum(
                AddColumns(
                        Split(
                            Substitute(
                                Upper(ThisItem.AssignedBy.DisplayName),
                                " ",
                                ""
                            ),
                            ""
                        ),
                    "SumValue",
                    LookUp(
                        varChar,
                        Letter=Result,
                        Number
                    )
                ),
                SumValue
            ),
            12
        ) + 1,
        ColorValue(Color)
    )
)

The final result will look like this.

Questions?

If you have any questions or feedback about Power Apps Display A User Photo Or Initials please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.