How do you populate people picker column data with multiple values using email via JavaScript?

Question

I'm using SharePoint 2013, my people picker column is set to accept multiple values.

I am able to post to a list item and add a single person to the column using the following method:

function updatePeopleColumn(listName, itemID) {
    var siteUrl = _spPageContextInfo.webServerRelativeUrl,
        clientContext = new SP.ClientContext(siteUrl),
        currentWeb = clientContext.get_web(),
        oList = currentWeb.get_lists().getByTitle(listName),
        userObj = currentWeb.get_siteUsers().getByEmail('[email protected]');

    this.oListItem = oList.getItemById(itemID);

    oListItem.set_item('People', userObj);

    oListItem.update();

    clientContext.load(oListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onPeopleQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onPeopleQuerySucceeded(sender, args) {
    console.log('Person added to People.', sender, args);
}

function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

updatePeopleColumn('ListName', 99999);

What I have not been able to do is gather multiple people using currentWeb.get_siteUsers().getByEmail('[email protected]'), adding those to an array and passing that value to the column, like so:

function updatePeopleColumn(listName, itemID, emailAddresses) {
        var siteUrl = _spPageContextInfo.webServerRelativeUrl,
            clientContext = new SP.ClientContext(siteUrl),
            currentWeb = clientContext.get_web(),
            oList = currentWeb.get_lists().getByTitle(listName),
            users = [],
            i;

        for (i = 0; i < emailAddresses.length; i++) {
            var userObj = currentWeb.get_siteUsers().getByEmail(emailAddresses[i]);

            users.push(userObj);
        }

        this.oListItem = oList.getItemById(itemID);

        oListItem.set_item('People', users);

        oListItem.update();

        clientContext.load(oListItem);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onPeopleQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onPeopleQuerySucceeded(sender, args) {
        console.log('People added to People.', sender, args);
    }

    function onQueryFailed(sender, args) {
        console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
updatePeopleColumn('ListName', 99999, ['[email protected]', '[email protected]']);

So how do I pass multiple values to the people column using emails?

Answer 1

Figured this one out.

The trick was to use SP.FieldUserValue.fromUser('[email protected]');

Even though the official documentation states to use this method you pass the 'userName' I was able to pass the email address instead to get the right object to pass to the people picker via JavaScript.

Below is an example of what I used to solve this:

function updatePeopleColumn(listName, itemID, emailAddresses) {
    var siteUrl = _spPageContextInfo.webServerRelativeUrl,
        clientContext = new SP.ClientContext(siteUrl),
        currentWeb = clientContext.get_web(),
        oList = currentWeb.get_lists().getByTitle(listName),
        users = [],
        userObj,
        i;

    for (i = 0; i < emailAddresses.length; i++) {
        userObj = SP.FieldUserValue.fromUser(emailAddresses[i]);

        users.push(userObj);
    }

    this.oListItem = oList.getItemById(itemID);

    oListItem.set_item('People', users);

    oListItem.update();

    clientContext.load(oListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySuccess),
        Function.createDelegate(this, this.onQueryFailed)
    );
}

Hope this helps anyone else trying to post users via email address to the people picker column of a list!