title: How to populate PeoplePicker control?
body: <p>I'm trying to use Javascript to populate a PeoplePicker control in Sharepoint 2013:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Two problems:  <code>ppDiv</code> is still undefined after the assignment statement, and <code>SPClientPeoplePicker</code> is not defined; according to <a href="https://jasonscript.wordpress.com/2013/08/07/javascript-and-working-with-the-sharepoint-2013-people-picker/" rel="nofollow">this article</a>, it’s defined by <code>clientpeoplepicker.js</code>, which is a script that’s supposed to be loaded on every page that has a People Picker.</p>
  
  <p>EDIT:</p>
  
  <p>I changed the code to:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Now ppDiv is defined (as shown by its HTML successfully appearing in the console log), but it's crashing on the line <code>var spPPD=SPClientPeoplePicker.SpClientPeoplePickerDict;</code> with this error:</p>
  
  <pre><code>Uncaught ReferenceError: SPClientPeoplePicker is not defined
  </code></pre>