SharePoint Online: Create your own Client People Picker using JavaScript

SharePoint-logo

In this article, I will show you How to create a Client People Picker using JavaScript.

*Requirements: SharePoint Site with permission to Run Custom Script, SharePoint Designer

The Client People Picker provide you the ability to select a list of people from your SharePoint Internal Network. Unlike a normal text box where you have to type in names or emails without knowing if the names you entered were correct, the Client People Picker will suggest you to complete the input.

1

When you type in names, it will automatically suggest completion

That is the power of this Client People Picker!!! Now, let’s start building one in our SharePoint.

Step 1 – Decide a page where you want to put this feature in (usually you may want to put this in your item display page). Open SharePoint Designer, go to the target List → Forms → displayif.aspx  (this form may vary base on your choice. If you want to add to a view, then go to View → YourChoiceOfView).

2

Step 2 – Search for <asp:Content ContentPalceHolderId=”PlaceHolderMain” runat=”server”>. Add the following code block below:

<SharePoint:ScriptLink name=”clienttemplates.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>
<SharePoint:ScriptLink name=”clientforms.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>
<SharePoint:ScriptLink name=”clientpeoplepicker.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>
<SharePoint:ScriptLink name=”autofill.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>
<SharePoint:ScriptLink name=”sp.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>
<SharePoint:ScriptLink name=”sp.runtime.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>
<SharePoint:ScriptLink name=”sp.core.js” runat=”server” LoadAfterUI=”true” Localizable=”false”/>

This code block is used to render the Client People Picker that we will add later. If you cannot edit the code, press Advanced Mode in the ribbon at the top of the SharePoint Designer. Save it – press OK if there is any warning.

Step 3 – Create a JavaScript file. Paste the following code and upload the file to your SharePoint Document.

$(document).ready(function () {$(document).ready(function () {
// Specify the unique ID of the DOM element where the picker will render.
initializePeoplePicker(‘peoplePickerDiv’);
});
// Render and initialize the client-side People Picker. function initializePeoplePicker(peoplePickerElementId) {
// Create a schema to store picker properties, and set the properties.
var schema = {};
schema[‘PrincipalAccountType’] = ‘User,DL,SecGroup,SPGroup’;   schema[‘SearchPrincipalSource’] = 15;
schema[‘ResolvePrincipalSource’] = 15;
schema[‘AllowMultipleValues’] = true;
schema[‘MaximumEntitySuggestions’] = 50;
schema[‘Width’] = ‘600px’;
// Render and initialize the picker.
// Pass the ID of the DOM element that contains the picker, an array of initial
// PickerEntity objects to set the picker value, and a schema that defines picker properties.    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

Step 4 – Open your browser, go to the chosen page that you want to place the Client People Picker. Add a new Content Editor Web Part → Edit this Web Part → Paste the link of the uploaded script file.

1-1mFhGNgb09z3cknNC5Tpvw
1. Edit Page
1-x5YXV8yDqi_KLizcRSDWiw
2. Add a new Content Editor Web Part
1-Zq-Nv4UX5eXeUYRc1_LNxw
3. Edit Content Editor Web Part

3

Step 5 – Save the page by clicking on the Stop Editing button in the top Ribbon.

1-tI4GssTRvq9Lafwg4tTQlw

That’s it! Now, you have your own Client People Picker. I hope that this tutorial has helped you to achieve your goal.

 

Anh Vo


References

https://dev.office.com/sharepoint/docs/sp-add-ins/use-the-client-side-people-picker-control-in-sharepoint-hosted-sharepoint-add-in

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s