Tricks To Customize The People Picker Column Using PowerApps

A user from SharePoint Stack Exchange raised the question on how to make the person columns autocomplete to dropdown layout in SharePoint Online. It seems interesting to me, so I have done some research and found some things, which I want to share with everyone.
 
In a modern view, Person column from SharePoint online has a autocomplete option. This helps us to search and select the user in no time. This autocomplete shows the User’s Picture, Name and Job Title / Email by default. Sometimes it shows some other values of users.
 
OOTB didn’t gave us a way to modify the person column and its autocomplete feature. Due to that, we can make use of PowerApps to customize the Person column look and feel.
 
In a New Form or Edit Form of the modern SharePoint List Item, click the Customize with Power Apps button from the top. This will navigate us to PowerApps and will take some time to prepare the form for us to customize.
 
Once the form is ready, we can do many things with PowerApps. Here I’ll show how to customize the autocomplete feature for Person column with a few examples.
 

Remove Picture from Autocomplete

 
To remove the profile picture from the autocomplete in the Person’s box, the following steps will help you to achieve that.
  • Select the Person column’s Dropdown menu. Then click on Advanced tab in right side panel.
  • Remove ,“Picture” from DisplayFields textbox.
Tricks To Customize The People Picker Column Using PowerApps
  • Then from the menu, Click File and Save to publish the form.
  • After the publish, we will get the below output. The autocomplete shows Display Name and Email of the user.
Tricks To Customize The People Picker Column Using PowerApps
 

Show Display Name with Job Title in AutoComplete

 
Sometimes, people want to see other values below the user’s display name. I have an example here to show the JobTitle below the DisplayName.
  • Select the Person column’s Dropdown menu. Then click on Advanced tab in right side panel.
  • Add the text ["DisplayName","JobTitle"] in the DisplayFields textbox.
  • Then from the menu, Click File and Save to publish the form.
  • After the publish, we will get the below output. The autocomplete shows Display Name and Job title of the user. 
Tricks To Customize The People Picker Column Using PowerApps
 

Show Display Name alone in Autocomplete

 
The Dropdown control in PowerApps has three different types of layouts. Single, Double and Person. The Person layout will be used for Person Column. To show single value in the dropdown choice, we can make use of Single Layout.
 
Tricks To Customize The People Picker Column Using PowerApps
 
The below example uses this Single Layout choice and display only single text for each option for Person column.
  • Select the Person column’s Dropdown menu. Then click on Edit link in Fields under Properties in right side panel.
  • Then select Single Layout instead of choosing Person Layout.
Tricks To Customize The People Picker Column Using PowerApps
  • Ensure Primary Text is DisplayName and SearchField is DisplayName
  • Then from the menu, Click File and Save to publish the form.
  • After the publish, we will get the below output. The autocomplete shows Display Name alone in the autocomplete dropdown.
Tricks To Customize The People Picker Column Using PowerApps
 
The PowerApps is a very powerful tool for customizing the SharePoint Forms and there are lot of things hidden within. So, exploring the PowerApps can bring lot of its powerful features on the outside. Start exploring this tool from Power Platform and I’ll come up with more interesting hints in upcoming articles.