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

by
Complete SharePoint Training Course ($46 OFF)

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.

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

You may like 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
    • >