Sharepoint Add People Picker Control

To add people picker on your upload.aspx or any other sharepoint aspx pages;

First create a div for picker 

<div id="PeoplePickerDiv"></div>

Write your rest api functon to get people

function initializePeoplePicker(peoplePickerElementId) {

    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);
}

Initialize Your People Picker

initializePeoplePicker('PeoplePickerDiv');

Get Selected Users

var peoplePickerUserIDArray = [];
function peoplePickerGetSelectedUsersArray() {
	
    // 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];
        peoplePickerSetUserIdArray(user.Key);
    }
}

function peoplePickerSetUserIdArray(loginName) {

    var context = new SP.ClientContext.get_current();
    var user = context.get_web().ensureUser(loginName);
    context.load(user);
    context.executeQueryAsync(
        Function.createDelegate(null, function() {
            peoplePickerUserIDArray.push(user.get_id());
        }),
        Function.createDelegate(null, function(se, ea) {
            alert('Error:' + ea.get_message());
        })
    );
}

Add comment