The Best Way to Display a User Photo or Initials in Power Apps [Within & Out of Organization]

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.

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

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.

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.

5. To display initials while the user doesn’t have a profile picture, add one button control and provide the below value for the given properties.

Text = ThisItem.Initials
Visible = IsBlank(ThisItem.PresenterImage)

Here,

• Initials and PresenterImage are the customer columns that we created on gallery control.

When there is no user profile picture, then the button control will be visible. ThisItem.Initials will return the 1st letters of their name and surname.

Save and publish the application. Then, you can see the Initials and user photos on the Power Apps gallery. This way, we can display the user photo or initials in the Power Apps application from the Microsoft 365 application.

Power Apps Display User Profiles & Initials [Within & Out of Organization]

Here, we’ll see how to display the user profiles and initials if the users are within and out of the organization.

Recently, I was required to display the logged-in user profile on my Power Apps application; the logged user might be present in or out of the organization. If the user doesn’t have a profile picture, I must display initials in both cases.

The SharePoint list below contains users’ emails within and outside the organization.

It has the following fields with the below data types:

Column Name	Data Type
UserID	Title
Password	Single line of text
First Name	Single line of text
Last Name	Single line of text
Email Address	Single line of text
Phone Number	Single line of text

Follow the steps below to achieve this!

Make sure you added the Office365Users connector to the current application.

1. Create a login page by taking the controls below and arranging them as in the above example.

• User ID = text input control rename it as txt_userID
• Password =text input control rename it as txt_password
• Login = button
• Reset = button

For the login button on the OnSelect property, provide the code below.

//fetching email for loged in user
Set(varLoggedinUser,LookUp( 'Event Registration Form',Title=txt_userID.Text).Email);

// validating user credentails
If(
    LookUp('Event Registration Form',Title = txt_userID.Text).Password = txt_password.Text,
    Navigate(Event_CompleteDetails_screen),
    Notify( "Enterd Credentails are Not Correct!", NotificationType.Error )
);

Here,

• varLoggedinUser = Variable stores the entered User ID’s email address from the SharePoint list ‘Event Registration Form.’
• Title and Password are the fields in the SharePoint list.
• If the user ID and password are correct, it navigates to another screen (Event_CompleteDetails_screen).
• Otherwise, it displays an error notification.

2. Now, on the other screens, add an image control to display the image. Provide the formula below for its image property!

If(
    !IsError(Office365Users.UserPhotoMetadata(varLoggedinUser)) &&
    Office365Users.UserPhotoMetadata(varLoggedinUser).HasPhoto,
    Office365Users.UserPhoto(varLoggedinUser),
    Blank() // Fallback if no photo exists
)

The above code displays the user image if they are in the organization with a profile picture.

If the user’s email address is not present in the Microsft Office365, it returns an error. To handle this, we’re using !IsError(Office365Users.UserPhotoMetadata(varLoggedinUser)) formula returns a boolean value.

• varLoggedinUser = Variable contains logged-in user email address.
• .HasPhoto = This property returns true values if the user has a profile picture;
• If the user is present in the organization and has a photo then we’re fetching the image by providing the email in.UserPhoto() method of Office365connector.

3. Provide the below formula for the Visible property of the image control.

!IsError(Office365Users.UserPhotoMetadata(varLoggedinUser)) && Office365Users.UserPhotoMetadata(varLoggedinUser).HasPhoto

The above formula returns boolean values; if the user is present in the organization and has a photo, it returns true; otherwise, it is false.

4. Add a button control to display initials and provide the formulas below for the given properties.

Width=80
Hieght = 80
Radius=50
Text = If(IsError(Office365Users.UserPhotoMetadata(varLoggedinUser))||!Office365Users.UserPhotoMetadata(varLoggedinUser).HasPhoto,Upper(Left(LookUp('Event Registration Form',Title=txt_userID.Text).'First Name',1))&""&Upper(Left(LookUp('Event Registration Form',Title=txt_userID.Text).'Last Name',1))," ")

Visible = IsError(Office365Users.UserPhotoMetadata(varLoggedinUser)) || 
!Office365Users.UserPhotoMetadata(varLoggedinUser).HasPhoto

The formula for the Text & Visible property of the button control:

• IsError(Office365Users.UserPhotoMetadata(varLoggedinUser)) = Returns a true value if the user is not found in the organization.
• !Office365Users.UserPhotoMetadata(varLoggedinUser).HasPhoto = Returns a true value if the user has no profile picture.
• If these two conditions are true, we’re fetching 1st letters from ‘First Name’ and ‘Last Name’ of the SharePoint list ‘Event Registration Form’ for the user ID we entered on the Login screen with the LookUp () function.
• Using Upper (), I convert the fetched characters into uppercase letters, and I use the & operator to concatenate the two letters.
• If the starting two conditions are true, then only the button control will be visible; otherwise, it will not.

Save the changes and publish the app once. While previewing, you can see the images and initials of the logged-in user, as in the above example. This way, we can display user profile pictures and initials in scenarios where the user is within or out of the organization.

I hope you understand how to display the user photo or initials in Power Apps. I also explained how to get profile pictures from the Office 365 Users connector. Follow this article while trying to display the user profile pictures in the Power Apps application.

Also, you may like:

• 3 Easiest Ways to Concatenate Text Strings in Power Apps
• Power Apps Split String into Repeating Table
• Add an Image to a PDF Form in Power Apps
• Create a Dropdown With Other Option in Power Apps
• Save Power App’s current user and manager name in SharePoint person column.
• Power Apps get current user email
• Power Apps get last item id in SharePoint list based on current user