Utiliser le peoplepicker côté client de SharePoint

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