People picker Control in PowerApps

With the latest PowerApps update we can do more customization to achieve more use-cases. Especially with the new "Rule" feature in PowerApps(which keeps remembers me of InfoPath form 😏)

But, Then I was looking for People picker control in this latest PowerApps update. cant find any straight forward control thought. But now saw a connector called "Office365Users" then I started exploring it.

How to create People picker control in PowerApps

Update

1. Add "Office365Users" data source to the app.
2. Insert a "Combobox" from the ribbon.
3. Select "Combobox" and select 'Items' in the formula bar then enter below formula
Office365Users.SearchUser({searchTerm: ComboBox1.Text})
4. Then, select "Fields" from the property pane and choose "Primary text" a.k.a "Display Names" and "Search Fields".
5. Play the app and test it.
The below steps applies mostly in the early stages/release of PowerApps now that its matured enough, so follow the updated steps instead.

 There are a couple of controls and ways to create People Picker control
  1. Using Input box & ListBox
    • On-demand/Autocomplete users (With rules)
    • Prepopulated users (Without rules)
  2. Using ComboBox control
    • on-demand/Autocomplete users
    • Prepopulated users

App Setup

First, Add "Office365Users" data source to the app
Second, design the app with Input box, ListBox, ComboBox controls



Using Input box & ListBox control

Prepopulated [without rule]:

This is NOT RECOMMENDED as this will prepopulate users, when user base is huge it will certainly degrade the app performance.

Select list box -> formula bar


 Office365Users.SearchUser({searchTerm:txtSearchUser.Text}).UserPrincipalName



On demand [With rules]:

This will query user as we type in textbox, follow the below step and add this formula


 If(Rule3, Office365Users.SearchUser({searchTerm:txtSearchUser.Text}).UserPrincipalName)



Using ComboBox control

Prepopulated [without rule]:

This is NOT RECOMMENDED as this will prepopulate users, when user base is huge it will certainly degrade the app performance.


 Office365Users.SearchUser({searchTerm:ddlDetailedPeoplePicker.SearchText})



On demand [With rules]:

This will query user as we type in combobox, follow the below step and add this formula


 If(Rule2, Office365Users.SearchUser({searchTerm:ddlPeoplePicker.SearchText}))



Now, Select "Display fields":

Then finally select "Search Fields":
 



Run the app



Comments

  1. AnonymousNovember 9, 2017 at 6:44 AM

    Hi, this is great but i wish the instructions were clearer? There is a lot of guess work and i can't get passed the first couple of steps because i don't know how to the define the controls.

    ReplyDelete
    Replies
    1. Rathanavel SubramaniamNovember 10, 2017 at 9:53 AM

      Hello, Please refer related articles to establish new data source:
      http://ratsubsharewall.blogspot.com/2017/03/develop-powerapps-from-scratch-series1.html

      Then, Go to Insert->Control->Listbox/Combobox

      Delete
    2. HenduMarch 5, 2018 at 8:43 AM

      I cannot get a combo box to display anything in a dropdown. I really like what you have here where you search the combo box, then display the DisplayName and Mail (actually exactly what I need), but when i search there are no options that show up.

      However, when i connect the combo box search to a list box all the options show in the list box.

      Any idea why the results do no show in the combo box?

      Delete
    3. Rathanavel SubramaniamMay 3, 2018 at 1:59 AM

      Make sure you did mapped "Search Field" and "Display Fields" for Combobox.

      Delete
  2. AnonymousJanuary 23, 2018 at 2:06 PM

    What are the rules that you created? You say that the rules are needed but you don't actually show the full rule you created. That makes me sad, now I need to go find a different explanation how to create the people picker.

    ReplyDelete
    Replies
    1. Rathanavel SubramaniamMay 3, 2018 at 2:52 AM

      If(Rule2, Office365Users.SearchUser({searchTerm:ddlPeoplePicker.SearchText})) check this image to configure rules.

      Delete
  3. AnonymousJune 2, 2018 at 3:34 AM

    Very interesting. Could you wire up the listbox to display users from a multi-value person column from a SharePoint list?

    ReplyDelete
  4. UnknownOctober 2, 2018 at 8:49 AM

    This is amazing!! Thank you so much, exactly what I needed. 'On Demand [with rules] for the combo box is the way to go.

    ReplyDelete
  5. AnonymousNovember 16, 2018 at 4:48 AM

    For the people that didn't manage to follow this in the first couple of tries. I was stuck at the rules thing (combobox case).
    I tried to click on 'Define actions' and put in the formula that way, but that is not necessary. These are the steps that I followed:
    1) Add the rule
    2) Define the condition
    3) Exit the rule screen
    4) Add the formula given by Rathanavel to the Items property of the combobox (replacing the name of your just created rule)

    If you go back to your rules you will notice that PowerApps itself put the actions there.

    Thanks Rathanavel for this solution.

    ReplyDelete

Post a Comment

Enter your comments..

Popular posts from this blog

Secure When a HTTP request is received Power Automate a.k.a MS Flow

Image
Secure "When a HTTP request is received" connector in MS Flow This connector can act as the Incoming webhook and perform underling business functionality but its very important to protect it to receive payload from unknown audience. lets see the steps to secure this incoming request. Add `when a HTTP request is received as a trigger condition` Provide the required payload a per the needs (optional). change method to POST if you need to use the payload (optional) relativePath: add /{token} (required) Click the ... dots and select "settings" @equals(triggerOutputs()['relativePathParameters']['token'],'YOUR-SECRET-PASSWORD') That's it. your business logic continues... I have added the received 'token' and 'firstName' from my payload for testing. Call the webhook from postman. Replace /{token} from the URL with your secret password. Enter the required payload and click send. Notice : S
Read more

Upload attachment to SharePoint list item using Microsoft Flow

Image
Microsoft Flow is one of the Microsoft offerings for automation. In this series will see how to upload a file to SharePoint ListItem using MSFlow Workflow for our scenario Login to Microsoft Flow site  and log in to create a new flow. Add action and Type 'Data Operations' connector. Then choose 'Data operations - Compose' action Select 'Expression' tab and enter the following to create 'ListName' variable Repeat this process for all other variables  ListName - SharePoint list name. ItemID     - SPList item ID. AttachmentContent - Actual attachment content. FileName - Attchment name. Expressions: we can read values from Query String will discuss how to pass them next article. ListName: trigger() [ 'outputs' ][ 'queries' ][ 'listname' ] ItemID: trigger() [ 'outputs' ][ 'queries' ][ 'itemid' ] At
Read more

Modern page provisioning using page template

Image
In this article let's see how to dynamically provision a modern page based on a modern page template and update its webpart properties using pnp/js in SPFx React webpart. Create a modern page template Create a page and add the webpart as per your requirements, finally save it as a template. it will be stored under the  "Templates" folder in SitePages. In the below example I have as Section=>3 Colum layout=>3 webparts. Create a page provision form component public   render ():  React . ReactElement < IDynamicPageCreaterProps > {      let   thisHandler  =  this ;      return  (        < div >          < h1 > { this . props . webpartName } </ h1 >           {           ( this . props . selectedTemplate  !=  undefined ) ?              < h4 >< i > Selected Template-  { this . props . selectedTemplate . text } </ i ></ h4 >  :              < h4 > Selcte Template in webapart property </ h4 >          }      
Read more

REST call returns XML instead of JSON in SharePoint

Image
Hi All, enforce REST call to return JSON format instead of #document(XML). $.ajax({         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser",         type: "GET",         contentType : "application/json",         headers: { "Accept": "application/json; odata=verbose" },             success: function (data) {                     console.log(data);             custUser = data.d;         },         error: function (error) {             alert(JSON.stringify(error));         }     }); we would get the problematic output like below: add the these lines in "beforeSend" method $.ajax({         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser",         type: "GET",         contentType : "application/json",         headers: { "Accept": "application/json; odata=verbose" },         beforeSend: function (XMLHttpRequest) {  
Read more

HTML field & Date Time formatting in powerapps

Image
Hi All, When i dig around powerapps found an interesting control called HTML field. the potential of this control is enormous based on the scenario lets see couple of examples. 1. Formatting Datetime Go to insert -> Text=>HTML Text Insert the control in the list view Add the below in the formula box Concatenate(" < div style = 'height:100%;width:100%;padding:1px;background-color: #418bca;border-right: 1px solid #fff;float:left;' > < div style = 'position: relative;text-align: center;color: #fff;font-size:20px;padding:0px 3px;' > ",Text(DateTimeValue(Text(Modified)),"dd")," < h4 style = 'margin: 5px 0 0 0;color: #fff;text-align: center;' > ",Upper(Text(DateTimeValue(Text(Modified)),"mmm-yy"))," </ h4 > </ div > ") i.e. Concatenate(" < html > ",Text(DateTimeValue(Text(Modified)),"dd")," < html > ")  Output Note :
Read more

Step-By-Step Azure AD App Registration

Image
Enterprise developers and software-as-a-service (SaaS) providers can develop commercial cloud services or line-of-business applications, that can be integrated with Azure Active Directory (Azure AD) to provide secure sign-in and authorization for their services. To integrate an application or service with Azure AD, a developer must first register the application with Azure AD. Any application that wants to use the capabilities of Azure AD must first be registered in an Azure AD tenant. This registration process involves giving Azure AD details about your application, such as the URL where it’s located, the URL to send replies after a user is authenticated, the URI that identifies the app, and so on.  In the upcoming series of articles will see different 'grant_type' and which one to use for what scenario? how to use in Daemon-Headless-App calling secure WebAPI - client_credentials/password_credentials how to use in Windows-Forms-App calling secure WebAPI - code_credentia
Read more

Approval and auto escalation with time out in Microsoft Flow

Image
Let's see how to create an Approval workflow with timeout and escalation. I have used Office 365 Custom List "item created or modified" as my trigger. Create "Supervisor Approval" Create "Escalation Approval" Specify duration in ISO 8601 format. refer here for more time-out formatting. "Escalation Approval" would trigger only after the "Supervisor Approval timeout" Final Flow -Ratsub
Read more

Create and configure custom connectors for PowerApps and MSFlow from AzureFunctions

Image
I have already discussed How to Create, Configure and Deploy AzureFunction using VisualStudio  and how to create swagger(OpenApi) endpoint for AzureFunctions .  So, In this article will see how to import and use them in PowerApps & MSFlow .  Upon completion of yaml  definition creation, Click->Export to PowerApps + Flow button or copy the API definition URL. Alternatively you can also download  ApiDef.json file. Go to  https://web.powerapps.com  and authenticate then select 'Custom Connectors' from the left navigation. Then Click Create custom connector->Import an OpenApi from URL as mentioed below. Enter function secret code which we copied earlier, Then name the connector and click Contiue. Now, Fill values in each wizard General -> Upload/configure connector icon. Security -> In my scenario I used 'Function' scope access. configure it as appropriate. Definition ->  Ensure you have the proper parameter
Read more

Developing custom reusable components in PowerApps

Image
I am very excited to see the latest PowerApps Experimental preview feature  for canvas based PowerApps development & its capabilities. It provides you with the ability to increase your productivity and re-use the same component on all available layouts.  Design & develop it once reuse the component across layouts within PowerApps. How to enable the experimental feature in PowerApps? Step1 - Go to File->App Settings. Step2 - Select Advanced Settings-> Experimental feature->Enable Components The above feature is not listed; then possibly your are not created developer preview environment. Follow these official MSDN instructions . Also, it's important to understand the  Preview & Experimental feature . Create Carousel reusable component in PowerApps Step 1- Click add "New component. Step 2- Add all necessary controls             -> Image control.             -> Label control to show text.             -> Timer to switch slides.
Read more