Client Side People Picker In SharePoint 2013

Naveen Kumar

7 Comments

Join the conversation! Your thoughts help the community grow.

Love Thakker7y ago
Hi. Nice blog. just one update I will suggest is you have not defined UserID in getUserInfo() method. I was getting error there.
sarah8y ago
Hi, can you please explain to me how to use this client side picker. My question is posted here: https://sharepoint.stackexchange.com/questions/253927/client-people-picker-value-for-workflow I basically want to get the values of the fields I have (filtered by groups only) to use the values in a sharepoint designer workflow but the values are always null... I was thinking of maybe using the PreSave function to save the values like this: function PreSaveItem(){alert('1'); if ("function"==typeof(PreSaveAction)) { return PreSaveAction(); } return true; } function PreSaveAction() { try{ alert('hi'); getUserInfo("AcademyFixedPermissions_5814f08e-a7ab-4c8e-bb73-72d58fd452dc_$ClientPeoplePicker"); return true; } catch(err) { alert('Please report this error 2: ' + err); return false; } } but the presave function is not even firing - any help pleasE?
Tiago Feliciano8y ago
Hello great post, i just have a question how do you get the people from this custom people picker? Im asking because im having trouble making an insertion from the data present in the div to a sharepoint 2013 people column.
- Naveen Kumar8y ago
  Function getUserInfo(PeoplepickerId) { // Get the people picker object from the page. var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplepickerId + "_TopSpan"]; if (!peoplePicker.IsEmpty()) { if (peoplePicker.HasInputError) return false; // if any error else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users else if (peoplePicker.TotalUserCount > 0) { // Get information about all users. var users = peoplePicker.GetAllUserInfo(); var userInfo = ''; var promise = ''; for (var i = 0; i < users.length; i++) { UsersID += GetUserID(users[i].Key); } return UsersID; } } else { return UsersID; } }
Piyush Agarwal8y ago
This is really help full. However will this work if I have multiple people picker on the same page....
- Naveen Kumar8y ago
  Yes, of course, Just you need to use the appropriate id to get the values form control
Kukdai D9y ago
People picker works you can search and find users but following errors comes up in the console for each user resolved and if you resolve multiple user then it says you are not allowed to enter more than one name When i type 3 words in the textbox following are the console errors 1. Uncaught ReferenceError: RemoveCssClassFromElement is not defined at HTMLInputElement.SPClientPeoplePicker_OnEditorBlur (clientpeoplepicker.js:1) 2. Uncaught RangeError: Maximum call stack size exceeded at ULSObject.ULSOnError [as OriginalOnError] (init.js?rev=RIl4brNTuKjQszVd+c1CnQ==:1) at ULSSendExceptionImpl (init.js:12) at ULSObject.ULSOnError [as OriginalOnError] (init.js?rev=RIl4brNTuKjQszVd+c1CnQ==:1) at ULSSendExceptionImpl (init.js:12) at ULSObject.ULSOnError [as OriginalOnError] (init.js?rev=RIl4brNTuKjQszVd+c1CnQ==:1) at ULSSendExceptionImpl (init.js:12) at ULSObject.ULSOnError [as OriginalOnError] (init.js?rev=RIl4brNTuKjQszVd+c1CnQ==:1) at ULSSendExceptionImpl (init.js:12) at ULSObject.ULSOnError [as OriginalOnError] (init.js?rev=RIl4brNTuKjQszVd+c1CnQ==:1) at ULSSendExceptionImpl (init.js:12)

In this article we are going to see how to use client side people picker in SharePoint 2013.

The SharePoint people picker is already available in SharePoint as a server control, but now a days all are moving to client side based code since office 365 supports only client side. So we need to know how to be use people picker in client side.

Required JavaScript Library

The client side people works depends on multiples SharePoint JavaScript library,

<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/1033/strings.js"></script>
<script src="/_layouts/15/clienttemplates.js"></script>
<script src="/_layouts/15/clientforms.js"></script>
<script src="/_layouts/15/clientpeoplepicker.js"></script>
<script src="/_layouts/15/autofill.js"></script>
<script src="_layouts/15/sp.core.js"></script>

Steps to Implement People Picker

Step 1

Refer the above JavaScript files in your page.

Step 2

Create a div tag in your page.

<div id=’peoplepicker’ /></div>

Step 3

Initialize the people picker on page load

$(document).ready(function() {
initializePeoplePicker(’peoplepicker’, false, ‘People Only’, 44);
function initializePeoplePicker(peoplePickerElementId, AllowMultipleValues, PeopleorGroup, GroupID) {
// Create a schema to store picker properties, and set the properties.
var schema = {};
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '280px';
schema['AllowMultipleValues'] = AllowMultipleValues;
if (PeopleorGroup == 'PeopleOnly') schema['PrincipalAccountType'] = 'User';
else schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
if (GroupID > 0) {
schema['SharePointGroupID'] = GroupID
}
// 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);
}
});

Note - Usage of the parameters values

peoplePickerElementId(Text) - Id of the control.
AllowMultipleValues - Its used to define whether the control can allow multiple user or not.Possbile values are True or False.

True - will allow to add multiple Users.

False - will only allow single user.
PeopleorGroup(Text) - It’s used to define whether the control can allow users and groups are only user. Possible values are ‘PeopleOnly’or ‘PeopleAndGroups’

PeopleOnly - will allow only user to add.

PeopleAndGroups - will allow to add users and groups also.
GroupID(Int) : it’s used to define the users can add only from the specified group id. The possible values are
0 or any Group ID of the group

0 - its allows to get users from any groups to add.

Group Id - its allow to get users from specified group.

Get User values from the Control

// Query the picker for user information.
// PeoplepickerId = Id of the people picker
function getUserInfo(PeoplepickerId) {
// Get the people picker object from the page.
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplepickerId + "_TopSpan"];
if (!peoplePicker.IsEmpty()) {
if (peoplePicker.HasInputError) return false; // if any error
else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users
else if (peoplePicker.TotalUserCount > 0) {
// Get information about all users.
var users = peoplePicker.GetAllUserInfo();
var userInfo = '';
var promise = '';
for (var i = 0; i < users.length; i++) {
UsersID += GetUserID(users[i].Key);
}
return UsersID;
}
} else {
return UsersID;
}
}
// Get the user ID.
function GetUserID(logonName) {
var item = {
'logonName': logonName
};
var UserId = $.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/ensureuser",
type: "POST",
async: false,
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data) {
return data.Id + ';#' + data.Title + ';#';
},
error: function(data) {
failure(data);
}
});
return UserId.responseJSON.d.Id + ';#' + UserId.responseJSON.d.Title + ';#';
}

The results will be after calling the methods: 40;#hmg\naveen.kumar;#30;#hmg\username;#