CODEWITHSUNDEEP
javascriptjquerysharepointsharepoint-2013
sigil
sigil

Reputation: 9546

How to populate PeoplePicker control?

I'm trying to use Javascript to populate a PeoplePicker control in Sharepoint 2013:

name="Engineer"
var ppDiv=$("[id$='ClientPeoplePicker'][title='"+name+"']");
console.log(ppDiv.html());
var ppEditor=ppDiv.find("[title='"+name+"']");
var spPP=SPClientPeoplePicker.SpClientPeoplePickerDict[ppDiv[0].id];
ppEditor.val("Abc, Xyz");
spPP.AddUnresolvedUserFromEditor(true);

Two problems: ppDiv is still undefined after the assignment statement, and SPClientPeoplePicker is not defined; according to this article, it’s defined by clientpeoplepicker.js, which is a script that’s supposed to be loaded on every page that has a People Picker.

EDIT:

I changed the code to:

name="Engineer"
var ppDiv=$("div[title='"+name+"']");
console.log(ppDiv.html());
var ppEditor=ppDiv.find("[title='"+name+"']");
var spPPD=SPClientPeoplePicker.SpClientPeoplePickerDict;
console.log(spPPD[0]);
var spPP=spPPD[ppDiv[0].id];
ppEditor.val("Abc, Xyz");
spPP.AddUnresolvedUserFromEditor(true);

Now ppDiv is defined (as shown by its HTML successfully appearing in the console log), but it's crashing on the line var spPPD=SPClientPeoplePicker.SpClientPeoplePickerDict; with this error:

Uncaught ReferenceError: SPClientPeoplePicker is not defined

Upvotes: 1

Views: 10367

Answers (2)

JohnJ
JohnJ

Reputation: 67

I find that if I add a 500-700ms delay before calling the code, that I do not get this error:

window.setTimeout(function() {
  SetAndResolvePeoplePicker("PickerFieldName", "[email protected]");
  }, 750);

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

Upvotes: 0

Ki_Netic
Ki_Netic

Reputation: 132

Here is how i did it. With fieldName beeing the column title of the people picker and userAccountName the user login name/last part of the claim.

One thing to point out is that it has to be a client people picker. As far as i know, sharepoint uses server side people picker by default in custom forms so make sure its really a client people picker.

function SetAndResolvePeoplePicker(fieldName, userAccountName) { 
    var controlName = fieldName; 
    var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']"); 
    var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']"); 
    var spPeoplePicker =   SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
 
    peoplePickerEditor.val(userAccountName); 
    spPeoplePicker.AddUnresolvedUserFromEditor(true);
 
    //disable the field 
    spPeoplePicker.SetEnabledState(false);
 
    //hide the delete/remove use image from the people picker 
    $('.sp-peoplepicker-delImage').css('display','none'); 
}

Upvotes: 1

Related Questions