People picker in client side

Here, we need to know how to use people picker in client side.

Required JavaScript Library

The client side people works depends on multiples SharePoint JavaScript library,

1. <script src="/_layouts/15/sp.runtime.js"></script>  
2. <script src="/_layouts/15/sp.js"></script>  
3. <script src="/_layouts/15/1033/strings.js"></script>  
4. <script src="/_layouts/15/clienttemplates.js"></script>  
5. <script src="/_layouts/15/clientforms.js"></script>  
6. <script src="/_layouts/15/clientpeoplepicker.js"></script>  
7. <script src="/_layouts/15/autofill.js"></script>  
8. <script src="_layouts/15/sp.core.js"></script> 

Steps to Implement People Picker

Step 1

Refer the above JavaScript files in your page.

Step 2

Create a div tag in your page.

1. <div id=’peoplepicker’ /></div>  

Step 3

Initialize the people picker on page load 

1. $(document).ready(function() {  
2.     initializePeoplePicker(’peoplepicker’, false, ‘People Only’, 44);  
3.   
4.     function initializePeoplePicker(peoplePickerElementId, AllowMultipleValues, PeopleorGroup, GroupID) {  
5.         // Create a schema to store picker properties, and set the properties.  
6.         var schema = {};  
7.         schema['SearchPrincipalSource'] = 15;  
8.         schema['ResolvePrincipalSource'] = 15;  
9.         schema['MaximumEntitySuggestions'] = 50;  
10.         schema['Width'] = '280px';  
11.         schema['AllowMultipleValues'] = AllowMultipleValues;  
12.         if (PeopleorGroup == 'PeopleOnly') schema['PrincipalAccountType'] = 'User';  
13.         else schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';  
14.         if (GroupID > 0) {  
15.             schema['SharePointGroupID'] = GroupID  
16.         }  
17.         // Render and initialize the picker.  
18.         // Pass the ID of the DOM element that contains the picker, an array of initial  
19.         // PickerEntity objects to set the picker value, and a schema that defines  
20.         // picker properties.  
21.         this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);  
22.     }  
23. });   

Note - Usage of the parameters values

1. peoplePickerElementId(Text) - Id of the control.
2. AllowMultipleValues - Its used to define whether the control can allow multiple user or not.Possbile values are True or False.
   
   True - will allow to add multiple Users.
   False - will only allow single user.
3. PeopleorGroup(Text) - It’s used to define whether the control can allow users and groups are only user. Possible values are ‘PeopleOnly’or ‘PeopleAndGroups’
   
   PeopleOnly - will allow only user to add.
   PeopleAndGroups - will allow to add users and groups also.
4. GroupID(Int) : it’s used to define the users can add only from the specified group id. The possible values are 
   0 or any Group ID of the group
   
   0 - its allows to get users from any groups to add.
   Group Id - its allow to get users from specified group.

Get User values from the Control 

1. // Query the picker for user information.  
2. // PeoplepickerId = Id of the people picker  
3. function getUserInfo(PeoplepickerId) {  
4.     // Get the people picker object from the page.  
5.     var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplepickerId + "_TopSpan"];  
6.     if (!peoplePicker.IsEmpty()) {  
7.         if (peoplePicker.HasInputError) return false; // if any error  
8.         else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users  
9.         else if (peoplePicker.TotalUserCount > 0) {  
10.             // Get information about all users.  
11.             var users = peoplePicker.GetAllUserInfo();  
12.             var userInfo = '';  
13.             var promise = '';  
14.             for (var i = 0; i < users.length; i++) {  
15.                 UsersID += GetUserID(users[i].Key);  
16.             }  
17.             return UsersID;  
18.         }  
19.     } else {  
20.         return UsersID;  
21.     }  
22. }  
23. // Get the user ID.  
24. function GetUserID(logonName) {  
25.     var item = {  
26.         'logonName': logonName  
27.     };  
28.     var UserId = $.ajax({  
29.         url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/ensureuser",  
30.         type: "POST",  
31.         async: false,  
32.         contentType: "application/json;odata=verbose",  
33.         data: JSON.stringify(item),  
34.         headers: {  
35.             "Accept": "application/json;odata=verbose",  
36.             "X-RequestDigest": $("#__REQUESTDIGEST").val()  
37.         },  
38.         success: function(data) {  
39.             return data.Id + ';#' + data.Title + ';#';  
40.         },  
41.         error: function(data) {  
42.             failure(data);  
43.         }  
44.     });  
45.     return UserId.responseJSON.d.Id + ';#' + UserId.responseJSON.d.Title + ';#';  
46. }