6

can anyone please tell me, How to get ClientPeoplePicker value using javascript.?

4
10

If you just need to access the values, you could do it like this:

var dispTitle = "APickerField";      
var pickerDiv = $("[id$='ClientPeoplePicker'][title='" + dispTitle + "']");      
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
peoplePicker.GetAllUserInfo();

The GetAllUserInfo() returns an array with one index pr entity in the picker, with the following properties available:

enter image description here

Update

This is the form field: enter image description here

And this the tag you need to get the ID from: enter image description here

APickerField_bec5d6be-a12e-4cfd-8046-558427c2687c_$ClientPeoplePicker

So one could just have done it like this:

SPClientPeoplePicker.SPClientPeoplePickerDict["APickerField_bec5d6be-a12e-4cfd-8046-558427c2687c_$ClientPeoplePicker"].GetAllUserInfo()

And if you check the SPClientPeoplePicker.SPClientPeoplePickerDict object, it will have all your pickers.

7
  • Thanks for your reply. i will try and let you know if it solves my problem – User5590 Jul 24 '14 at 7:05
  • I am getting error ' Unable to get property 'id' of undefined or null reference ' at peoplePicker line – User5590 Jul 24 '14 at 7:23
  • That's probably because it didn't find any controller. "APickerField" is the Display Title to the field, so you'll have to change that to the field you use, or get the reference by another method. – Anders Aune Jul 24 '14 at 7:44
  • Thanks for your help. Now its working. i have added client people picker programatically, so it was generating tag other way. then i updated my id to var dispTitle = "ASPD_Editors"; var pickerDiv = $("[id$='aspd_ctrl_ASPD_Editors_TopSpan'][title='" + dispTitle + "']"); And now finally its working. i almost wasted my 1 day on it. Thank you very much Anders. – User5590 Jul 24 '14 at 8:37
  • What if I want value of Department property? – Ashish Feb 15 '16 at 6:24
3
<pre>/* get value from clientPeoplePicker */

// value from first input field in client people picker div
var data = $("Div[title='Antragssteller'] > input" ).val(); 
var jsonData = JSON.parse(data);

// and now you can see the properties
alert(jsonData[0].DisplayText);
</pre>
/*
    [
    {
    "Key":"i:0#.w|xyz\\xyz",
    "Description":"xyz\\xyz",
    "DisplayText":"Doe, John",
    "EntityType":"User",
    "ProviderDisplayName":"Active Directory",
    "ProviderName":"AD",
    "IsResolved":true,
    "EntityData":
        {"Title":"",
        "MobilePhone":"",
        "SIPAddress":"",
        "Department":"",
        "Email":"xyz@xyz"
        },
    "MultipleMatches":[],
    "AutoFillKey":"i:0#.w|xyz\\xyze",
    "AutoFillDisplayText":"Doe, John",
    "AutoFillSubDisplayText":"",
    "AutoFillTitleText":"xyz@xyz\nActive Directory\xyz\\xyz",
    "DomainText":"xyz.local",
    "Resolved":true,
    "LocalSearchTerm":"xcv"
    }
    ]

*/
1
  • this is awesome! where were you a year ago when I needed this? i did it the long way but this is way better. – Ice Cube Mar 3 '20 at 23:58
0

You can use OnValueChangedClientScript property of ClientPeoplePicker as follows:

Markup:

<SharePoint:ClientPeoplePicker ID="peoplePicker1" runat="server" ClientModeOnValueChangedClientScript="peoplePicker1_ValueChanged" />

JavaScript:

var selectedUsers = []; function peoplePicker1_ValueChanged(elemId, userKeys) { if (elemId.indexOf('peoplePicker1') !== -1) { if (userKeys.length > 0) { for (var i = 0; i < userKeys.length; i++) { selectedUsers.push(userKeys[i]); } } else { selectedUsers = []; } } }

Reference: ClientPeoplePicker.OnValueChangedClientScript property

0

You need to get the picker id for SharePoint Client People Picker change event. I have got the same using OnUserResolvedClientScript as below. Here to get the picker div I have followed the approach of getting it via the people picker text box id and the title name which you can get the by inspecting the element. put the below code in $(document).ready function. Happy Coding


SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function() {
var pickerDiv = $("[id^='Employee_x0020_Name'][title='Employee Name']");
var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
picker.OnUserResolvedClientScript = function(peoplePickerId, selectedUsersInfo) {
 //It will get the desired display name of the people from picker div, similarly any other property can be accessed via selectedUsersInfo
    var empname = selectedUsersInfo[0].DisplayText;
    console.log(empname);
    }
});

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.