Initializing SharePoint People Editor using JavaScript in SharePoint 2010

Sometimes SharePoint PeopleEditor WebControl need to be initialized on the client side.

	//Init People Picker
	//peoplePickerId – SharePoint People Editor ClientID
	//pickerEntityXml – PickerEntity in xml (see method ToXmlData for class PickerEntity)
	function initPeoplePickerBox(peoplePickerId, pickerEntityXml) {
	var $pe = $("#" + peoplePickerId);


	var entityProps = {LoginName: pickerEntityXml.attr("Key"),
	UserName: pickerEntityXml.attr("DisplayText"),
	Description: pickerEntityXml.attr("Description")};

	var entityExtendedProps = pickerEntityXml.find("ArrayOfDictionaryEntry");


	var $peData = $pe.find("input[id$='hiddenSpanData']");
	var $peDisplayArea = $pe.find("div[id$='_upLevelDiv']");

	var displayData = "<span id='span{LoginName}' iscontenttype='true' tabindex='-1' class='ms-entity-resolved' contenteditable='false' title='{LoginName}'>" +
	" <div style='display:none;' id='divEntityData' key='{LoginName}' displaytext='{UserName}' isresolved='True' description='{LoginName}'>" +
	" <div data='{PickerEntityData}'></div>" +
	" </div>" +
	" <span id='content' tabindex='-1' contenteditable='false' onmousedown='onMouseDownRw(event);' oncontextmenu='onContextMenuSpnRw(event,ctx);'>{UserName}</span>" +
	"</span>";

	var pickerEntityData = convertFromXML(entityExtendedProps[0]);

	displayData = displayData.replace(/{LoginName}/g, entityProps.LoginName);
	displayData = displayData.replace(/{UserName}/g, entityProps.UserName);
	displayData = displayData.replace('{PickerEntityData}', pickerEntityData);

	$peDisplayArea.append(displayData);
	$peData.val(displayData);

	}

view raw

initPeoplePickerBox.js

hosted with ❤ by GitHub

	//Clear People Picker
	//peoplePickerId – SharePoint People Editor ClientID
	function clearPeoplePickerBox(peoplePickerId) {
	var $pe = $("#" + peoplePickerId);
	var $peData = $pe.find("input[id$='hiddenSpanData']");
	var $peDisplayArea = $pe.find("div[id$='_upLevelDiv']");
	$peDisplayArea.children().remove();
	$peData.val("");
	}

One thought on “Initializing SharePoint People Editor using JavaScript in SharePoint 2010”

YASP Blog