Get User id from people picker client side

Question

I have created people picker on client side using SPpeoplepicker.js.

$("#peoplePickerDiv").spPeoplePicker();

Everything works perfect all user display in people picker and i can select multiple user in it. Now i want to get ID of selected user from people picker.

I got reference from MSDN. But it looks like complex. I would wants to change in SPPeoplePicker js to bind USER ID with Login name.

Answer 1

According to your requirement, you can not get the id from the ClientPeoplePicker Control, the walk around is quite simple, with the key data mentioned by @Akshay Randive, you can call the next function:

function GetUserId(userName) {
    //userName format = i:0#.w|bidev\sp_admin
    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;

    var call = $.ajax({
        url: siteUrl + "/_api/web/siteusers(@v)?@v='" + 
                encodeURIComponent(userName) + "'",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" }
    });
    return call;
}

To call the method you use:

var getRevisor = GetUserId(keys);
getRevisor.done(function(user) {
    //user.d.Id <-- This is your precious data
});

With this you get the user ID

Greetings :)

Answer 2

$(document).ready(function () {

    // Specify the unique ID of the DOM element where the
    // picker will render.
    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);
}

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

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

    // 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>';
        }
    }
    $('#resolvedUsers').html(userInfo);

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

    // Get the first user's ID by using the login name.
    getUserId(users[0].Key);
}

// Get the user ID.
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());
}

Here is complete solution Check here for more details

Answer 3

I have use SPPeoplePicker which is easy to use and to save user in list item i can get ID of user directly from this JS like

$("#PeoplePickerDiv").getUserIDs()

It will return array of ID of all user from people picker and also work with multiple people picker. So i can directly save user in column.