0

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.

3

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.

Example

You can access the entered user's information like this:

SPClientPeoplePicker.SPClientPeoplePickerDict[yourPickersID].GetAllUserInfo()

Example User Now every object has stored the properties of an user that was entered in the picker.

enter image description here

Here's an example for a group Example 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]);
    }
}

Output: enter image description here

  • This is using the SharePoint Object Model - not jQuery. – vapcguy Aug 24 '15 at 15:16
  • @vapcguy why would I use jQuery to access a global variable? – Mx. Aug 24 '15 at 15:19
  • Because that is what the OP wanted. And I was looking for the same thing, since where I work they frown on managed code due to having to involve the server team and downtime during the recycling of the app pool, etc. We're using SPServices to compare data on a form to a list (the logged-in user to the requestor of an item on a separate list). Getting the name in JavaScript is very helpful for that. – vapcguy Aug 24 '15 at 15:52
  • @vapcguy I don't think you understand - this solution is plain JavaScript. It is using the JS global Variable 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
  • @vapcguy copy and paste the added code in the browser console on a page where a peoplepicker is present // 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
1

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.

enter image description here

0

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:

  1. Using JSLink property
  2. Place JavaScript template on page via Script Editor/Content Editor web parts

Here is how to apply the changes using the second option:

  1. Switch the page into edit mode
  2. Add Script Editor webpart right below the list view web part.
  3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
  4. Save the page
0

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!

0

Try to find the related <div> in the People picker by ID:

var relateemail = document.getElementById('ID_UserField_upLevelDiv').innerText;
-1

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

  • 1
    The peoplepicker itself contains a lot of information. No need to request the userprofile. Keep also in mind, that the pplpckr can find a lot more accounts than the page knows. So its totally possible to get no results from REST. – Mx. Mar 26 '15 at 9:36
  • I need to get the value of an approver group vaule in a fucntion using jquery. – user1519872 Mar 26 '15 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.