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
17 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Davide
Davide
10 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
9 months ago

Happy to help, even if I did nothing! ?

Jean-RĂ©my Gallapont
Jean-RĂ©my Gallapont
9 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
9 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
5 months 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)
)
)

Kjell Vistnes Randeberg
Kjell Vistnes Randeberg
4 months ago

Hi Matthew, great tutorial, but could you clarify where to put the code? Perhaps with a picture. I’m unable to get this to work when I add the code to the “Items” of the Gallery

Kjell Vistnes Randeberg
Kjell Vistnes Randeberg
4 months ago

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)
)
)

Roni Ferreira de Souza
Roni Ferreira de Souza
4 months ago

Me chamo Roni e sou do Brasil!

Comecei com Power Plataform a mais ou menos 2 meses.

E gostaria de agradecer por compartilhar seu conhecimento.

Sou no com o LowCode, mas jĂĄ entendo sua logica.
Estava eu procurando uma maneira de mostrar as fotos dos users, e BAMMMM!!! Eu vi seu blog. Todo dia olho uma matĂ©ria sua diferente, muitas me cativa a aplicar em meus Apps, espero que vocĂȘ possa sempre nos trazer mais e mais conteĂșdos fantĂĄsticos.

Vou deixar uma imagem de uma experiĂȘncia para os usuĂĄrios.
Se te interessar eu compartilho a experiĂȘncia com vocĂȘ.

Uma galeria dentro de outra galeria.
O primeiro filtra pelo perfil, e a segunda pelo cod da empresa.

Captura de tela 2022-02-04 122638.png
Roni Ferreira de Souza
Roni Ferreira de Souza
4 months ago

Yes!,

My name is Roni and I'm from Brazil!

I started with Power Platform about 2 months ago.

And I would like to thank you for sharing your knowledge.

I'm no with LowCode, but I already understand your logic.
I was looking for a way to show users photos, and BAMMMM!!! I saw your blog. Every day I look at a different article of yours, many captivate me to apply it in my Apps, I hope you can always bring us more and more fantastic content.

I'll leave a picture of an experience for users.
If you're interested, I'll share the experience with you.

A gallery within another gallery.
The first filters by profile, and the second by company code.
Alberto Valdes
Alberto Valdes
4 months ago

Your article helped a lot, thanks.

In my case I don’t use a SharePoint list to get the users.

Here is how I create a Person picker.

I insert a Textinput (TextInput1) and a gallery (Gallery1) with image (Image1), title and subtitle

In the Items property for the gallery I type:

If(Len(TextInput1.Text)>2,
Office365Users.SearchUserV2({searchTerm:TextInput1.Text}).value
) 

In the Visible property of the gallery I type:

Len(TextInput1.Text)>2 And TextInput1.Text<>Gallery1.Selected.DisplayName 

In the Height property of the gallery I type:

Self.TemplateHeight * (CountRows(Self.AllItems)+2)

In the OnSelect property of the gallery type:

Set(SelectedPerson,ThisItem); Reset(TextInput1)

In the Default property of the TextInput I type:

SelectedPerson.DisplayName

In the Clear Property of the TextInput type:

true

In the Text property of the Title I type:

ThisItem.DisplayName

In the Text property of the Subtitle I type:

ThisItem.JobTitle

In the Image property of the image I type:

Office365Users.UserPhotoV2(ThisItem.Mail)

Then I make the image round changing the properties:

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

I create the Button, send it to the back and change the properties:

Color: White
DisplayMode: DisplayMode.View
Height: 37
RadiusTopLeft: 90
RadiusTopRight: 90
RadiusBottomLeft: 90
RadiusBottomRight: 90
Width: 37
X: Image1.X
Y: Image1.Y

In the Text property of the button, I use:

Left(Upper(ThisItem.DisplayName), 1) &
Mid(
  Upper(ThisItem.DisplayName),
  Find(" ", Upper(ThisItem.DisplayName)) + 1,
  1)

(This will convert the initials to uppercase)

For the Assign a fill color for the initials part I just use the following in the Fill property:

RGBA(256*Rand(), 256*Rand(), 256*Rand(), 1)
Last edited 4 months ago by Alberto Valdes
Trent
Trent
4 months ago

I am trying to add a Search box for my gallery in the items properties and it doesn’t seem to be liking that. Any ideas?