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
- Custom Azure Add-in People picker control
- How to use client-side People Picker control in SharePoint online Office 365?
- InfoPath 2013 People Picker browse button does not work on InfoPath form Nothing happens after a click
- 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
- An alternative way to promote people picker in InfoPath form library in SharePoint 2013
- Auto-populate current logged in user name in SharePoint 2010 People Picker control using SPServices
- Make People Picker read-only in SharePoint 2010 list form using jQuery
- 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.
SharePoint Online FREE Training
JOIN a FREE SharePoint Video Course (3 Part Video Series)
Hi it is working but after selection I don’t see the selection in side the div. Any Idea? thanks, UD