Get the ID and Name from multiple Client side People pickers to store in a list

Question

I have a form which contains 3 client side people pickers, i use the following JS to produce the People Pickers

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

// 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);
}

Then to initialise the People Pickers themselves i use:

initializePeoplePicker('peoplePickerDiv');
initializePeoplePicker('managerPickerDiv');
initializePeoplePicker('mdPickerDiv');

and on the front end itself.

<div id="peoplePickerDiv" class="peoplepicker"></div>
<div id="managerPickerDiv" class="peoplepicker"></div>
<div id="mdPickerDiv" class="peoplepicker"></div>

This all works. What i want to do for each pp is capture the ID and Name of the person and store them in a list. I know how to store them in a list, just need to know how to get the ID and Name from PP?

OK I can now get the Name from the People pickers...but still no way to get the ID which I need so i can populate the person or group type Column.

Answer 1

---

Get Users from People Picker

In the MSDN article you already probably know:

http://msdn.microsoft.com/en-us/library/jj713593%28v=office.15%29.aspx

In this article you have the function:

// Query the picker for user information.
function getUserInfo() {

// Get the people picker object from the page.
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

// some code Here


// Get user keys.
var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);
}

the key here is the function "GetAllUserKeys()".

here you get the user ID which you can store. To get the display name you just iterate through the user informations.

var users = peoplePicker.GetAllUserInfo();
var userNames= '';
for (var i = 0; i < users.length; i++) {
    var user = users[i];        
    userNames+= userProperty + ':  ' + user.DisplayText + '<br>';        
}

---

Initialize Users in People Picker

If you want to fill the people picker after you loaded it you can use the following function to add multiple users:

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;  
peoplepicker.AddUserKeys('i:0#.f|membership|name01@domain.onmicrosoft.com;i:0#.f|membership|name02@domain.onmicrosoft.com');

or use the way in the following article:

http://www.jeremythake.com/2014/01/using-multiple-peoplepickers-in-sharepoint-2013-hosted-app-with-angularjs-mvvm/#comment-41561

Answer 2

I've got a function in SPServices that may help with this called SPFindPeoplePicker. The intent of the function is to allow you to set or get the values in a People Picker.

Answer 3

I used the info from the same cited above https://msdn.microsoft.com/en-us/library/office/jj713593.aspx to get the full list of User info for the person in our 2013 farm. I was interested in just grabbing one name from the picker so I set

schema['AllowMultipleValues'] = false;

the reference article uses a function to get the UserID

function getUserId(loginName) {
var context = new SP.ClientContext.get_current();
this.user = context.get_web().ensureUser(loginName);
context.load(this.user);
context.executeQueryAsync(
     Function.createDelegate(null, ensureUserSuccess), 
     Function.createDelegate(null, onFail)
);
}

function ensureUserSuccess() {
$('#userId').html(this.user.get_id());
}

function onFail(sender, args) {
alert('Query failed. Error: ' + args.get_message());

}

This worked perfectly for me.

executing the people picker with my name results in (along with additional info)

User ID: 37
User Display Name: Popiel, Larry

Larry