Setting Multivalued Peoplepicker SP 2013

Question

I'm trying to set a multi valued people picker through JavaScript. I've seen many examples, but nothing is working for me. The code I have tried is listed below. The only thing that does work is the getnames function, which returns the userid but none of the SetAndResolvePeoplePicker* variations to set the people picker works. What have I done wrong?

function getNames (controlName, setvalue){

         var nameList = "";
         var ppDiv        = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");         // Select the People Picker DIV
         var ppEditor     = ppDiv.find("[title='" + controlName + "']");                                  // Use the PP DIV to narrow the jQuery scope
         var spPP         = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id];
         var users = spPP.GetAllUserInfo();
         for (var i = 0; i < users.length; i++) {
            var user = users[i];
            var nameList = nameList + user.DisplayText + "";
              };
         return nameList; 
     }



// Set People Picker Values
function SetAndResolvePeoplePicker2(fieldName) {
        var fieldName = "SetThisField";
        userAccountName = 'my.email@domain.com;#horse@domain.com'; 
       // alert(userAccountName);
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var _PeoplePickerEditer = $("input[title='" + fieldName + "']");

        userAccountName.split(";#").forEach(function (part) {
   if (part !== "" && part !== null) {
          //  alert(part);
            _PeoplePickerEditer.val(part);
            var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
            _PeoplePickerOject.AddUnresolvedUserFromEditor(true);
   }
        });

    }


  function SetAndResolvePeoplePickerx(id, userAccountName) {

   var id = "SetThisField"; 
   var PickerDiv = $('[id$="ClientPeoplePicker"][id^="' + id + '"]');
   var PickerEditor = PickerDiv.find('[title="' + id + '"]');
   var PickerInstance = SPClientPeoplePicker.SPClientPeoplePickerDict[PickerDiv[0].id];
   //You need to user SPServices library to get logged user.      
     var vUserName ='my.email@domain.com';
   PickerEditor.val(vUserName);
   PickerInstance.AddUnresolvedUserFromEditor(true);//V.Important line
  }


  function SetAndResolvePeoplePicker(xid, userAccountName) 
 {    
        var userCurrentSourceLead = 'my.email@domain.com';
        var pickerTitle = "SetThisField";
        var pickerDiv = $('[id$="ClientPeoplePicker"][title="' + pickerTitle + '"]');
        var pickerEditor = pickerDiv.find('[title="' + pickerTitle + '"]');
        var pickerInstance = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
        pickerEditor.val(userCurrentSourceLead);
        pickerInstance.AddUnresolvedUserFromEditor(false);

}

  function SetAndResolvePeoplePickertt(xid, userAccountName) 
 {               
     var controlName = 'SetThisField'; // My People Picker Control is called "SetThisField" 
     var ppDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']"); // Select the People Picker DIV 
     var ppEditor = ppDiv.find("[title='" + controlName + "']"); // Use the PP DIV to narrow jQuery scope 
     var spPP = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id]; // Get the instance of the People Picker from the Dictionary 

     users = 'i:0#.f|internal|my.email@domain.com;i:0#.f|internal|horse@domain.com';

     ppEditor.val(users); // this sets it 
     spPP.AddUnresolvedUserFromEditor(false); // resolves it 

}

 function SetAndResolvePeoplePickertt(xid, userAccountName) 
 {               
     var controlName = 'SetThisField'; // My People Picker Control is called "SetThisField" 
     var ppDiv        = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");         // Select the People Picker DIV
     var ppEditor     = ppDiv.find("[title='" + controlName + "']");                                  // Use the PP DIV to narrow the jQuery scope
     var spPP         = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id];

     users = 'i:0#.f|internal|my.email@domain.com;i:0#.f|internal|horse@domain.com';

     ppEditor.val(users); // this sets it 
     spPP.AddUnresolvedUserFromEditor(false); // resolves it 


}

  function SetAndResolvePeoplePickery(xid, userAccountName) {

          userKeysAsString = 'i:0#.f|internal|my.email@domain.com;i:0#.f|internal|horse@domain.com';
          var ppName = 'SetThisField';
          var peoplePickerDivTopSpan = $('#' + ppName + '_TopSpan')[0].id;
          var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivTopSpan];
          peoplePicker.AddUserKeys(userKeysAsString, false);

}

Update:

I've tried more code, still no luck... can anyone help?

ExecuteOrDelayUntilScriptLoaded(sharePointReady, "sp.js"); 

function sharePointReady() {

      SP.SOD.registerSod("jQuery.js", "https://.../SiteAssets/jquery-1.11.3.js");

      SP.SOD.executeFunc("jQuery.js", null, LoadCurrentUser);

       }                        

    function LoadCurrentUser() {
        var context = SP.ClientContext.get_current();
        var siteColl = context.get_site();
        var web = siteColl.get_rootWeb();
        this._currentUser = web.get_currentUser(); 
        context.load(this._currentUser);
        context.executeQueryAsync(Function.createDelegate(this, SetPickersToCurrentUser), Function.createDelegate(this, LoadUserfailed));
    }

    function LoadUserfailed() {
        alert('failed');
    }

    function SetPickersToCurrentUser()
    {
        var loginName = this._currentUser.get_title();
        SetPeoplePicker('SetThisField', loginName);
    }

    function SetPeoplePicker(fieldName, userAccountName) { 
        var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + fieldName + "']"); 
        var peoplePickerEditor = peoplePickerDiv.find("[title='" + fieldName + "']"); 
        var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id]; 
        peoplePickerEditor.val(userAccountName); 
        spPeoplePicker.AddUnresolvedUserFromEditor(true); 
    }

This code is being inserted in a client side presave render section. — southskies, Dec 12 '16 at 23:18

score 0 · Answer 1 · answered Dec 14 '16 at 07:09

Managed to cobble some code together from these two sources:

http://enjoydevelopment.blogspot.com.au/2015/12/adding-and-removing-users-from.html

https://jasonscript.wordpress.com/2013/08/07/javascript-and-working-with-the-sharepoint-2013-people-picker/

Basically, every time you do the ppEditor.value call, it will add a name to the end of the value. However, if you want to replace the current value with a new one, you need to remove all the other names first, which is what the code below will do.

If someone else comes up with another idea great, but this is all I've come up with so far.

var controlName = "MyNameField";
var ppDiv = document.querySelector("[id$='ClientPeoplePicker'][title='" + controlName + "']");
 var spPP = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv.id];
 var ppEditor = document.getElementById(spPP.EditorElementId);
 if (spPP) {
  var ResolvedUsersList = $(document.getElementById(spPP.ResolvedListElementId)).find("span[class='sp-peoplepicker-userSpan']");
  $(ResolvedUsersList).each(function (index) {
   spPP.DeleteProcessedUser(this);
  });
}

ppEditor.value = "domain\\userid";
spPP.AddUnresolvedUserFromEditor(true);

Setting Multivalued Peoplepicker SP 2013

1 Answers1