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.


Challenges:

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


Advertisements

2 thoughts on “Show People Picker UI control on SharePoint Page Programmatically using JSOM

  1. Hi my name is Denise and I just wanted to drop you a quick note here instead of calling you. I discovered your Show People Picker UI control on SharePoint Page Programmatically using JSOM | Microsoft Technology Trends page and noticed you could have a lot more visitors. I have found that the key to running a successful website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get targeted visitors from and they let you try their service for free for 7 days. I managed to get over 300 targeted visitors to day to my site. Check it out here: http://s.t0m-s.be/2X

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s