Using SharePoint 2013 PeoplePicker with jQuery promise

Question

So with the help of Suresh C I tried to get multiple Id's at once from the PeoplePicker SP app. Standard code only gives out the Id of the first user. I'm going thorugh my code over and over again, but I still can't find any error or mistake.

 // Run your custom code when the DOM is ready.
$(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 user's ID by using the login name.
    $.each(users, function (key, user) {
        $.when(getUserId(user.key)).then(function (result) {
            $('#userId').html(result.get_id());
        });
    });
}

// Get the user ID.
function getUserId(loginName) {

    var deferred = $.Deferred();

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {

        var context = new SP.ClientContext.get_current();
        this.user = context.get_web().ensureUser(loginName);
        context.load(this.user);
        context.executeQueryAsync(

             Function.createDelegate(this,
                function () { deferred.resolve(this.user); }),
            Function.createDelegate(this,
                function (sender, args) { deferred.reject(args.get_message()); })

             );

    });
    return deferred.promise();
};

Executing this just gives out nothing for userId, also I don't get any error when I'm debugging it. Any advice or help how to get this to work?

Answer 1

// Run your custom code when the DOM is ready.
$(document).ready(function () {    
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';  
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++) {
// Get the user's ID by using the login name.
$.when(getUserId(users[i].Key))
.then(function (result) {
    $('#userId').html(result.get_id());
});
    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 user ID.
function getUserId(loginName) {

var deferred = $.Deferred();

var context = new SP.ClientContext.get_current();
var getUserId = context.get_web().ensureUser(loginName);
context.load(getUserId );
context.executeQueryAsync(
     Function.createDelegate(this,
        function () { deferred.resolve(getUserId ); }),
    Function.createDelegate(this,
        function (sender, args) { deferred.reject(sender, args); }));

return deferred.promise();
};

Execute the code will work work for you.

Answer 2

So here's the full working code:

// Run your custom code when the DOM is ready.
$(document).ready(function () {
    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';
    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++) {
        // Get the user's ID by using the login name.
        $.when(getUserId(users[i].Key))
        .then(function (result) {
                console.log(result.get_id());
        });
        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 user ID.
function getUserId(loginName) {

    var deferred = $.Deferred();

    var context = new SP.ClientContext.get_current();
    var user = context.get_web().ensureUser(loginName);
    context.load(user);
    context.executeQueryAsync(
         Function.createDelegate(null,
            function () { deferred.resolve(user); }),
        Function.createDelegate(null,
            function (sender, args) { deferred.reject(sender, args); }));

    return deferred.promise();
};