I am trying to get the people picker value on EditForm.aspx using Jquery. I have 2 people picker controls on Edit form.
I am not able to get it using jquery.
Please help me to sort it out.
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It only takes a minute to sign up.
Sign up to join this communityI am trying to get the people picker value on EditForm.aspx using Jquery. I have 2 people picker controls on Edit form.
I am not able to get it using jquery.
Please help me to sort it out.
You can access normal peoplepicker in SP2013 the same way you would access a clientside one.
The Problem is, that you need to know the ID to identify the peoplepicker.
If you check out the SPClientPeoplePicker.SPClientPeoplePickerDict
object in your debugging console, there are all peoplepicker of this page stored in it.
You can access the entered user's information like this:
SPClientPeoplePicker.SPClientPeoplePickerDict[yourPickersID].GetAllUserInfo()
Now every object has stored the properties of an user that was entered in the picker.
Here's an example for a group
Here's some code to iterate over all picker and output all users to the console:
// get all user from all peoplepicker on the page - without jQuery
for (var propertyName in SPClientPeoplePicker.SPClientPeoplePickerDict) {
var allUserInfo = SPClientPeoplePicker.SPClientPeoplePickerDict[propertyName].GetAllUserInfo()
for (var user in allUserInfo) {
console.log(allUserInfo[user]);
}
}
SPClientPeoplePicker.SPClientPeoplePickerDict
created by SharePoint. There is no "jQuery-way" to access a variable. But I'll create a ready-to-run example just for you. Just wait for it.
– Mx.
Aug 24 '15 at 16:00
// get all user from all peoplepicker on the page - without jQuery for (var propertyName in SPClientPeoplePicker.SPClientPeoplePickerDict) { var allUserInfo = SPClientPeoplePicker.SPClientPeoplePickerDict[propertyName].GetAllUserInfo() for (var user in allUserInfo) { console.log(allUserInfo[user]); } }
:)
– Mx.
Aug 24 '15 at 16:18
You are smart when you have jQuery with you.
$('div[id$="_upLevelDiv"]').eq(2).find('div').eq(0).attr('description')
I have used index because I have more than two peoplePicker in my form.
I have captured the third $('div[id$="_upLevelDiv"]').eq(2)
people picker resolved value.
Since in SharePoint 2013 Client Side Rendering (CSR) is the default rendering mode, i would recommend you the following approach of getting People Picker value in Edit form.
Assume a Tasks
list that contains AssignedTo
field, then the following example demonstrates how to retrieve the value of AssignedTo
field in Edit form:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPreRender: function(ctx) {
var assignedTo = ctx.ListData.Items[0].AssignedTo;
}
});
});
Result
AssignedTo
value:
[
{
"Claim": null,
"Key": "Approvers",
"DisplayText": "Approvers",
"IsResolved": true,
"Description": "Approvers",
"EntityType": "",
"EntityGroupName": "",
"HierarchyIdentifier": null,
"EntityData": {
"SPUserID": "11",
"AccountName": "Approvers",
"PrincipalType": "User"
},
"EntityDataElements": [
{
"First": "SPUserID",
"Second": "11"
},
{
"First": "AccountName",
"Second": "Approvers"
},
{
"First": "PrincipalType",
"Second": "User"
}
],
"MultipleMatches": [],
"ProviderName": "",
"ProviderDisplayName": ""
}
]
How to apply the changes
There are at least two options how to apply the changes:
Script Editor
/Content Editor
web partsHere is how to apply the changes using the second option:
Script Editor
webpart right below the list view web part.script
tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
call the below fun inside document.ready ()
var mPplPickerName= getEditorPeoplePickerValues("your
pplpicker fieldname");
outside the doc.ready function:
function getEditorPeoplePickerValues(fieldName) { // Field Title
//alert(' inside get pplpicker sub function');
editorNames = "";
var _PeoplePicker = $("div[title='" + fieldName + "']");
var _PeoplePickerTopId = _PeoplePicker.attr('id');
var ppobject =
SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
editorsInfo = ppobject.GetAllUserInfo();
var i;
for (i = 0; i < editorsInfo.length; ++i) {
editorNames += editorsInfo[i].DisplayText + ";#";
}
//alert(editorNames);
return editorNames;
}
i have tested, its working for me!
Try to find the related <div>
in the People picker by ID:
var relateemail = document.getElementById('ID_UserField_upLevelDiv').innerText;
You have to take site users by REST query. Store all users in some variable. Then in aspx page, use auto complete functionality of jquery UI. You can use following REST query to fetch all users from site users
_spPageContextInfo.webAbsoluteUrl + "/_api/web/SiteUsers