What is people picker and how to HTML Div as a People picker control in SharePoint Online?

Microsoft Teams

In this SharePoint tutorial, we will discuss what is a People picker control in SharePoint? And then we will discuss how we can use HTML DIV as a people picker control in SharePoint Online. We will use client-side code to make the HTML Div as a people picker control in SharePoint Online.

At A Glance - Here's what we'll cover: show

What is People Picker Control in SharePoint Online?

People Picker is a web control that is used to find and select users, groups, and claims to grant permission to items such as lists, libraries, or sites in SharePoint.

In this blog, we will discuss how to find users or groups in HTML Div by using JavaScript in SharePoint.

HTML Div as a People picker control in SharePoint Online

Here I share my html code where you create your people picker field. You can use a script editor web part to add the HTML and JavaScript code.

<label>Requester Name *</label>
<div id="Requester_Name"></div>

Next I will write JavaScript code to fetch the user or group details from SharePoint site.

<script>
RegisterScriptFiles('clienttemplates.js');
RegisterScriptFiles('clientforms.js');
RegisterScriptFiles('clientpeoplepicker.js');
RegisterScriptFiles('autofill.js');
    $(document).ready(function ($) {  

        $("#Requester_Name").spPeoplePicker();       	       
       
    }); 
	
	function RegisterScriptFiles(filename) {
      var scriptEle = document.createElement('script');
    scriptEle.setAttribute("type", "text/javascript")
    scriptEle.setAttribute("src", "/_layouts/15/" + filename);
    document.getElementsByTagName("head")[0].appendChild(scriptEle)

}
// Render and initialize the client-side People Picker.
function initializePeoplePicker(eleId) {
    // 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'] = '745px';
    // 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(eleId, null, schema);
}
$.fn.spPeoplePicker = function () {
    var eleId = $(this).attr('id');
    ExecuteOrDelayUntilScriptLoaded(function () { initializePeoplePicker(eleId); }, 'sp.core.js');
}; 
         
</script>

You can see the whole code in below steps with html.

<html>
<title>My Request</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<script>
RegisterScriptFiles('clienttemplates.js');
RegisterScriptFiles('clientforms.js');
RegisterScriptFiles('clientpeoplepicker.js');
RegisterScriptFiles('autofill.js');
    $(document).ready(function ($) {  

        $("#Requester_Name").spPeoplePicker();       	       
       
    }); 
	
	function RegisterScriptFiles(filename) {
      var scriptEle = document.createElement('script');
    scriptEle.setAttribute("type", "text/javascript")
    scriptEle.setAttribute("src", "/_layouts/15/" + filename);
    document.getElementsByTagName("head")[0].appendChild(scriptEle)

}
// Render and initialize the client-side People Picker.
function initializePeoplePicker(eleId) {
    // 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'] = '745px';
    // 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(eleId, null, schema);
}
$.fn.spPeoplePicker = function () {
    var eleId = $(this).attr('id');
    ExecuteOrDelayUntilScriptLoaded(function () { initializePeoplePicker(eleId); }, 'sp.core.js');
}; 
         
</script>  
     
<label>Requester Name *</label>
<div id="Requester_Name"></div>

</body>
</html>

Next, add a script editor Web part in your page and copy the above code and insert it. Next click on the Save button. Now you can able see the Output as below screenshot.

client side people picker in sharepoint online using javascript
client side people picker in sharepoint online using javascript

Here is another way, we can create a SharePoint people picker control client side.

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>
spclientpeoplepicker_initstandalonecontrolwrapper
spclientpeoplepicker_initstandalonecontrolwrapper

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.

This is how to create a client-side people picker control in SharePoint Online Office 365.

You may like the following SharePoint tutorials:

Hope this SharePoint tutorial explains what is a people picker control in SharePoint? And how we can use HTML DIV as a people picker control in SharePoint Online Office 365 using JavaScript.

  • Hi it is working but after selection I don’t see the selection in side the div. Any Idea? thanks, UD

    Reply
    • >