How to get ClientPeoplePicker value using javascript

Question

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

Answer 1

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:

Update

This is the form field:

And this the tag you need to get the ID from:

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.

Answer 2

<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"
    }
    ]

*/

Answer 3

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

Answer 4

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);
    }
});