Le peoplepicker est un composant SharePoint qui permet de sélectionner des utilisateurs ou des groupes. Il existe une version serveur et une version client.

L’article de la MSDN Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins comporte un exemple basique et fonctionnel. Par contre changer l’ID de la div accueillant le composant, et ça marche moins bien.

La ligne qui pose problème est la suivante :

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

Le dictionnaire SPClientPeoplePickerDict contient les SPClientPeoplePicker associés aux ID.

Si vous créez 2 peopleplicker - div1, div2 -, this.SPClientPeoplePicker.SPClientPeoplePickerDict contiendra deux objets div1_TopSpan et div2_TopSpan.

Voici une petite correction qui rendra la composant utilisable.

// 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';

    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();
    doSth(users);
}

Pour configurer le peoplepicker cela se fait à la création dans le schema.

this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);

La page Class SPClientPeoplePicker propose les propriétés disponibles. Il faudra probablement un peu tatonner.

Par exemple schema[‘SharePointGroupID’] = spGroupId; permet de limiter la recherche du people picker à un groupe SP.

Le 2nd parametre permet d’initialiser le people picker avec des utilisateurs pré sélectionnés. Ci-après l’objet attendu:

users = [{
        'AutoFillDisplayText': '',
        'AutoFillKey': '',
        'Description': '',
        'DisplayText': '',
        'EntityType': '',
        'IsResolved': '',
        'Key': '',
        'Resolved': ''
    }];

Références :

Class SPClientPeoplePicker

MSDN - Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins

SharePoint 2013: Client Side People Picker