02.08.2021

Working with People Picker in Power Apps for SharePoint

Learn how to master People Picker columns in SharePoint from the Power Apps canvas app. In this blog post, you will find detailed step-by-step instructions on creating, updating, and clearing People Picker columns for single and multi-user setups in SharePoint.
SHARE THIS BLOG:
Overview

While working with Power Apps, you must take care of some nuisances with people picker columns. In this post, we will be showing you how to add, update and clear those columns using patch commands from PowerApps.

While researching this topic myself, I found so many contradictory answers and still did not solve my problem. The approach I have taken below requires us to turn on one experimental feature, and I have repeatedly applied this solution to multiple apps in different tenants.

Steps to Create SharePoint List
We will create a SharePoint List with two People Picker columns in it, one with a single user and the other with multiple users. Follow the steps below to create the two columns:
  1. We are having a list named "PeoplePickerList" with the default column of "Title."

     2. Click on "+ Add column" then select "Person."

2_Add-Person-Column

     3. A window will slide from the left side of the screen, asking for information about the "Person" column. We will give the name "SinglePerson" and then click on the "Save" button at the bottom.

     4. We will create another column. So click on the "+ Add column" button the same way as in step 2 and then select "Person" from the dropdown. This time we will give the name of the column as "MultiplePerson." We need to change some settings as well, so click on "More option" and then toggle the "Allow multiple selections" to "Yes." Click on the "Save" button to add the column to the list.

     5. Our list looks like this after performing the above steps.

     6. We can enter only one user in the "SinglePerson" column and more than one user in "MultiplePerson" as shown below:

Steps to create the PowerApps.

We will create an application in PowerApps platform. You can read more about PowerApps here.

Follow the following steps to create the Power App:

     1. We will navigate to https://make.powerapps.com. We will then click on "+ Create" option from left hamburger menu.

PowerApps-Create-App

     2. Click on the "Canvas app from blank" option.

Create-Blank-Canvas-App

     3. A dialogue box will appear asking for the name of App and the Format of the app. We have given the title "PeoplePickerApp" and Format as "Tablet." Click on "Create" to create the app.

App-Name-PeoplePickerApp

     4. We will come to the homepage of PowerApps Designer

Blank-app-screen

     5. Before proceeding further, we need to switch on one Experimental feature, i.e., "Formula-level error management."

     6. Click on "Settings" in the ribbon menu.

opening-settings-in-powerapps

     7. Now, a popup window will open. In this, click on "Upcoming Features" then on "Experimental Features." Now we will turn on the "Formula-level error management" feature. Close the popup window by clicking on "x" on the top right corner of the popup window.

Turning-on-Formula-Level-Error-Management

     8. Click on the "Screen1" in the "Tree view" pane.

Select-Screen1

     9. Click on the dropdown menu left side of "fx," i.e., formula bar. Select the "OnVisible" property.

Onvisible-Property

     10. In the formula bar, we will define two variables. These will be used to empty the people picker column. Two variables are required as the two columns with Single, and Multiple entries are different and require a different kinds of variables to work with.

Defining-Variables

Below is the formula written in the formula bar:

Set(

    BlankMultiplePeople,

    Table(

        {

            Claims: Blank(),

            DisplayName: Blank(),

            Email: Blank(),

            Department: Blank(),

            Picture: Blank(),

            JobTitle: Blank()

        }

    )

);

Set(BlankSinglePerson,{

            Claims: Blank(),

            DisplayName: Blank(),

            Email: Blank(),

            Department: Blank(),

            Picture: Blank(),

            JobTitle: Blank()

        }

);

Note: Remember when you are writing in the formula bar, your selected property should be "OnVisible"

Onvisible-Property

     11. We will add six buttons with different functionality for each of them. Click on "Insert" in the menu bar. Then click on "Button" to add it to the app. We will be adding six buttons.

App-Screen-after-adding-buttons

We will change the display name of these buttons according to their functionality.

     12. Select any of the buttons, click on the Property dropdown, which is on the left side of the formula bar, and select "Text" property.

Text-Property-button

     13. Change the text from "Button" to "Create Single Person."

Changing-Text-Property-of-button

     14. Alternatively, we can also change the button's display text from the property pane of the button that is visible when we click any of the buttons.

Changing-text-property-button

     15. In the same way, change the text of the rest of the buttons as follows:

  • Create Multiple Person
  • Update Single Person
  • Update Multiple Person
  • Clear Single Person
  • Clear Multiple Person

     16. In the same way, we will change the name of buttons in the Tree View , for our best understandings.

Renamed-Buttons-in-tree-view

     17. In the same way, we will change the name of buttons in the Tree View, for our best understanding.

Rearranging-buttons-layout
Connect SharePoint list With PowerApps

     1. Click on the "Data" icon in the left navigation pane.

data source icon on tree view

     2. Click on "Add data" and select "SharePoint" in the list.

Add-data-source

     3. We will select our connection, and a new menu will slide in from the right side of the screen, asking us for the SharePoint site that we want to connect to.

We will select our SharePoint site.

Connect-sharepoint-site

     4. We will select our list from the options given and click on "Connect."

connect-sharepont-list

     5. We can see our List got connected as it is listed under the data section in the tree view on the left side.

Added-SharePoint-List
Create Single Person

     1. Click on "Create Single Person" and select the "OnSelect" property from the property dropdown on the left side of the formula bar.

onselect-Property-Buttons

     2. We will use the "Patch" function in the formula bar to create an item in SharePoint List.

We have made error handling here, which checks for any errors that might occur while creating, updating, or deleting an item from the list. We have used Notify function here, which will run after the "Patch" function ran successfully and display a green ribbon, and if there are any errors, it will show a red ribbon with the error text displayed on it.

To study more about the Power Apps function, click here.

 

The formula is as below:

Patch(PeoplePickerList,
{
Title:"Single Person Entry",
SinglePerson:{
Claims: "User1@jarial98.onmicrosoft.com",
DisplayName: "User1",
Email: "User1@jarial98.onmicrosoft.com",
Department: Blank(),
Picture: Blank(),
JobTitle: Blank()
}
}
);
If(
// check if there were any errors when the item was created
!IsEmpty(Errors('PeoplePickerList')),

Notify(
"Failed to update List",
NotificationType.Error
),

Notify("Successfully Created",NotificationType.Success);
)

     3. Now, to test this function, we will run this app and click on "Create Single Person."

On the top right corner, we have the button to run the app.

Play-canvas-app

Click on the play button. And click on the "Create Single Person" button.

     4. After clicking, we get a "Successfully Created" notification.

Sucess-Notification-after-Adding-Single-Person

     5. We will navigate to our SharePoint list, and we can see the entry created there.

list-view-after-adding-single-person
Create Multiple Person
  1. In this section, we will populate the multiple person column in our SharePoint List.
  2. Click on "Create Multiple Person" and select the "OnSelect" property from the property dropdown on the left side of the formula bar.
  3. We will again use the patch function to create an item in SharePoint List.
Onselect-code-for-adding-multiple-person

The functions in formula bar is as follows:

Patch(PeoplePickerList,{
Title:"Multiple Person Entry",
MultiplePerson:Table({
Claims: "User1@jarial98.onmicrosoft.com",
DisplayName: "User1",
Email: "User1@jarial98.onmicrosoft.com",
Department: Blank(),
Picture: Blank(),
JobTitle: Blank()
},{
Claims: "User2@jarial98.onmicrosoft.com",
DisplayName: "User2",
Email: "User2@jarial98.onmicrosoft.com",
Department: Blank(),
Picture: Blank(),
JobTitle: Blank()
})
}
);
If(
// check if there were any errors when the item was created
!IsEmpty(Errors('PeoplePickerList')),
Notify(
"Failed to update List",
NotificationType.Error
),
Notify("Successfully Created Multiple Persons",NotificationType.Success);
)

    4. We will click on play and then click on the "Create Multiple Person" button

Sucess-Notification-After-Adding-multiple-person

    5. We will navigate to our SharePoint List, and we can see the new item created here.

List-View-adding-multiple-person
Update Single User Column
  1. In this section, we will update the single person column with a new value in our SharePoint List.
  2. Click on "Update Single Person" and select "OnSelect" property from the property dropdown on the left side of the formula bar.
  3. We will again use the patch function to update an item in SharePoint List. This time we require the "ID" of the item to filter it for updating.
  4. We will change the view and add "ID" in the SharePoint List view.
Adding-ID-in-SharePoint-List-view

     5. In the PowerApps in the formula bar for the "OnSelect" property of the "Update Single Person" button, write the following functions:

Onselect-code-for-editing-single-person-

Here we are using the LookUp function to filter from the SharePoint List. We will change the previous value of "User1" to "User2".

Patch( PeoplePickerList, LookUp(PeoplePickerList,ID=1),
{
Title:"Single Person Entry",
SinglePerson:{
Claims: "User2@jarial98.onmicrosoft.com",
DisplayName: "User2",
Email: "User2@jarial98.onmicrosoft.com",
Department: Blank(),
Picture: Blank(),
JobTitle: Blank()
}
}
);
If(
// check if there were any errors when the item was created
!IsEmpty(Errors('PeoplePickerList')),

Notify(
"Failed to update List",
NotificationType.Error
),

Notify("Successfully Updated Single Person",NotificationType.Success);
)

     6. Click on the Play button and then click on "Update Single Person."

Sucess-notification-after-editing-single-person-

We get a successful notification.

     7. We will navigate to our SharePoint List, and we can see that the Item with ID "1" changed to user2.

List-view-after-editing-single-person-
Updating Multiple Person Column
  1. In this section, we will update the multiple person column with a new value in our SharePoint List.
  2. Click on "Update Multiple Person" and select the "OnSelect" property from the property dropdown on the left side of the formula bar.
  3. We will again use the patch function to update an item in SharePoint List. We require the "ID" of the item to filter it for updating.
Onselect-Code-for-editing-multiple-person

Functions are written in the formula bar as follows:

Patch( PeoplePickerList, LookUp(PeoplePickerList,ID=2) ,{

MultiplePerson:Table({
Claims: "User2@jarial98.onmicrosoft.com",
DisplayName: "User2",
Email: "User2@jarial98.onmicrosoft.com",
Department: Blank(),
Picture: Blank(),
JobTitle: Blank()
},{
Claims: "ankur@jarial98.onmicrosoft.com",
DisplayName: "Ankur Jarial",
Email: "ankur@jarial98.onmicrosoft.com",
Department: Blank(),
Picture: Blank(),
JobTitle: Blank()
})
}
);
If(
// check if there were any errors when the item was created
!IsEmpty(Errors('PeoplePickerList')),
Notify(
"Failed to update List",
NotificationType.Error
),

Notify("Successfully Updated Multiple Persons",NotificationType.Success);
)

     4. Click on the Play button and then click on "Update Multiple Person."

Success-Notification-after-editing-multiple-person-

     5. We will navigate to our SharePoint List, and we can see that the "MultiplePerson" column of the item with ID "2" has been updated.

List-View-after-editing-multiple-person
Clearing the Single Person Column
  1. In this section, we will update the item's value with an empty value and try to clear the previously recorded value in the Single Person Column.
  2. Click on "Clear Single Person" and select "OnSelect" property from the property dropdown on the left side of the formula bar.
  3. We will again use the patch function to update an item in SharePoint List. We require the "ID" of the item to filter it for updating.
  4. We will use the variable "BlankSinglePerson" that we created previously.
Onselect-code-for-clearing-single-person

The functions in the formula bar are as follows:

Patch( PeoplePickerList, LookUp(PeoplePickerList,ID=1 ),
{
SinglePerson:BlankSinglePerson
}
);
If(
// check if there were any errors when the item was created
!IsEmpty(Errors('PeoplePickerList')),

Notify(
"Failed to update List",
NotificationType.Error
),

Notify("Successfully Cleared Single Person",NotificationType.Success);
)

     5. Click on the Play button and then click on "Clear Single Person."

Success-notification-after-clearing-single-person

     6. We will navigate to our SharePoint list, and we can see the "SinglePerson" column of the item with ID "1" is blank.

Onselect-code-for-clearing-single-person
Clearing Multiple Person Column
  1. In this section, we will update the value of an item with an empty value and try to clear the previously recorded value in the Multiple Person Column.
  2. Click on "Clear Multiple Person" and select "OnSelect" property from the property dropdown on the left side of the formula bar.
  3. We will again use the patch function to update an item in SharePoint List. We require the "ID" of the item to filter it for updating.
  4. We will use the variable "BlankMultiplePeople" that we created previously.
Onselect-Code-for-clearing-multiple-person

The functions in the formula bar are as follows:

Patch( PeoplePickerList, LookUp(PeoplePickerList,ID=2),
{
MultiplePerson:BlankMultiplePeople
}
);
If(
// check if there were any errors when the item was created
!IsEmpty(Errors('PeoplePickerList')),

Notify(
"Failed to update List",
NotificationType.Error
),

Notify("Successfully Cleared Multiple Person",NotificationType.Success);
)

     5. Click on the Play button and then click on the "Clear Multiple Person" button.

Success-notification-after-clearing-multiple-person

     6. We will navigate to our SharePoint List, and we can see that the "MultiplePerson" column of the item with ID "2" is empty.

Conclusion

In this blog, we saw how we could Create, Update and Clear an entry in People Picker Columns in SharePoint List from a Power App canvas application. If you have any questions or concerns, please reach out to us. We will be more than happy to help.

Written By
Ankur jarial
M365 DEVELOPER
peer reviewed By
JAsjit Chopra
chief executive officer
Graphics designed By
sanika sanaye
Creative Design Director
Recommended Content

Email Insights

Get the latest updates from Penthara right in your mail box.
Sign Up

LinkedIn Newsletter

Monthly updates, news & events from Microsoft to help  your business grow.
Subscribe To Newsletter