{"id":1683,"date":"2018-03-12T14:49:20","date_gmt":"2018-03-12T18:49:20","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1683"},"modified":"2018-09-18T14:26:09","modified_gmt":"2018-09-18T18:26:09","slug":"how-to-display-office-365-user-profile-images-in-powerapps","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-display-office-365-user-profile-images-in-powerapps\/","title":{"rendered":"HOW TO: Display Office 365 User Profile Images in PowerApps"},"content":{"rendered":"

In almost every PowerApp you develop that integrates with Office 365 you will find yourself displaying Office 365 profile pictures for people.\u00a0 Here are some examples from the PowerApps templates we’ve created for Microsoft.<\/p>\n

Onboarding Tasks PowerApp Template<\/strong><\/p>\n

\"\"<\/a><\/p>\n

Shoutouts PowerApp Template<\/strong><\/p>\n

\"\"<\/a><\/p>\n

The Errors<\/h5>\n

If you don’t do it right, you will see run-time errors that typically look like this:<\/p>\n

\"\"<\/a><\/p>\n

Note:<\/strong> These errors only appear at run-time, you will not see them occur when running the PowerApp from the editor in preview mode, however, they will show up in the editor designer, like this.<\/p>\n

\"\"<\/a><\/p>\n

The Pattern<\/h5>\n

To display Office 365 profile pictures without throwing errors, you need to do several checks ahead of time to ensure you do not see errors in the PowerApp.<\/p>\n

Note:\u00a0<\/b>Previously, a bug existed\u00a0in the connector that returns if a user has a profile picture or not.\u00a0 Thankfully, the bug has been corrected in the connector, and now this pattern is possible to implement.<\/p>\n

Here’s how to go about it.<\/p>\n

    \n
  1. Check to see if the user has an Id<\/li>\n
  2. Check to see if the user is an external user by inspecting the domain for their email account<\/li>\n
  3. Check to see if the user has a profile picture<\/li>\n
  4. If any of the checks fail, display a placeholder image<\/li>\n
  5. If all of the checks pass, call Office365Users.UserPhoto to return the photo and display it<\/li>\n<\/ol>\n

     <\/p>\n

    Here’s what this looks like in code:<\/p>\n

    \"\"<\/a><\/p>\n

    Here’s the code if you want to copy and paste.<\/p>\n

    If(\r\n\u00a0\u00a0\u00a0 IsBlank(ThisItem.Id),\r\n\u00a0\u00a0\u00a0\u00a0'profilepic-generic-user',\r\n\u00a0\u00a0\u00a0\u00a0If(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Not(UserDomain.Text = MyDomain),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'profilepic-generic-user',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 If(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Office365Users.UserPhotoMetadata(ThisItem.Id).HasPhoto = true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Office365Users.UserPhoto(ThisItem.Id),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'profilepic-generic-user')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 )\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 )\r\n\u00a0\u00a0 )<\/pre>\n
    [UPDATE 6-20-2018]<\/h5>\n
    When you call Office365User.UserPhotoMetadata you can pass in the User.Id or User.UserPrincipalName returned from Office365Users.SearchUser.<\/p>\n
    At this time, the\u00a0Office365User.UserPhotoMetadata function does not support passing in the User.Mail field returned from Office365Users.SearchUser.\u00a0 This may fail if a user’s email address is different than their user principal, so it is not recommended to pass email addresses into\u00a0Office365User.UserPhotoMetadata.<\/p>\n
    [\/UPDATE]<\/h5>\n
    Sample PowerApp<\/h5>\n
    To demonstrate this, my buddy\u00a0Alex Belikov<\/a> and I created a nice little PowerApp that shows two different galleries of people and their Office 365 profile pictures.<\/p>\n
    The gallery on the left includes all the checks.\u00a0 The gallery on the right does not.\u00a0 In both cases shown below, I am returning internal and external users who do and do not have a profile picture.<\/p>\n
    Notice, when I refresh the list of people in the gallery on the left, no error messages appear.<\/p>\n
    \"\"<\/p>\n
    However, when I refresh the gallery on the right, an error message appears because the external user does not have a profile picture.<\/p>\n
    \"\"<\/p>\n
    You can download the sample PowerApp here.<\/a><\/p>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    In almost every PowerApp you develop that integrates with Office 365 you will find yourself displaying Office 365 profile pictures for people.\u00a0 Here are some examples [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[103,96,46,104,121],"tags":[10,5,122,54,45,112],"class_list":["post-1683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-mobile","category-most-popular","category-office-365","category-powerapps","tag-custom-development","tag-helpful-code","tag-how-to-powerapps","tag-mobile","tag-o365","tag-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1683"}],"version-history":[{"count":14,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1683\/revisions"}],"predecessor-version":[{"id":1754,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1683\/revisions\/1754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1710"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}