Create client side People Picker control in SharePoint Online Office 365

How to use client side People Picker control in SharePoint online Office 365?
SharePoint deveopment training course

This SharePoint tutorial explains, how to create client-side People Picker control in SharePoint Online Office 365? The same code will also work in SharePoint 2016 or SharePoint 2013 to create client-side people picker.

Create client side People Picker control in SharePoint Online Office 365

Here in this particular example, we have taken a div whose id is “peoplePickerDiv” will render the people picker. In the document load, we are calling the initializePeoplePicker method which will initialize the people picker control.

Also, we need to make sure we will give the below js file references in the particular order.

We have also added “Get User Info” button on click of the button we are calling the getUserInfo() function which will return information about all the users from the people picker.

Here we will add the code inside a script editor web part which we will put inside a web part page.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="_layouts/15/strings.js"></script>
<script type="text/javascript" src="_layouts/15/clienttemplates.js"></script>
<script type="text/javascript" src="_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="_layouts/15/autofill.js"></script>
<script type="text/javascript" src="_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>

<div id="peoplePickerDiv"></div>
<input type="button" value="Get User Info" onclick="getUserInfo()"></input>
<br /><br />
<h1>User info:</h1>
<p id="resolvedUsers"></p>
<h1>User keys:</h1>
<p id="userKeys"></p>
<h1>User ID:</h1>
<p id="userId"></p>

<script>
$(document).ready(function () {
initializePeoplePicker('peoplePickerDiv');
});

function initializePeoplePicker(peoplePickerElementId) {
// Create a schema to store picker properties, and set the properties.
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';

//This value specifies where you would want to search for the valid values
schema['SearchPrincipalSource'] = 15;

//This value specifies where you would want to resolve for the valid values
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = true;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '280px';

// 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);
}

function getUserInfo() {
// Get the people picker object from the page.
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

// Get information about all users.
var users = peoplePicker.GetAllUserInfo();
var userInfo = ";
for (var i = 0; i < users.length; i++) {
var user = users[i];
for (var userProperty in user) {
userInfo += userProperty + ': ' + user[userProperty] + '<br>';
}
}
$('#resolvedUsers').html(userInfo);
// Get user keys.
var keys = peoplePicker.GetAllUserKeys();
// Get the first user's ID by using the login name.
getUserId(users[0].Key);
}

// Get the user ID.

function getUserId(loginName) {
var context = new SP.ClientContext.get_current();
this.user = context.get_web().ensureUser(loginName);
context.load(this.user);
context.executeQueryAsync(
Function.createDelegate(null, ensureUserSuccess),Function.createDelegate(null, onFail)
);
}

function ensureUserSuccess() {
$('#userId').html(this.user.get_id());
}

function onFail(sender, args) {
alert('Query failed. Error: ' + args.get_message());
}
</script>
Create client side People Picker control in SharePoint Online Office 365
Create client side People Picker control in SharePoint Online Office 365

Once you Save the web part page, the people picker will appear like below. Once you put a user, and click on button it will show details of the user.

You may like following SharePoint people picker tutorials:

Hope this SharePoint tutorial explains, how to create a client-side people picker control in SharePoint Online Office 365.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →