Create People Picker in PowerApps with Combo Box

In this Power Apps Tutorial, We will discuss how to create People Picker in PowerApps or how to use a person field in PowerApps using a Combo Box.

Also, We will see some Person field properties like allow multiple selections, allow searching.

We will discuss how to assign a Default Person Value, how to create Power Apps Collection using People Picker, and use the Gallery Control to store People Picker Value in Power apps.

We will see how to show only the Display Name, Show Display Name with Job Title in the People Picker Field and remove the Picture From People Picker Field.

Create People Picker in PowerApps using Combo Box

Normally, When we are working in the Powerapps, We are using the apps by connecting the SharePoint Data Source.

If we want to display a Person field from the SharePoint list, then we are adding a people picker column in the list, and using that column in our Powerapps form, gallery control, etc.

But here in this Powerapps tutorial, We will discuss the people picker control in powerapps without using any SharePoint Data source. We will do this by using Office365 Users Data source.

To create the PowerApps Person field, We need to follow these below steps:

Step-1:

Open the PowerApps page through the Browser. Sign in your Power Apps using Microsoft account.

In the Power Apps page, Select + New app -> Canvas as shown below.

Step-2:

Choose Tablet layout under the Blank app section. Then a Powerapps page (with tablet layout) will appear with the new blank screen.

Step-3:

From the Powerapps screen, click on Connect to data link from the middle part of the page. Connect a new or existing Data source as Office365 Users (Expand the Connectors -> Search Office 365 Users) like the below screenshot.

Step-4:

Now insert a Combo box in the Powerapps screen. Go to Insert tab -> Input -> Combo box.

In the below screenshot, you can see a combo box is added into the Powerapps screen.

By chance, if you forgot to add the Data source connection (Office365 Users) previously, then no need to hurry. Also, you can add to that connection here.

Step-5:

To view all the Office 365 users in the Powerapps Combo box, you need to apply the below formula on its Items Properties as:

Items = Office365Users.SearchUser({searchTerm:ComboBox1.SearchText,top:10})

Where,

• SearchUser = It helps to retrieve search results of user profiles.
• searchTerm:ComboBox1.searchtext = This defines to search the text inside the combo box. That means you need to search the name of any user in the combo box.
• top:10 = When you will search the first letter of any user, it will help you to show the first or top 10 user names that come under that first letter.

Suppose, you are searching any name whose first alphabet is “B”, then it will display only the top 10 user names that come under the “B”.

You can refer the below screenshot.

Step-6:

When you will preview the People picker app, then you will not view anything. The screen will appear as the below screenshot. Why does it look like? Just follow the below thing.

The above screen appeared because you did not set the Fields properties of the Combo Box.

Select the Combo box -> Go to Properties pane -> Click on Edit from the Fields section -> Select the Layout as Person -> Select the Primary text as DisplayName -> Select the Secondary text as Mail -> Select the SearchField as DisplayName as shown below.

Now again Preview the app and click on the drop-down of the combo box. You can see and select any of the Office365 users from that drop-down.

Allow Multiple Selections

Suppose in the Powerapps combo box, you want to select more than one Office365 user, then you need to enable the multiple selections option.

Select the Combo box -> go to the Properties pane -> Enable the “Allow multiple selections” option as shown below.

Just preview the app and then you can select one or multiple users at a time in the combo box.

Allow Searching

You may know, Searching is the best option rather than the drop-down to find out any user. It is very easy to search for and time-saving thing.

If you want to search any user name inside a search text box, then you need to enable the searching option.

Select the Combo box -> go to the Properties pane -> Enable the “Allow searching” option as shown below.

Just preview the app and then you can see a search text box will appear where you can search any user name as shown below.

Assigning a Default Person Value

Suppose in the Combo box, you want to display or you want to assign any default person value.

That means, Every time when you will open the app, you can see any default person value (maybe either you want to see the Current user name or your Manager name).

Assign Current User Name

To assign the Current User Name in the Combo Box, you need to apply the below formula on its DefaultSelectedItems property as:

DefaultSelectedItems = Office365Users.SearchUser({searchTerm:User().Email})

Where,

User() = It helps to retrieve a specific user profile.

Once you applied the formula, you can see the Current User Name in the combo box as like the below screenshot.

Assign Manager Name

Similarly to assign the Manager Name in the Combo Box, you need to apply the below formula on its DefaultSelectedItems property as:

DefaultSelectedItems = Office365Users.Manager(user().Email)

Where,

Manager = It helps to retrieve the user profiles for the manager of the specified user.

Once you applied the formula, you can see your Manager Name in the combo box as like the below screenshot.

Create Power Apps Collection using People Picker

Powerapps Collection helps to store the data in the Powerapps memory. Suppose, you want to store all the users’ information inside the Powerapps memory, then you can use the Powerapps collection.

If you are interested to know more details about the Powerapps Collection, then refer these below links:

• How to create and use PowerApps Collection
• PowerApps Collection: Add, Update, Remove and Filter items

To create a Powerapps Collection by using the People picker field, follow these below steps:

Step-1:

Select the Combo box and apply the below formula on its OnChange property as:

OnChange = Collect(collectUsers, {Name: ComboBox1.Selected.DisplayName, Email: ComboBox1.Selected.Mail, JobTitle: ComboBox1.Selected.JobTitle})

Where,

• Collect = It is the function name that creates the Powerapps collection.
• collectUsers = It is the Collection name.
• Name: ComboBox1.Selected.DisplayName and so on = These are the fields that will store inside the Powerapps Collection.

Once you applied the formula, just preview and run the app. Run the app in sense you need to select some user names from the combo box.

Step-2:

Go to View tab -> Click on Collections.

Step-3:

Click on your Powerapps Collection name (collectUsers) and then you can see that user information which you have selected at the run time.

Use Gallery Control to display the People Picker Value

Now we will use a Powerapps Gallery Control to display all the user information on the Powerapps screen.

Go to Insert -> Click on Gallery -> Select Vertical layout as shown below.

You can see a vertical blank gallery will appear on the screen. Just select the Data source as Collection name (collectUsers) that you have created recently.

Now you can see all the user information that is present inside the Powerapps Collection.

Also, you can change the Layout as “Title, subtitle, and body” and select the desired fields from the Edit section as below.

Preview the app and then you can see your user information with a proper format (Title, subtitle, and body).

Remove Users from Power Apps Collection

Suppose you want to remove any user from the Powerapps Collection, then select one of the users and add a Trash icon (Insert -> Icons -> Trash) in the vertical gallery.

Select the Trash icon and apply the below formula on its OnSelect property as:

OnSelect = Remove(collectUsers,ThisItem)

Preview the app and delete one of the user from the vertical gallery as shown below.

Now go to the Powerapps Collection (collectUsers). In that specific collection, you can see that a specific user has been deleted (that you removed from the preview section) as the below screenshot.

Show only the Display Name in People Picker Field

I have a SharePoint List and it has a Person field Data type column named “Employee Name“.

When you will add this Person field (Employee Name) in the Powerapps form, then it will display all the user names (with a Dropdown combo box) that are present in the Organization.

Suppose, you want to see only the Display Name at the time of searching the user from the Person combo box Dropdown. Then you need to do these below things:

• Select the Person field Data Card (Employee Name) and go to the Properties tab.
• Click on Edit from the Fields section.
• The Powerapps Dropdown control has three different types of layouts as “Single”, “Double”, “Person”. The Person layout is used for the Person field.
• To display the single value in the Person Dropdown control, We will select as Single layout as shown below.

• Make sure to provide the Primary Text and Secondary Text value as “DisplayName“.
• Now Save and Publish the Form.

• If you will preview the app (F5) and search any user name from the Dropdown, then you can see only the Display Name of that specific user as the below screenshot.

Show Display Name with Job Title in People Picker Field

Similarly, if you want to see the Display Name including the Job Title at the time of searching user from the Person combo box Dropdown. Then you need to do these below things:

• Select the Person field Data Card (Employee Name) and go to the Properties tab.
• Click on Edit from the Fields section.
• Make the Layout as a Person layout.
• Select the Primary text as “DisplayName” and Secondary text as “JobTitle” as shown below.

• Go to the Advanced tab in the right-side panel.
• In the DisplayFields text box, Add the Text value as [“DisplayName”,”JobTitle”].
• Now Save and Publish the Form.

• If you will preview the app (F5) and search any user name from the person field Dropdown, then you can see the User Display Name with their Job Title as the below screenshot.

Remove Picture From People Picker Field

Suppose, you don’t want to display the Profile picture of a user in the Person field Dropdown combo box, then you need to remove the picture from the Person field.

In the below screenshot, you can see a picture is appearing while searching the user name in the search box.

Follow these below things to remove the profile picture from the Person Dropdown control:

• Select the Person field Data Card (Employee Name) and go to the Advanced tab in the right-side panel.
• From the DisplayFields text box, remove “Picture” as shown below.
• Save and Publish the Form.

• If you will preview the app (F5) and search any user name from the person field Dropdown, then you can see the User Display Name with the specific Email of that user (As in the DisplayFields, only Display Name and Email is there).

Also, you may like these below Powerapps tutorials:

• How to create PowerApps collection from Excel
• Create Collection from SharePoint List in PowerApps
• How to format number as currency in PowerApps
• Various PowerApps Validation Examples
• PowerApps charts (Column, Line and Pie Chart)
• How to use List Screen in PowerApps
• How to display images from a SharePoint Online library in PowerApps
• How to Create PowerApps GridView
• How to use PowerApps notify function

In this Power Apps Tutorial, We discussed how to create People Picker or how to use a person field in Power Apps using a Combo Box. Also, We saw some Person field properties like allow multiple selections, allow searching.

We discussed how to assign a Default Person Value, how to create Power Apps Collection using People Picker, and use the Gallery Control to store People Picker Value in Power apps.

We saw how to show only the Display Name, Show Display Name with Job Title in the People Picker Field and remove the Picture From People Picker Field.