How to set PeopleEditor value using javascript in SharePoint

While developing SharePoint application, you may want to use PeopleEditor control or your own custom control derived from EntityEditorWithPicker. If you come across the problem with setting its value using Javascript, below is the code sample that may help.

<script type="text/javascript">

function SetPickerValue(pickerid, key, dispval)
{
    var xml = '<Entities Append="False" Error="" Separator=";" MaxHeight="3">';
    xml = xml + PreparePickerEntityXml(key, dispval);
    xml = xml + '</Entities>';

    EntityEditorCallback(xml, pickerid, true);
}

function PreparePickerEntityXml(key, dispval)
{
    return '<Entity Key="' + key + '" DisplayText="' + dispval + '" IsResolved="True" Description="' + key + '"><MultipleMatches /></Entity>';
}

</script>


The easiest way to set PeopleEditor’s value is to use the EntityEditorCallbak function. This function is provided with built-in SharePoint javascript functions (both WSS 3.0 and MOSS 2007). It is the same function that is used by the control to set its own value. The first two parameters of the function are important – the first one is XML containing entities definition and the second one is a client identifier of the control which value should be set. (The client identifier is the same which is available in the ClientID property on the server side).
The above code sample presents the SetPickerValue function. The function covers XML generation from a given key and display text, and calling of EntityEditorCallback function.

Example of SetPickerValue call:

SetPickerValue('ctl00_PlaceHolderMain_pplEdit', 'domain\\m.kapusta','Marcin Kapusta');

Generated XML (for the given call) is the following:

<Entities Append="False" Error="" Separator=";" MaxHeight="3">
  <Entity Key="domain\m.kapusta" DisplayText="Marcin Kapusta" IsResolved="True" Description="domain\m.kapusta">
    <MultipleMatches />
  </Entity>
</Entities>


Be careful when providing domain account name. Javascript treats \ (backslash) character as a special character. If you want to have it in the string, you have to use \\ instead. That’s why I had to provide ‘domain\\m.kapusta’ as a parameter to get domain\m.kapusta value in the XML.

If you want to set PeopleEditor value to have multiple entities, you can modify SetPickerValue function to generate multiple <Entity />nodes in the XML.

You can set IsResolved attribute to False to have unresolved entity in the control. When the entity is unresolved you are able to provide some suggestions (accessible in the popup menu) adding child nodes to the <MultipleMatches /> node. I don’t want to go into details about the multiple matches as it is the topic for another post.