4

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.

4

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.

  • Not sure the issue, but when I tried the above, it gives me an error of "cannot read property SPClientPeoplePickerDict of undefined" – Ashish Oct 12 '17 at 9:10
  • 1
    @Ashish: I have updated the code. please check now. Earlier I was using pure client side people picker as mentioned in this article. docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/… – Yayati Oct 12 '17 at 10:31
  • Thanks a lot. It worked. I just had to remove the "this" keyword. – Ashish Oct 12 '17 at 13:06
  • To get the first people picker SPClientPeoplePicker.SPClientPeoplePickerDict[Object.keys(SPClientPeoplePicker.SPClientPeoplePickerDict)[0]].OnValueChangedClientScript=function (peoplePickerId, selectedUsersInfo) { console.log('inside OnValueChangedClientScript'); }; – Chris DS Sep 7 '18 at 9:24
3

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

A bit more detailed with Yayati's direction: enter image description here

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.