Power Apps Display A User Photo Or Initials

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-display-a-user-photo-or-initials/. Author: Matthew Devaney.

Power Apps Display A User Photo Or Initials Posted by - Matthew Devaney on - August 29, 2021 39 Comments

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: Title AssignedBy DueDate Align Engine Output David Johnson 8/3/2021 Align Telescope Matthew Devaney 8/5/2021 Assemble Artifact Mary Baker 8/6/2021 Buy Beverage Kelly Smith 8/6/2021 Calibrate Distributor Mary Baker 8/10/2021 Chart Course Sarah Green 8/13/2021 Clean O2 Filter Sarah Green 8/16/2021 Fill Canisters David Johnson 8/16/2021 Measure Weather Matthew Devaney 8/18/2021 Monitor Tree Kelly Smith 8/19/2021

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' Code language: JavaScript ( javascript )

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 Code language: CSS ( css ) ThisItem .AssignedBy .Display Name Code language: CSS ( css ) 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 Code language: HTTP ( http )

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) ) ) Code language: JavaScript ( javascript )

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 Code language: CSS ( css )

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(ThisItem.UserPhoto) Code language: HTTP ( http )

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 ) ) ) ) Code language: JavaScript ( javascript )

Use this code in the Text property of the button to show the initials ThisItem .Initials Code language: CSS ( css ) 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) ) ) Code language: JavaScript ( javascript ) The final result will look like this. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Image Control Office365Users Connector Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps