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

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

In this post, we will discuss how we can use client-side People Picker control in SharePoint online Office 365? The same code will also work in SharePoint 2016 or SharePoint 2013.

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.

Also read:
How to use Deferred promise and then in Rest API in SharePoint Online or SharePoint 2013?

How to use set field value in Nintex Forms for Office 365 in SharePoint Online?

BeforeProperties and AfterProperties in Event Receiver in SharePoint 2013

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>


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.

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

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

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 →