10

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.

3 Answers 3

4

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

5
  • I'm familiar with that post but you find that the GetAllUserInfo() does NOT give you the ID of the user...everything BUT! It gives you the user info and the keys. I worked out a solution using the REST Api.
    – Stephen
    Mar 6, 2014 at 14:15
  • Then I seem to understand what you mean by "ID" differently. I thought the unique ID of a user is this Format: i:0#.f|membership|name01@domain.onmicrosoft.com Mar 7, 2014 at 8:49
  • No that is not the ID...you will find this out if you try a populate a people picker column with it :-) Needs to be an ID (as in 15)
    – Stephen
    Mar 7, 2014 at 14:53
  • That clarifies it for me and I found out that the "key" in the People picker is the loginName for a user (username + Domain). With this loginname you can get the actual user object and in the user object you have the get_id() Function to get your id Mar 7, 2014 at 15:17
  • thats correct or you can use the REST Api by sending it the user Key.I ran into problems trying to get the get the id from the user object.
    – Stephen
    Mar 7, 2014 at 15:34
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.

2
  • Thanks Marc...I'm on it, been a very frustrating 2 days trying to get to the bottom of this. Guess its asking to much of the peoplePicker to give me the ID! Much appreciated.
    – Stephen
    Jan 10, 2014 at 17:03
  • Feel free to post questions about the function on the Codeplex site. It looks like you know what you're doing with script, so you may just want to pluck out the function and adapt it. Jan 10, 2014 at 17:06
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.