1

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 = '[email protected];#[email protected]'; 
       // 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 ='[email protected]';
   PickerEditor.val(vUserName);
   PickerInstance.AddUnresolvedUserFromEditor(true);//V.Important line
  }


  function SetAndResolvePeoplePicker(xid, userAccountName) 
 {    
        var userCurrentSourceLead = '[email protected]';
        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|[email protected];i:0#.f|internal|[email protected]';

     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|[email protected];i:0#.f|internal|[email protected]';

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


}

  function SetAndResolvePeoplePickery(xid, userAccountName) {

          userKeysAsString = 'i:0#.f|internal|[email protected];i:0#.f|internal|[email protected]';
          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); 
    }
3
  • are you trying to add it to app part in app or solution/
    – Esaki
    Dec 12, 2016 at 8:13
  • you get people name from list field Dec 12, 2016 at 9:57
  • This code is being inserted in a client side presave render section.
    – southskies
    Dec 12, 2016 at 23:18

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.