How to build a Custom People Picker in Power Apps

In Power Apps - Canvas App, we came across the specific requirement to have a custom people picker where user can search employees by its name and associated email-id should be displayed in the drop-down.

We know, Power Apps doesn’t provide any OOTB people picker without Form control. That’s why we need to build a custom people picker in our App. So, let start creating the custom people picker in Power Apps.

A. Create Custom People Picker:

Please follow the below steps to create our own custom people picker with the suggestion box.

1. Add Data Source. To add the data source, Go to the View menu and then select Data Sources option.
   


2. Click on “Office 365 Users” for adding the Data Source.
                        


3.  Now, add  “List Box” and “Text Input” Control.
• To add List Box click on “Insert” then on “Controls” -> “ListBox”
  


• To add Text Box click on “Insert” then in “Text” select “Text Input”.
  
4. Select the Textbox control which we have added in Step 3 and configure the following properties.
• Text Box
• Default: SelectedUserEMail
• OnSelect: Set(UsersListBox,true)

• List Box
• Items: If(!IsBlank(TextInput2.Text), Office365Users.SearchUser({searchTerm:TextInput2}).Mail)
• Visible: UsersListBox
• OnSelect: Set(SelectedUserEmail, ListBox1.SelectedText.Value); Set(UsersListBox,false);Reset(TextInput2)

Now, let’s test our custom people picker!

• Search for the Employee name in textbox of Custom people picker.
• It will show the email-id property of that user in the suggestion box. Currently, we have displayed only “Email Property” in the combo box. However, we can show the other Office 365 properties as well.

If you have any questions you can reach out our SharePoint Consulting team here.