People Picker- SharePoint 2013/2106 using JavaScript

People picker insert multiple(Name/Group) in custom list

Note : enable AllowMultiple=true and Select Yes-PeopleAndGroup field in custom list colum settings

<html>

<head>

ExecuteOrDelayUntilScriptLoaded(getUserInformation, "sp.js");

function getUserInformation() {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var currentUser = web.get_currentUser();

initializePeoplePicker('peoplePickerDiv');

}

// Render and initialize the client-side People Picker.

function initializePeoplePicker(peoplePickerElementId) {

// 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'] = '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(PeoplepickerId) {

var UsersID = "";

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplepickerId + "_TopSpan"];

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 += users[i].DisplayText + "\n";

UsersID += users[i].EntityData.Email;

}

//insert data to sharepoint

var ctx = new SP.ClientContext.get_current();

var web = ctx.get_web();

var list = web.get_lists().getByTitle("System Authorization Request");

var listCreationInformation = new SP.ListItemCreationInformation();

var listItem = list.addItem(listCreationInformation);

// Get user keys.

var keys = peoplePicker.GetAllUserKeys();

var finalusers = new Array();

for (var i = 0; i < users.length; i++) {

var arryuser = users[i];

finalusers.push(SP.FieldUserValue.fromUser(arryuser.Key));

}

listItem.set_item("DirectManager", finalusers);

listItem.update();

ctx.load(listItem);

ctx.executeQueryAsync(function () {

console.log("inserted successfully");

return UsersID;

}, function (sender, args) {

console.log("something went wrong");

console.log('Err: ' + args.get_message());

return UsersID;

});

}

function saveUserinList() {

getUserInfo('peoplePickerDiv');

}

</script>

</head>

<body>

<button type="button" id="btnSubmit" onclick="saveUserinList()" style="margin-top: 10px;">Submit</button>

</body>

</html>

People picker Save to custom List (one more)
--------------------------------------------

step 1: create one TestList with AssigningTo - persona and Group column type
step 2: create one testPage add scripteditor webpart and insert below code.

<html>

<head>

var UserId;

var listname = "TestList";

$(document).ready(function () {

initializePeoplePicker("_UserName");

});

function initializePeoplePicker(peoplePickerElementId) {

var schema = {};

schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';

schema['SearchPrincipalSource'] = 15;

schema['ResolvePrincipalSource'] = 15;

schema['AllowMultipleValues'] = false;

schema['MaximumEntitySuggestions'] = 50;

schema['Width'] = '280px';

this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);

}

function saveUser() {

ensureUser();

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listname + "')/items",

type: "POST",

async: false,

data: JSON.stringify({

__metadata: {

type: "SP.Data.TestListListItem"

AssigningToId: UserId

}),

headers: {

"Accept": "application/json;odata=verbose",

"Content-Type": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val(),

"X-HTTP-Method": "POST",

success: function (data) {

alert("User Name is saved successfully");

error: function (error) {

alert(JSON.stringify(error));

}

});

//alert("Yes");

}

function ensureUser() {

var peoplePickerTopDivId = $('#_UserName').children().children().attr('id');

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerTopDivId];

var users = peoplePicker.GetAllUserInfo();

var arryuser = users[0];

if (arryuser) {

var payload = { 'logonName': arryuser.Key };

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/ensureuser",

type: "POST",

async: false,

contentType: "application/json;odata=verbose",

data: JSON.stringify(payload),

headers: {

"X-RequestDigest": $("#__REQUESTDIGEST").val(),

"accept": "application/json;odata=verbose"

success: function (data, status, xhr) {

UserId = data.d.Id;

error: function (xhr, status, error) {

}

});

}

else {

UserId = 0;

}

</script>

</head>

<body>

<div>

</div>

<div>

<button type="button" id="btnSubmit" onclick="saveUser()" style="margin-top: 10px;">Submit</button>

</div>

</body>

</html>

refer :https://www.c-sharpcorner.com/article/custom-people-picker-in-sharepoint-online/

---------------------------------------Another one-----------------------------------------

Reference :
https://howtodowithsharepoint.wordpress.com/2016/12/31/sharepoint-20162013-exploring-client-side-people-picker/

Step 1 : Add Script editor webpart,

Step 2 : Paste below code.

ExecuteOrDelayUntilScriptLoaded(getUserInformation, "sp.js");

function getUserInformation() {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var currentUser = web.get_currentUser();

initializePeoplePicker('peoplePickerDiv');

}

// Render and initialize the client-side People Picker.

function initializePeoplePicker(peoplePickerElementId) {

// 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'] = '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;

var displytext = "";

// 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>';

displytext= user["DisplayText"];

}

$('#resolvedUsers').html(userInfo);

// Get user keys.

var keys = peoplePicker.GetAllUserKeys();

$('#userKeys').html(keys);

document.getElementById("txtUser").value = keys;

document.getElementById("txtUserName").value = displytext;

}

</script>

</div>

<div>

<br />

<br />

</div>

Informatics People - SharePoint developer

Search This Blog

Sunday, July 2, 2017

People Picker- SharePoint 2013/2106 using JavaScript

No comments:

Post a Comment