How to get a SharePoint-UserField with JavaScript ?

Question

Hallo,

i need to write some javascript that gets the contents of a userfield in a sharepoint-website. I can get most fields with the javascript-function 'getTagFromIdentifierAndTitle' of Using Javascript to Manipulate a List Form Field, but not UserFields.

So how can i get UserFields?

Thanks!

Answer 1

I traced how address book interacts with user field. To get values it uses function getUplevel(ctx) and to set values can be used function EntityEditorCallback(xml, ctx). First function will return html/xml mixed string with user information. Second function input must be special formatted xml string.

// Get values
var ctx='ctl00_m_g_e5a1501a_..._ctl04_ctl00_ctl00_UserField';
var values=getUplevel(ctx);
alert(values);

// Set values
var xml='<Entities Append="False" Error="" Separator=";" MaxHeight="3">'+
    '<Entity Key="DOMAIN\\loginname" DisplayText="Display Name" IsResolved="True" Description="DOMAIN\\loginname">'+
     '<ExtraData>'+
      '<ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"&gt;'+
       '<DictionaryEntry><Key xsi:type="xsd:string">DisplayName</Key><Value xsi:type="xsd:string">Display Name</Value></DictionaryEntry>'+
       '<DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">[email protected]</Value></DictionaryEntry>'+
       '<DictionaryEntry><Key xsi:type="xsd:string">SPUserID</Key><Value xsi:type="xsd:string">1</Value></DictionaryEntry>'+
       '<DictionaryEntry><Key xsi:type="xsd:string">PrincipalType</Key><Value xsi:type="xsd:string">User</Value></DictionaryEntry>'+
      '</ArrayOfDictionaryEntry>'+
     '</ExtraData>'+
     '<MultipleMatches />'+
    '</Entity>'+
'</Entities>';
EntityEditorCallback(xml,ctx);

Tricky part is ctx attribute that must be target field id. In user field html there is no title attribute, so to find right element by display name with js is very complex. I suggest to pass field id to the javascript from server side. For example you can create custom WebPart where you write to the page field id-s from collection SPContext.Current.FormContext.FieldControlCollection.

Answer 2

Here is the custom code that I put together. It relies on the exact HTML that SharePoint uses for the PeoplePicker. It does work on both IE and Firefox. For the columnName parameter, pass the "public" name of the column, not the internal name.

function getParentElementByTagName(baseNode, tagName)
{
  var currNode;

  if(baseNode !== null)
  {
    currNode = baseNode.parentNode;

    while((currNode !== null) && (currNode.nodeName != tagName))
    {
      currNode = currNode.parentNode;
    }

    return currNode;
  }
  else
  {
    return null;
  }
}

function getPeoplePickerCell(columnName)
{
  var search = 'FieldName="' + columnName + '"';

  var nodes = document.getElementsByTagName("TEXTAREA");

  for(var i=0; i < nodes.length; i++)
  {
    if(nodes[i].title == "People Picker")
    {
      var outerCell = getParentElementByTagName(nodes[i], "SPAN").parentNode.parentNode;

      if(outerCell.innerHTML.indexOf(search) > 0)
      {
        return nodes[i].parentNode;
      } 
    }
  }

  return null;
}

function getSPPeoplePicker(columnName, value)
{
  var cell = getPeoplePickerCell(columnName);

  if(cell !== null)
  {
    return cell.childNodes[0].innerHTML;
  }
  else
  {
    return null;
  }
}

function setSPPeoplePicker(columnName, value)
{
  var cell = getPeoplePickerCell(columnName);

  if(cell !== null)
  {
    cell.childNodes[0].innerHTML = value;
    cell.childNodes[1].value = value;
  }
}

function disableSPPeoplePicker(columnName)
{
  var cell = getPeoplePickerCell(columnName);

  if(cell !== null)
  {
    disableElement(cell.childNodes[0]);
    disableElement(cell.childNodes[1]);
  }
}

function enableSPPeoplePicker(columnName)
{
  var cell = getPeoplePickerCell(columnName);

  if(cell !== null)
  {
    enableElement(cell.childNodes[0]);
    enableElement(cell.childNodes[1]);
  }
}