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.
You may like following SharePoint tutorials:
- Update People Picker Group field using Rest API and jQuery in SharePoint 2013
- Different operations on SharePoint 2013 people picker
- How to use client-side People Picker control in SharePoint online Office 365?
- Auto-populate current user name in people picker in SharePoint Online Office 365 Nintex forms
- Set People Picker field to empty or blank in SharePoint designer workflow
- JSON is undefined error in SharePoint 2013 InfoPath Person Group Picker in IE 11
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.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Hi it is working but after selection I don’t see the selection in side the div. Any Idea? thanks, UD