SharePoint 2016/2013: Exploring Client Side People Picker Control
People Picker control holds a well-known reputation in SharePoint Environment as being a reliable source of selecting SharePoint Users & Groups.
Since the current & recommended SharePoint Development strategies are pointing towards the Client Side Development Techniques, discussing Client Side counterpart of People Picker Control (Libraries) becomes much worthier.
In this demo, we will discuss the implementation details of the Client Side People Picker Control in Production Scenarios.
We developed this POC as a tool which is an addition to my toolset and often proves helpful to deal with investigating User Properties by Querying User Profile Service & and basic property set associated with this control.
To start with this demo we have added some of the UI elements as described below:
User Selection: This section will be having Client Side People Picker Control implementation which further allows user selection.
**User ID: **This section will display User ID of the selected User, which is a crucial piece of information while working out test scenarios.
**People Picker Properties: **This section will display the User Properties that can be retrieved from the People Picker Objects.
**User Profile Properties: **This section will display the User Properties that can be retrieved from the User Profile Service based on the selected User Account.
https://howtodowithsharepoint.files.wordpress.com/2016/12/1.png?w=800
In the next few screenshots, we can see the HTML laid down to implement this simple UI
Notice the Div with ID “ppOwner”, this will be the placeholder for the People Picker Control HTML replaced later on
https://howtodowithsharepoint.files.wordpress.com/2016/12/2.png?w=800
Div with ID “UserID” will hold the User ID information
https://howtodowithsharepoint.files.wordpress.com/2016/12/3.png?w=800
Div with ID “resolvedUser” will hold the People Picker Properties
https://howtodowithsharepoint.files.wordpress.com/2016/12/4.png?w=800
Div with ID “userProfileProperties” will hold the User Profile Properties for the selected user
https://howtodowithsharepoint.files.wordpress.com/2016/12/5.png?w=800
Let’s look at the code file that is implementing the logic behind this tool as described in below steps:
Step 1: Include all the JS files into your code as shown in the screenshot below.
Since these files are inter-referenced so the sequence here is critical. Make sure to include the files in the same sequence
https://howtodowithsharepoint.files.wordpress.com/2016/12/6.png?w=800
Step 2: “initializePeoplePicker” is a generic function that defines the schema settings for the Client Side People Picker control which defines the behavior of this control
Step 3: “registerPPOOnChangeEvent” is the function used to register events for People Picker Control
https://howtodowithsharepoint.files.wordpress.com/2016/12/7.png?w=800https://howtodowithsharepoint.files.wordpress.com/2016/12/8.png?w=800
Step 4: This step shows the registration of “OnControlResolvedUserChanged” Event that will fire every time a valid user is selected using the people picker control
**Step 5: **Once this event fired, it will make a call to “Execute” Function
https://howtodowithsharepoint.files.wordpress.com/2016/12/9.png?w=800
Step 6: Inside the “Execute” function we have to first create an object to People Picker Control. It is important to note the convention to write the code:
“this.SPClientPeoplePicker.SPClientPeoplePickerDict.” + <Enter ID of the people picker Div Element> + “_TopSpan”;
Based on this convention we have an object created as follows:
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.ppOwner_TopSpan;
Step 7: Once an object has been initialized we can call “GetAllUserInfo” function that will return a dictionary of User Properties in the form of Key & Values for each user selected in the People Picket (if multi-selection is enabled)
Step 8: Get each of the users from the dictionary and pass it to another function “getUserDetails” that will use this to further query User Profile Properties
**Step 9: **Retrieving the User ID out of properties dictionary and showing it in the User ID section
https://howtodowithsharepoint.files.wordpress.com/2016/12/10.png?w=800
**Step 10: **Calling User Profile REST End Point by passing user name with domain ([domainName]\userName]) from the Step 8
**Step 11: **If the REST Call is successful, pass the user properties collection to the **“renderUserDetails” **function to display all the properties in User Profile Properties Section
**Step 12: **If the REST Call is failed we can handle the exceptions in this callback function
https://howtodowithsharepoint.files.wordpress.com/2016/12/11.png?w=800
Step 13: “getUserId” function takes user name with domain ([domainName]\userName]) as input parameter. This function will return a promise that we are consuming in Step 9
https://howtodowithsharepoint.files.wordpress.com/2016/12/12.png?w=800
Step 14: “renderUserDetails” function takes user properties dictionary as input from Step 11, loop it through each of the dictionary entry and render the data in User Profile Properties Section
https://howtodowithsharepoint.files.wordpress.com/2016/12/13.png?w=800
And this is all for the code
In order to test the implementation, let's go back to the People Picker Page, select the required User you would like to look for
https://howtodowithsharepoint.files.wordpress.com/2016/12/14.png?w=800
On selection and if this user is valid (resolved) we will able to see the User Properties as shown below:
https://howtodowithsharepoint.files.wordpress.com/2016/12/15.png?w=800https://howtodowithsharepoint.files.wordpress.com/2016/12/16.png?w=800https://howtodowithsharepoint.files.wordpress.com/2016/12/17.png?w=800
That is all for this demo.