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.

powerapps people picker using combo box

Step-2:

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

power apps people picker using combo box

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.

powerapps person field using combobox

Step-4:

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

power apps person field using combobox

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.

powerapps person field using combo box

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.

powerapps person field using a combo box

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.

power apps person field using a combo box

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.

power apps person field using combo box

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.

power apps person field using a combobox

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.

powerapps people picker

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

power apps people picker

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.

people picker in powerapps

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.

people picker in power apps

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.

create People picker in Power apps

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 People picker in Powerapps

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:

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.

create Collection in powerapps person field

Step-2:

Go to View tab -> Click on Collections.

create Collection in power apps person field

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.

create Collection using power apps person field

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.

powerapps person field

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.

power apps person field

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

person field in powerapps

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

person field in power apps

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

person field using power apps

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.

person field using powerapps

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

OnSelect = Remove(collectUsers,ThisItem)
person field using powerapps gallery

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

person field using power apps gallery

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.

person field using power apps gallery control

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.
show the display name in people picker powerapps
  • Make sure to provide the Primary Text and Secondary Text value as “DisplayName“.
  • Now Save and Publish the Form.
show the display name in people picker power apps
  • 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 the display name in  power apps people picker

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.
show display name with job title in powerapps people picker
  • 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.
show display name with job title in power apps people picker
  • 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.
show display name with job title in power apps people picker field

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.

Remove Picture From People Picker Field in powerapps

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.
Remove Picture From People Picker Field in power apps
  • 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).
Remove Picture From People Picker in power apps

Also, you may like these below Powerapps tutorials:

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.

  • Very well done blog! I just wanted to note that as soon as you add a filter to the combo box items formula, it doesn’t work.
    Filter(Office365Users.SearchUser({searchTerm:ComboBox1.SearchText,top:10}), Upper(CompanyName) = “MYCOMPANY”)

  • >