Show People Picker UI control on SharePoint Page Programmatically using JSOM

People picker is the best way to choose people name of your organization in SharePoint 2013 based web applications. 2013 has much better support and facility to People Picker control on UI.

Below are the steps to achieve this functionality on any web page of your SharePoint 2013 site.

1. Click on ‘Edit Page’ options in Settings section of the page on which you are willing to add this control to.

2. See if you already have some scripts running on this through script file(s) of the page, or open new script in ‘Media and Content’ webpart if you are adding a new script.

3. In the script define a div as per UI rendering location:


4. Add following script references in the file:

<script type=’text/javascript’ src=somepath/clienttemplates.js’

<script type=’text/javascript’ src=somepath/clientforms.js’

<script type=’text/javascript’ src=somepath/clientpeoplepicker.js’

<script type=’text/javascript’ src=somepath/autofill.js’

<script type=’text/javascript’ src=somepath/sp.runtime.js’

<script type=’text/javascript’ src=somepath/sp.js’>

<script type=’text/javascript’ src=somepath/sp.core.js’

can be an absolute path of relative path where you would keep these scripts..

5. To initialize Picker Picker on page, add following JavaScript code:

// 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’] = false;

schema[‘MaximumEntitySuggestions’] = 50;

schema[‘Width’] = ‘230px’;

// Render and initialize the picker.

// Pass the ID of the DOM element that contains the picker, an array of initial

// Picker Entity objects to set the picker value, and a schema that defines

// picker properties.

SPClientPeoplePicker_InitStandaloneControlWrapper (<div id>, null, schema);

The Picker control will look something like this:

Even you add some text in control, it will start showing search results to choose from:

The properties you are setting in schema will help you records to want to display, width of textbox on UI, allow multiple people selection, maximum search result suggestions etc..

To get the people picker object from the page.

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

var keys = peoplePicker.GetAllUserKeys();

keys will return all the people name added in the control. Once you have got in keys variable these can be manipulated for further action.


Enable the scripts and for page and to ensure that all scripts are available.