SharePoint Client People Picker change event
Question
I am using the SharePoint:ClientPeoplePicker control in my custom SharePoint page and would like to fire a change event when a user is selected from the list of users. I can see that there are multiple div's, hidden form field, span's etc when the ClientPeoplePicker is rendered. I tried multiple things like:
$('input[id$="TopSpan_HiddenInput"]').on('change', function(){
alert('People Picker Value Changed');
});
$('span.sp-peoplepicker-resolveList').on('change',function(){
alert('People Picker Value Changed');
});
But none works. Here's my code for ClientPeoplePicker
<SharePoint:ClientPeoplePicker Required="false" ID="cppProjectManager" runat="server" Width="100%" Title="ProjectManager" PrincipalAccountType="User" Rows="1" AllowMultipleEntities="false" />
Any help would be appreciated.
Solution
There are multiple events which you can handle for a Client People Picker Control. You can find detailed descriptions of those events this blog.
To get the onChange of people picker, use following JavaScript snippet.
Event will get two parameters – first one is the people picker id and second parameter is an array of selected users.
This event will be fired if anything changes, like if user type text, user select a user from auto-fill list or user removes selected user. You can easily hook into the event as shown below:
Updated Code
SPClientPeoplePicker.SPClientPeoplePickerDict.ctl00_PlaceHolderMain_cppProjectManager_TopSpan.OnValueChangedClientScript=function (peoplePickerId, selectedUsersInfo) {
console.log('inside OnValueChangedClientScript');
};
Note : Check the client ID of people picker control by inspecting the HTML. Most probably it will be ctl00_PlaceHolderMain_cppProjectManager_TopSpan
.
OTHER TIPS
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 and Njoy!
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);
}
});