Power Apps Display A User Photo Or Initials

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:

TitleAssignedByDueDate
Align Engine OutputDavid Johnson8/3/2021
Align TelescopeMatthew Devaney8/5/2021
Assemble ArtifactMary Baker8/6/2021
Buy BeverageKelly Smith8/6/2021
Calibrate DistributorMary Baker8/10/2021
Chart CourseSarah Green8/13/2021
Clean O2 FilterSarah Green8/16/2021
Fill CanistersDavid Johnson8/16/2021
Measure WeatherMatthew Devaney8/18/2021
Monitor TreeKelly Smith8/19/2021

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.

Matthew Devaney

Subscribe
Notify of
guest
8 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Davide
Davide
4 months ago

Hi Matthew,

great method, but shouldn’t the Sharepoint column “Assigned To/By” a People column instead of single line text one as you are using DisplayName, First Name, Surname and Email properties of each listed person. Am I wrong?
anyway, thanks for all the great posts you create. Those are great sources of inspiration.

thanks,
Davide

Davide
Davide
4 months ago

Happy to help, even if I did nothing! ?

Jean-Rémy Gallapont
Jean-Rémy Gallapont
4 months ago

Great article Matthew (again :)) but I think using Office365Users.UserPhotoV2(AssignedBy.Email) with AddColumn can be very time consuming, especialy if you create your collection OnStart of the application

I have a 250 items SharePoint list and I used to call Office365Users.UserPhotoV2 directly in the Image property of the picture item in my gallery, It was not very clean because I might have to do it again on other screens but it has the advantage of be loaded asynchronously. So I can see items details in my galley quite fast

Is there any way to fill data in AddColumn in an asynchronous way?

Jean-Rémy Gallapont
Jean-Rémy Gallapont
4 months ago

This is what I did and this “load after the gallery is loaded” effect is really better for user experience. Thanks

Vladimir
Vladimir
9 days ago

Sorry, but I didn’t understand where to put the code:
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)
)
)