Provides methods to retrieve SPClientPeoplePicker object asynchronously

sp-clientpeoplepickerhelper.js

/**
 * sp-clientpeoplepickerhelper.js
 *
 * (c) 2018 koohq. Licensed under CC0.
 * https://creativecommons.org/publicdomain/zero/1.0/legalcode
 */
var SPClientPeoplePickerHelper = (function() {
  var requiredScriptName = 'sp.js';

  function waitUnitlPeoplePickerReady() {
    return new Promise(function(resolve, reject) {
      ExecuteOrDelayUntilScriptLoaded(resolve, requiredScriptName);
    });
  }

  var guidPattern = '[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}';
  var dictKeyBackwardPattern = '_' + guidPattern + '_\\$ClientPeoplePicker$';
  
  function createDictKeyPattern(fieldName) {
    return new RegExp('^' + fieldName + dictKeyBackwardPattern);
  }

  function findPropertyByNamePattern(obj, namePattern) {
    var property;
    Object.keys(obj).some(function(key) {
      var exists = key.search(namePattern) !== -1;
      exists && (property = obj[key]);
      return exists;
    });
    return property;
  }

  function getPeoplePickerByNameAsync(fieldName) {
    return waitUnitlPeoplePickerReady().then(function() {
      var keyPattern = createDictKeyPattern(fieldName);
      var dict = SPClientPeoplePicker.SPClientPeoplePickerDict;
      return findPropertyByNamePattern(dict, keyPattern);
    });
  }

  function getPeoplePickerByIdAsync(topLevelElementId) {
    return waitUnitlPeoplePickerReady().then(function() {
      var dict = SPClientPeoplePicker.SPClientPeoplePickerDict;
      return dict[topLevelElementId];
    });
  }

  return {
    getPeoplePickerByNameAsync: getPeoplePickerByNameAsync,
    getPeoplePickerByIdAsync: getPeoplePickerByIdAsync
  };
})();

sp-clientpeoplepickerhelper.usage.js

/**
 * sp-clientpeoplepickerhelper.usage.js
 *
 * (c) 2018 koohq. Licensed under CC0.
 * https://creativecommons.org/publicdomain/zero/1.0/legalcode
 */

// retrieve by field name
SPClientPeoplePickerHelper.getPeoplePickerByNameAsync('Manager')
  .then(function(picker) { picker.AddUnresolvedUser({ Key: 'LoginID or Email' }, true); });

// retrieve by ID (div.sp-peoplepicker-topLevel's ID of target field)
var topElementId = 'Manager_eea851b8-3060-44e3-9062-c13e236f62ef_$ClientPeoplePicker';

SPClientPeoplePickerHelper.getPeoplePickerByIDAsync(topElementId)
  .then(function(picker) { picker.AddUnresolvedUser({ Key: 'LoginID or Email' }, true); });