Custom Client Side People Picker in SharePoint using jQuery

Hello friends, in this tutorial we will develop a custom client side people picker control in SharePoint. It is applicable for SharePoint 2013, 2016 and SharePoint Online.

In the first section, we will save the people picker value in SharePoint list (people picker field) using REST API.

In the second section we will see, how to get the value of people picker field from SharePoint list and set to our custom people picker field, as shown below:

Section 1: Create custom people picker field and save its value in SharePoint list.

Step 1: Create a list named EmpDetails. Create a person or group field named EmployeeName. We are going to save of custom field value in this list field.

Step 2: Create a webpart page and add content editor webpart

Step 3: Add below code and we are ready with our custom field.

Download below code: Download link

Step 4: Our custom people picker field will look like as below:

Custom people picker field

Step 5: When we search for any name and click on button, it will populate that users details and also save the value in our custom list field which we created in step 1. See below screenshots:

Custom people picker field in sharepoint
Custom people picker field in SharePoint
Custom people picker field in SharePoint
Custom people picker field in SharePoint

Section 2: Get person field value from SharePoint list and set the value to custom people picker field.

Step 1: We have a list named EmpDetails with person or group field as EmployeeName.

Step 2: We will fetch the value for an item with ID=1 and set its value to our custom people picker field.

Step 3: Create a webpart page and add content editor webpart.

Step 4: Add below code in content editor webpart.

Note: I have passed hard-coded URL with item ID 1. I will recommend you to edit the logic accordingly to pass the ID dynamically using text field.

Download below code: Download link

Step 5: When we click on a given button, it will call a REST API to fetch the value of person field of list item of ID 1 and set its value to out custom people picker field. We can use this scenario when we need to fetch person fields in our custom edit form.

I hope you liked this article. If you have any queries, please use below comments section for the same. Please like our facebook page and subscribe to our newsletter for future updates. Have a nice day! tada…

Leave a Reply