Client-side People Picker control for Sharepoint Apps

When creating my "Sharepoint Hosted" App for Office365 (15) I had to use the client-side People Picker control in the App Part. There doesn't appear to be much in the way of documentation for this control other than the "How to" MSDN document here:

How to: Use the client-side People Picker control in apps for SharePoint

I wanted to default the control to the current user. From the document I could tell that there was a parameter in the init function that should contain an array of initial PickerEntity objects, but sadly no example of this. The example code simply passed a null where this should be.

SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);

I like to use the jQuery deferred function with the SharePoint asynchronous requests so that I have some control over my code executing in a sequential manner.

Here is a snippet of code that demonstrates how to default the People Picker control to the current user:

$(document).ready(function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
})

function sharePointReady() {
    context = new SP.ClientContext.get_current();
    web = context.get_web();
    getUser().done(function (user) {
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '280px';

        var users = new Array(1);
        var defaultUser = new Object();
        defaultUser.AutoFillDisplayText = user.get_title();
        defaultUser.AutoFillKey = user.get_loginName();
        defaultUser.Description = user.get_email();
        defaultUser.DisplayText = user.get_title();
        defaultUser.EntityType = "User";
        defaultUser.IsResolved = true;
        defaultUser.Key = user.get_loginName();
        defaultUser.Resolved = true;
        users[0] = defaultUser;
        SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', users, schema);
    });
}

function getUser() {
    var dfd = $.Deferred(function () {
        user = web.get_currentUser();
        context.load(user);
        context.executeQueryAsync(
            function () {
                dfd.resolve(user);
            }),
            function () {
                dfd.reject(args.get_message());
            };
    });
    return dfd.promise();
}

4 comments:

Mikel said...

This information is very helpful! I have been able to set up a client-side people picker in my sharepoint app form. But now, how should I retrieve the value that has been set? I need to take the value and update it to a list on the side (the list is not hosted in the app, in case that makes a difference) so how does that work?

Rikard said...

Awesome post. I especially liked how you managed to prepopulate the picker with a default value. The MSDN docs did not cover that. Great job!

Fabien Calais said...

Thanks for this; just a question : how to save the people picker value in a person or group field of a SP list? I not find how to retrieve the id of the user

Idaho Edokpayi said...

Very clever!
I am trying to do this in the context of Client Side Rendering.
I want to prepopulate the people picker in a new form. The rub is how to initialize the people picker in the template override.
When I figure it out I'll post the solution.
my blog