www.matthewdevaney.com
Open in
urlscan Pro
172.67.128.68
Public Scan
Submitted URL: http://www.matthewdevaney.com/power-apps-display-a-user-photo-or-initials/
Effective URL: https://www.matthewdevaney.com/power-apps-display-a-user-photo-or-initials/
Submission: On November 11 via api from NL — Scanned from DE
Effective URL: https://www.matthewdevaney.com/power-apps-display-a-user-photo-or-initials/
Submission: On November 11 via api from NL — Scanned from DE
Form analysis 6 forms found in the DOM
GET https://www.matthewdevaney.com/
<form role="search" method="get" id="search-form" class="clearfix" action="https://www.matthewdevaney.com/"><input type="search" name="s" placeholder="Type Something" value""=""><input type="submit" id="submit" value="Search"></form>POST #
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-1">
<p id="subscribe-email">
<label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-1"> Enter your email address </label>
<input type="email" name="email" required="required" class="no-border-radius required" style="font-size: 16px; padding: 15px 23px 15px 23px; border-radius: 0px; border-width: 1px;" value="" id="subscribe-field-1"
placeholder="Enter your email address">
</p>
<p id="subscribe-submit">
<input type="hidden" name="action" value="subscribe">
<input type="hidden" name="source" value="https://www.matthewdevaney.com/power-apps-display-a-user-photo-or-initials/">
<input type="hidden" name="sub-type" value="widget">
<input type="hidden" name="redirect_fragment" value="subscribe-blog-1">
<button type="submit" class="wp-block-button__link no-border-radius" style="background: #2fb6ab; font-size: 16px; padding: 15px 23px 15px 23px; margin-top: 10px; border-radius: 0px; border-width: 1px;" name="jetpack_subscriptions_widget"> Sign Me
Up </button>
</p>
</form>POST https://www.matthewdevaney.com/wp-admin/admin-ajax.php?action=wpdAddSubscription
<form action="https://www.matthewdevaney.com/wp-admin/admin-ajax.php?action=wpdAddSubscription" method="post" id="wpdiscuz-subscribe-form">
<div class="wpdiscuz-subscribe-form-intro">Notify of </div>
<div class="wpdiscuz-subscribe-form-option" style="width:40%;">
<select class="wpdiscuz_select" name="wpdiscuzSubscriptionType" style="display: none;">
<option value="post">new follow-up comments</option>
<option value="all_comment">new replies to my comments</option>
</select>
<div class="nice-select wpdiscuz_select" tabindex="0"><span class="current">new follow-up comments</span>
<ul class="list">
<li data-value="post" class="option selected">new follow-up comments</li>
<li data-value="all_comment" class="option">new replies to my comments</li>
</ul>
</div>
</div>
<div class="wpdiscuz-item wpdiscuz-subscribe-form-email">
<input class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email">
</div>
<div class="wpdiscuz-subscribe-form-button">
<input id="wpdiscuz_subscription_button" class="wpd-prim-button wpd_not_clicked" type="submit" value="›" name="wpdiscuz_subscription_button">
</div>
<input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="349a793c52"><input type="hidden" name="_wp_http_referer" value="/power-apps-display-a-user-photo-or-initials/">
</form>POST
<form method="post" enctype="multipart/form-data" data-uploading="false" class="wpd_comm_form wpd_main_comm_form">
<div class="wpd-field-comment">
<div class="wpdiscuz-item wc-field-textarea">
<div class="wpdiscuz-textarea-wrap ">
<div class="wpd-avatar">
<img alt="guest" src="https://secure.gravatar.com/avatar/?s=56&d=mm&r=g" class="avatar avatar-56 photo avatar-default jetpack-lazy-image" height="56" width="56" loading="lazy" decoding="async"
data-lazy-srcset="https://secure.gravatar.com/avatar/?s=112&d=mm&r=g 2x" data-lazy-src="https://secure.gravatar.com/avatar/?s=56&is-pending-load=1#038;d=mm&r=g"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img alt="guest" src="https://secure.gravatar.com/avatar/?s=56&d=mm&r=g"
srcset="https://secure.gravatar.com/avatar/?s=112&d=mm&r=g 2x" class="avatar avatar-56 photo avatar-default" height="56" width="56" loading="lazy" decoding="async"></noscript>
</div>
<div id="wpd-editor-wraper-0_0" style="">
<label style="display: none;" for="wc-textarea-0_0">Label</label>
<div id="wpd-editor-0_0" class="ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true" data-placeholder="Join the discussion">
<p><br></p>
</div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://example.com"
data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div>
<div class="ql-texteditor"><textarea id="wc-textarea-0_0" name="wc_comment" class="wc_comment wpd-field" style="display: none;"></textarea></div>
</div>
<div id="wpd-editor-toolbar-0_0" class="ql-toolbar ql-snow">
<button title="Bold" class="ql-bold" type="button"><svg viewBox="0 0 18 18">
<path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
<path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
</svg></button>
<button title="Italic" class="ql-italic" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="13" y1="4" y2="4"></line>
<line class="ql-stroke" x1="5" x2="11" y1="14" y2="14"></line>
<line class="ql-stroke" x1="8" x2="10" y1="14" y2="4"></line>
</svg></button>
<button title="Underline" class="ql-underline" type="button"><svg viewBox="0 0 18 18">
<path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path>
<rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="12" x="3" y="15"></rect>
</svg></button>
<button title="Strike" class="ql-strike" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke ql-thin" x1="15.5" x2="2.5" y1="8.5" y2="9.5"></line>
<path class="ql-fill" d="M9.007,8C6.542,7.791,6,7.519,6,6.5,6,5.792,7.283,5,9,5c1.571,0,2.765.679,2.969,1.309a1,1,0,0,0,1.9-.617C13.356,4.106,11.354,3,9,3,6.2,3,4,4.538,4,6.5a3.2,3.2,0,0,0,.5,1.843Z"></path>
<path class="ql-fill" d="M8.984,10C11.457,10.208,12,10.479,12,11.5c0,0.708-1.283,1.5-3,1.5-1.571,0-2.765-.679-2.969-1.309a1,1,0,1,0-1.9.617C4.644,13.894,6.646,15,9,15c2.8,0,5-1.538,5-3.5a3.2,3.2,0,0,0-.5-1.843Z"></path>
</svg></button>
<button title="Ordered List" class="ql-list" value="ordered" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line>
<line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line>
<line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line>
<line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line>
<path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path>
<path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path>
<path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path>
</svg></button>
<button title="Unordered List" class="ql-list" value="bullet" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line>
<line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line>
<line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line>
<line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line>
<line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line>
</svg></button>
<button title="Blockquote" class="ql-blockquote" type="button"><svg viewBox="0 0 18 18">
<rect class="ql-fill ql-stroke" height="3" width="3" x="4" y="5"></rect>
<rect class="ql-fill ql-stroke" height="3" width="3" x="11" y="5"></rect>
<path class="ql-even ql-fill ql-stroke" d="M7,8c0,4.031-3,5-3,5"></path>
<path class="ql-even ql-fill ql-stroke" d="M14,8c0,4.031-3,5-3,5"></path>
</svg></button>
<button title="Code Block" class="ql-code-block" type="button"><svg viewBox="0 0 18 18">
<polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline>
<polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline>
<line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line>
</svg></button>
<button title="Link" class="ql-link" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line>
<path class="ql-even ql-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path>
<path class="ql-even ql-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path>
</svg></button>
<button title="Source Code" class="ql-sourcecode" data-wpde_button_name="sourcecode" type="button">{}</button>
<button title="Spoiler" class="ql-spoiler" data-wpde_button_name="spoiler" type="button">[+]</button>
<div class="wpd-editor-buttons-right">
<span class="wmu-upload-wrap" wpd-tooltip="Attach an image to this comment" wpd-tooltip-position="left"><label class="wmu-add"><i class="far fa-image"></i><input style="display:none;" class="wmu-add-files" type="file" name="wmu_files[]"
accept="image/*"></label></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wpd-form-foot" style="display:none;">
<div class="wpdiscuz-textarea-foot">
<div class="wpdiscuz-button-actions">
<div class="wmu-action-wrap">
<div class="wmu-tabs wmu-images-tab wmu-hide"></div>
</div>
</div>
</div>
<div class="wpd-form-row">
<div class="wpd-form-col-left">
<div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
<div class="wpd-field-icon"><i class="fas fa-user"></i></div>
<input id="wc_name-0_0" value="" required="required" aria-required="true" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Name*" maxlength="50" pattern=".{3,50}" title="">
<label for="wc_name-0_0" class="wpdlb">Name*</label>
</div>
<div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
<div class="wpd-field-icon"><i class="fas fa-at"></i></div>
<input id="wc_email-0_0" value="" required="required" aria-required="true" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
<label for="wc_email-0_0" class="wpdlb">Email*</label>
</div>
<div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
<div class="wpd-field-icon"><i class="fas fa-link"></i></div>
<input id="wc_website-0_0" value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
<label for="wc_website-0_0" class="wpdlb">Website</label>
</div>
</div>
<div class="wpd-form-col-right">
<div class="wc-field-submit">
<label class="wpd_label" wpd-tooltip="Notify of new replies to this comment">
<input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type">
<span class="wpd_label__text">
<span class="wpd_label__check">
<i class="fas fa-bell wpdicon wpdicon-on"></i>
<i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
</span>
</span>
</label>
<input id="wpd-field-submit-0_0" class="wc_comm_submit wpd_not_clicked wpd-prim-button" type="submit" name="submit" value="Post Comment">
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id">
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="b77fd4af86"></p>
<p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="1731315885864">
<script>
document.getElementById("ak_js_1").setAttribute("value", (new Date()).getTime());
</script>
</p>
</form>POST
<form method="post" enctype="multipart/form-data" data-uploading="false" class="wpd_comm_form wpd-secondary-form-wrapper">
<div class="wpd-field-comment">
<div class="wpdiscuz-item wc-field-textarea">
<div class="wpdiscuz-textarea-wrap ">
<div class="wpd-avatar">
<img alt="guest" src="https://secure.gravatar.com/avatar/?s=56&d=mm&r=g" class="avatar avatar-56 photo avatar-default jetpack-lazy-image" height="56" width="56" loading="lazy" decoding="async"
data-lazy-srcset="https://secure.gravatar.com/avatar/?s=112&d=mm&r=g 2x" data-lazy-src="https://secure.gravatar.com/avatar/?s=56&is-pending-load=1#038;d=mm&r=g"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img alt="guest" src="https://secure.gravatar.com/avatar/?s=56&d=mm&r=g"
srcset="https://secure.gravatar.com/avatar/?s=112&d=mm&r=g 2x" class="avatar avatar-56 photo avatar-default" height="56" width="56" loading="lazy" decoding="async"></noscript>
</div>
<div id="wpd-editor-wraper-wpdiscuzuniqueid" style="display: none;">
<div id="wpd-editor-char-counter-wpdiscuzuniqueid" class="wpd-editor-char-counter"></div>
<label style="display: none;" for="wc-textarea-wpdiscuzuniqueid">Label</label>
<textarea id="wc-textarea-wpdiscuzuniqueid" name="wc_comment" class="wc_comment wpd-field"></textarea>
<div id="wpd-editor-wpdiscuzuniqueid"></div>
<div id="wpd-editor-toolbar-wpdiscuzuniqueid">
<button title="Bold" class="ql-bold"></button>
<button title="Italic" class="ql-italic"></button>
<button title="Underline" class="ql-underline"></button>
<button title="Strike" class="ql-strike"></button>
<button title="Ordered List" class="ql-list" value="ordered"></button>
<button title="Unordered List" class="ql-list" value="bullet"></button>
<button title="Blockquote" class="ql-blockquote"></button>
<button title="Code Block" class="ql-code-block"></button>
<button title="Link" class="ql-link"></button>
<button title="Source Code" class="ql-sourcecode" data-wpde_button_name="sourcecode">{}</button>
<button title="Spoiler" class="ql-spoiler" data-wpde_button_name="spoiler">[+]</button>
<div class="wpd-editor-buttons-right">
<span class="wmu-upload-wrap" wpd-tooltip="Attach an image to this comment" wpd-tooltip-position="left"><label class="wmu-add"><i class="far fa-image"></i><input style="display:none;" class="wmu-add-files" type="file" name="wmu_files[]"
accept="image/*"></label></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wpd-form-foot" style="display:none;">
<div class="wpdiscuz-textarea-foot">
<div class="wpdiscuz-button-actions">
<div class="wmu-action-wrap">
<div class="wmu-tabs wmu-images-tab wmu-hide"></div>
</div>
</div>
</div>
<div class="wpd-form-row">
<div class="wpd-form-col-left">
<div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
<div class="wpd-field-icon"><i class="fas fa-user"></i></div>
<input id="wc_name-wpdiscuzuniqueid" value="" required="required" aria-required="true" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Name*" maxlength="50" pattern=".{3,50}" title="">
<label for="wc_name-wpdiscuzuniqueid" class="wpdlb">Name*</label>
</div>
<div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
<div class="wpd-field-icon"><i class="fas fa-at"></i></div>
<input id="wc_email-wpdiscuzuniqueid" value="" required="required" aria-required="true" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
<label for="wc_email-wpdiscuzuniqueid" class="wpdlb">Email*</label>
</div>
<div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
<div class="wpd-field-icon"><i class="fas fa-link"></i></div>
<input id="wc_website-wpdiscuzuniqueid" value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
<label for="wc_website-wpdiscuzuniqueid" class="wpdlb">Website</label>
</div>
</div>
<div class="wpd-form-col-right">
<div class="wc-field-submit">
<label class="wpd_label" wpd-tooltip="Notify of new replies to this comment">
<input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type">
<span class="wpd_label__text">
<span class="wpd_label__check">
<i class="fas fa-bell wpdicon wpdicon-on"></i>
<i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
</span>
</span>
</label>
<input id="wpd-field-submit-wpdiscuzuniqueid" class="wc_comm_submit wpd_not_clicked wpd-prim-button" type="submit" name="submit" value="Post Comment">
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id">
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="b77fd4af86"></p>
<p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="ak_js" value="1731315885868">
<script>
document.getElementById("ak_js_2").setAttribute("value", (new Date()).getTime());
</script>
</p>
</form>POST #
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-3">
<div id="subscribe-text">
<p>Subscribe to get new Power Apps articles sent to your inbox each week for FREE.<br> </p>
</div>
<div class="jetpack-subscribe-count">
<p> Join 15,443 other subscribers </p>
</div>
<p id="subscribe-email">
<label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-blog_subscription-3"> Enter your email address </label>
<input type="email" name="email" required="required" value="" id="subscribe-field-blog_subscription-3" placeholder="Enter your email address">
</p>
<p id="subscribe-submit">
<input type="hidden" name="action" value="subscribe">
<input type="hidden" name="source" value="https://www.matthewdevaney.com/power-apps-display-a-user-photo-or-initials/">
<input type="hidden" name="sub-type" value="widget">
<input type="hidden" name="redirect_fragment" value="subscribe-blog-blog_subscription-3">
<button type="submit" class="wp-block-button__link" name="jetpack_subscriptions_widget"> I Want In >> </button>
</p>
</form>Text Content
DEVANEY 100 for $100 off Power Platform Conference 2024 registration
Skip to content
*
*
Matthew Devaney
No Ads, No Fluff, Just Power Apps Stuff
*
* Home
* Power Platform Standards
* Power Apps Standards
* Power Automate Standards
* Power Platform Functions
* Power Apps Functions
* Power Automate Functions
* Collections Cookbook
* Free Power Apps Icons
* About Me
* Home
* Power Apps
* Power Apps Display A User Photo Or Initials
POWER APPS DISPLAY A USER PHOTO OR INITIALS
* Posted by - Matthew Devaney
* on - August 29, 2021
* 35 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:
TitleAssignedByDueDateAlign Engine OutputDavid Johnson8/3/2021Align
TelescopeMatthew Devaney8/5/2021Assemble ArtifactMary Baker8/6/2021Buy
BeverageKelly Smith8/6/2021Calibrate DistributorMary Baker8/10/2021Chart
CourseSarah Green8/13/2021Clean O2 FilterSarah Green8/16/2021Fill CanistersDavid
Johnson8/16/2021Measure WeatherMatthew Devaney8/18/2021Monitor TreeKelly
Smith8/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'
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.
DID YOU ENJOY THIS ARTICLE?
Subscribe to get new Power Apps 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 ControlOffice365Users Connector
MATTHEW DEVANEY
* Power Apps
HOW TO ENABLE COLUMN LEVEL SECURITY IN DATAVERSE
* Power Apps
POWER APPS YAML CODE GENERATOR
* Power Apps
HOW TO VALIDATE A POWER APPS FORM BEFORE SUBMISSION
* Power Apps
* Power Platform Admin
SHARE A MODEL-DRIVEN APP WITH AN ENTRA SECURITY GROUP
* Power Apps
* Power Platform Admin
SHARE CANVAS APP WITH A MICROSOFT 365 GROUP IN POWER APPS
* Power Apps
POWER APPS: DOWNLOAD FILE FROM DATAVERSE FILE COLUMN
Subscribe
Connect with
Login
I allow to create an account
When you login first time using a Social Login button, we collect your account
public profile information shared by Social Login provider, based on your
privacy settings. We also get your email address to automatically create an
account for you in our website. Once your account is created, you'll be
logged-in to this account.
DisagreeAgree
Notify of
new follow-up comments new replies to my comments
new follow-up comments
* new follow-up comments
* new replies to my comments
Label
{} [+]
Name*
Email*
Website
Δ
I allow to create an account
When you login first time using a Social Login button, we collect your account
public profile information shared by Social Login provider, based on your
privacy settings. We also get your email address to automatically create an
account for you in our website. Once your account is created, you'll be
logged-in to this account.
DisagreeAgree
Label
{} [+]
Name*
Email*
Website
Δ
35 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Davide
3 years 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
Reply
Matthew Devaney
3 years ago
Reply to Davide
Davide,
You are correct! I missed that during my review and now I have updated the
article per your suggestion
Without your help I would not have noticed the error. Thank you for improving my
work
Reply
Davide
3 years ago
Reply to Matthew Devaney
Happy to help, even if I did nothing! ?
Reply
Jean-Rémy Gallapont
3 years 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?
Reply
Matthew Devaney
3 years ago
Reply to Jean-Rémy Gallapont
Jean-Remy,
If you are finding its not performing as well as hoped you could try moving the
UserPhoto code from add columns directly into the Image property of the image
and it would have a “load after the gallery is loaded” effect. Give this a try
and let me know.
Reply
Jean-Rémy Gallapont
3 years ago
Reply to Matthew Devaney
This is what I did and this “load after the gallery is loaded” effect is really
better for user experience. Thanks
Reply
Vladimir
2 years 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)
)
)
Reply
Matthew Devaney
2 years ago
Reply to Vladimir
Vladimir,
This code should go in the Items property of your gallery where the employee
names are displayed.
I can see why you were confused. My instructions were not as clear as I had
hoped. I have re-written that section of my article to provide greater clarity.
Best of luck building your app
Reply
Kjell Vistnes Randeberg
2 years ago
Reply to Matthew Devaney
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
Reply
Matthew Devaney
2 years ago
Reply to Kjell Vistnes Randeberg
Kjell,
What code block are you trying to add to the Items property of the gallery?
Reply
Kjell Vistnes Randeberg
2 years ago
Reply to Matthew Devaney
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)
)
)
Reply
Roni Ferreira de Souza
2 years 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.
Reply
Matthew Devaney
2 years ago
Reply to Roni Ferreira de Souza
Roni,
I only speak English. Can you please translate?
Reply
Roni Ferreira de Souza
2 years ago
Reply to Matthew Devaney
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.
Reply
Alberto Valdes
2 years 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 2 years ago by Alberto Valdes
Reply
Trent
2 years 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?
Reply
Matthew Devaney
2 years ago
Reply to Trent
Trent,
A generic code example to create a search box would be something like this.
Filter(datasource, TextInput_SearchBox.Text in column_name)
Reply
Tzar tzak
2 years ago
Hi, how I do this for only for the current user? Not in a gallery. Thanks
Reply
Danielx64
2 years ago
Hi Matt,
I’m just following along, would I be correct that if my SharePoint list has 300
items, Office365Users.UserPhotoV2() would be called 300 times? If that’s the
case would that 300 be considered API requests and therefore would count on our
daily 6K requests per user/per day?
Reply
Matthew Devaney
2 years ago
Reply to Danielx64
Daniel,
That’s a valid point. I like the UX I built but it would hit the API limits
pretty fast.
Reply
Cheryl
2 years ago
Hi Matthew,
I am trying to use this, but getting the red squiggly underline on this part:
Office365Users.UserPhotoV2(AssignedBy.Email)
The message when I hover on it says:
Office365Users.UserPhotoV2 failed: The method ‘UserPhotoV2″ has an invalid value
for parameter ‘id’
id is not one of the options provided by PowerApps, only Claims, Department,
DisplayName, Email, JobTitle, and Picture, and none of those work.
Grateful for any assistance you can provide!
Last edited 2 years ago by Cheryl
Reply
Matthew Devaney
1 year ago
Reply to Cheryl
Cheryl,
I think your AssignedBy.Email does not contain a valid User Principal Name. Take
a look at this forums post for how to potentially fix this:
https://powerusers.microsoft.com/t5/Building-Power-Apps/UserPhoto-and-UserPhotoV2-error/td-p/313735
Reply
Lena
1 year ago
Hi Matthew,
Thank you for this article, exactly what I was looking for. While testing with
only a couple of accounts it worked great, but now that it has to load more
profile pictures, I get a runtime error 503 Service unavailable. The total
number of items in the gallery is between 15 and 20, but I’m only getting the
error, if more than 7 profile pictures are loaded.
Do you have any idea how to get rid of that error?
Thanks!
Lena
Reply
Arnaud Le Granche
1 year ago
Hi,
To get all initials in case you have multiple givenname or surname you can use
the below formula:
Concat(ForAll(Split(varRecordUser.givenName&" "&varRecordUser.surName," "),{Initial:Left(ThisRecord.Result,1)}),Initial&" ")
Reply
Abbas
1 year ago
Letter=Result not recognized!
Reply
Matthew Devaney
1 year ago
Reply to Abbas
Abbas,
What are you asking here?
Reply
MacheenZero
1 year ago
Reply to Matthew Devaney
They are talking about this
“SumValue”,
LookUp(
varChar,
Letter=Result, ‘Name isn’t valid, ‘Result’ isn’t recognized
Number
)
I changed Letter=Result to Letter=Value
and it worked
Last edited 1 year ago by MacheenZero
Reply
Matthew Devaney
1 year ago
Reply to MacheenZero
Macheen,
This is because Microsoft decided to change the Power Apps language to use
“Value” instead of “Result” after I wrote the article. Thanks for messaging me.
Reply
Jose Tamez
11 months ago
Reply to MacheenZero
Wow, that made all the difference. I was looking for that as a variable and it
was nowhere to be found. I see now that Result must be old and not used anymore.
Oops! You said the same thing below…lol
Great article and I like that the way that turned out. So far the best solution
for just replacing the image with something when one is not available. Great
article Matthew, like always!
Reply
Dorian
1 year ago
Hi Matthew,
First, thank you for the tutorial it has been great help, I was able to
implement it for a part of my app, but now I’m trying to do something similar on
another section, and I’m having some issues.
I’m working on a task assignment app, on this app I have a main table with task,
and this table does a lookup to another employee table, to pick up the employees
assigned to a task, so one task can have one or several employees.
I’m using a gallery to make a card view of all the tasks, and then a nested
gallery to show the assigned employees.
Here ) is a picture to make it easier to understand.
The issue that I’m having is that the employees on the employee table are a
people type column, so when you try to use this part of 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)
)
)
It has issues checking for the email to see if it’s blank and then check for the
image of the item, I tried using a Lookup code
LookUp(tasklist, ID = ThisItem.Id, employeelist.email)
And check if that’s blank, but it seems to not work, do you have any ideas as to
what I could do to solve this?
Thank you again.
Reply
Lalasaheb Gaikwad
10 months ago
Hi Matthew,
How can i access Image from collection on screen image control ?
I am not able to access image from collection.
Please do the needful
Reply
Matthew Devaney
10 months ago
Reply to Lalasaheb Gaikwad
Lala,
There’s no issue accessing images whether through a direct datasource reference
or collection. It makes no difference.
Reply
Ali
6 months ago
Encountering errors.
Reply
Matthew Devaney
6 months ago
Reply to Ali
Ali,
PowerFx code changed recently. Try removing the quote marks.
Reply
Ali
6 months ago
Reply to Matthew Devaney
Nice! it’s working now. Thanks very much
Reply
SUBSCRIBE
Subscribe to get new Power Apps articles sent to your inbox each week for FREE.
Join 15,443 other subscribers
Enter your email address
I Want In >>
MOST RECENT POSTS
* Power Automate Excel Write Value To A Specific Cell Or Range
* Power Automate Excel Get The Value Of A Cell Or Range
* Power Automate: Instant Low-Code Plugins To Run PowerFx Code
* How To Use Power Automate + Azure OpenAI GPT Models
* Power Automate: Create Text With GPT & AI Prompts
* Power Automate Expand Query To Join SharePoint Lists
* Simplify Flow Settings With A Config File In Power Automate Desktop
* Power Automate FormatDateTime Function Examples
MOST POPULAR POSTS
* All Power Apps Date & Time Functions (With Examples)
* 7 Ways To Use The PATCH Function In Power Apps (Cheat Sheet)
* PowerApps Collections Cookbook
* The Complete Power Apps Functions List
* Create An Excel File And Add Rows Using Power Automate
* Power Automate: Save Email Attachments To SharePoint Library
* Foolproof Power Automate HTML Table Styling
* 2000 Free Power Apps Icons
* How To Validate A Power Apps Form Before Submission
* 25 Power Apps IF Function Examples
SUPPORT THIS WEBSITE
Buy me a cat treat
* Twitter
* Linkedin
wpDiscuz
Insert