How to add your user profile picture to a PowerApp

22 februari 2018

Office 365 has a very distinctive look across the whole range of products. (Okay, Dynamics CRM always falls behind a bit ) It would be nice to mimic this look in your PowerApps. This way you could help user adoption because people recognize it as something familiar they already know.

Here's a short article about adding your profile picture from your own Office 365 profile. One remark, this only works when the user has an active Exchange Online account.

So let’s start and create a new PowerApp. In this example I’ll use a blank phone app.

First we’re going to connect the PowerApp to the Office 365 users Connector.

Step 1: Open the ‘View tab’ and click ‘Data sources’. Now click ‘Add data source’.

Step 2: select the 'Office 365 Users' connection. Now it’s added to your PowerApp and you can use it to fetch data and update data (the selected connector should support this, not all connectors might support getting or setting data)

Close the Data drawer,

Step 3: From the ‘Insert tab’ click ‘Icons’ and insert a ‘Rectangle’. Drag the edges to fit the width of the page and position it to the top of the page.

You should end up with something like this.

Step 4: Insert a ‘Label’ from the ‘Insert tab’. In this example I’ve changed the font to ‘Segoe UI’, the color to ‘White’ and the size to ‘24’. Also, I did align the text to the right.

Step 5 is to fetch the DisplayName from the Office 365 user profile. Open the advanced tab for Label1. And enter the following in ‘Text’ Office365Users.MyProfileV2().displayName. This will fetch the Office 365 user profile from the user and show the displayName.

Btw, don’t just copy paste but do it by hand this time. A great feature from PowerApps is the auto complete feature like IntelliSense from Visual Studio. Makes it real easy to do it right the first time.

As you see, the label is updated real time.

Step 6: Now it’s time to enter the user profile picture. First we add an ‘Image’ from the ‘Media tab’. This inserts a placeholder/sample image which we resize and position in the top right corner. Now also make sure the display name is aligned correct.

Step 7: On the ‘Advanced tab’ (yes, this is the tab where the magic and fun stuff happens most of the time ) enter the following in the ‘Image text box’:


PowerApps is so kind to immediately show the most likely option for the type of field you're using.

You also see the syntax you need to use. Apparently we need the Id from the user. This can be the user principal name (UPN) or email id. So the syntax should be like this. Where the email address is the UPN of the user:


But the UPN can’t be hard coded of course. So we’re also fetching the UPN from the user profile. The complete syntax will be like this:


So this is a real easy way to make your apps more personal and familiar! Stay tuned for my next blog, it will cover the first steps in the CRM-connector for PowerApps.

Submit a comment

Dit vind je vast ook interessant.