Sometimes SharePoint PeopleEditor WebControl need to be initialized on the client side.
Initialize People Editor control
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); | |
} |
Clear People Editor control
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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(""); | |
} |
Pingback: Different ways of extending People Editor in the client side (SharePoint 2010) | Yet Another SharePoint Blog