5

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.

Improve this question

3 Answers 3

Reset to default
7

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.

Improve this answer
4
  • Not sure the issue, but when I tried the above, it gives me an error of "cannot read property SPClientPeoplePickerDict of undefined" Commented Oct 12, 2017 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/… Commented Oct 12, 2017 at 10:31
  • Thanks a lot. It worked. I just had to remove the "this" keyword. Commented Oct 12, 2017 at 13:06
  • To get the first people picker SPClientPeoplePicker.SPClientPeoplePickerDict[Object.keys(SPClientPeoplePicker.SPClientPeoplePickerDict)[0]].OnValueChangedClientScript=function (peoplePickerId, selectedUsersInfo) { console.log('inside OnValueChangedClientScript'); }; Commented Sep 7, 2018 at 9:24
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 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); } });
Improve this answer
3

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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.