Custom People Picker In SharePoint Online

Introduction 

For a SharePoint developer, creating custom forms to perform the CRUD operation on List items is a must-know task. During development, we may be stuck in some fields, such as giving ‘People Picker’ control over custom forms which shows the list of users from the Azure Active Directory of the SharePoint Tenant.

The reason behind this is that these fields have pre-defined column type in SharePoint, such as ‘Person or Group’ for OOTB People Picker column. We cannot simply put a text input box for this type of requirement.

Objective

Create a People Picker custom input field which will leverage the user profile information from SharePoint and Azure Active Directory using jQuery.

Process

1. Create a Person or Group column in SharePoint list and select Yes/No for ‘Allow Multiple Selections’ as per your requirement.
   
   
   
   Fig: Creating Person or Group column in SP site

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="_layouts/15/clienttemplates.js"></script>
   <script type="text/javascript" src="_layouts/15/clientforms.js"></script>
   <script type="text/javascript" src="_layouts/15/clientpeoplepicker.js"></script>
   <script type="text/javascript" src="_layouts/15/autofill.js"></script>

2. Include the following JavaScript references to your HTML file.
   

   <div>
       <label>User Name:</label>
       <div id="_UserName"></div>
   </div>

3. Create a <div> element with ‘id’ attribute for People Picker field. We will initialize the <div> tag with People Picker field which will display an input field.
   
   
   
   Fig: Initial view of the HTML form

4. Now, let us move to the JavaScript code.
   

   $(document).ready(function() {
       initializePeoplePicker("_UserName");
   });
   function initializePeoplePicker(peoplePickerElementId) {
       var schema = {};
       schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
       schema['SearchPrincipalSource'] = 15;
       schema['ResolvePrincipalSource'] = 15;
       schema['AllowMultipleValues'] = false;
       schema['MaximumEntitySuggestions'] = 50;
       schema['Width'] = '280px';
       this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
   }

5. Call a function on page load to initialize <div> tag with People Picker control.
   
   Fig: Code to initialize for Single selection People Picker
   

   $(document).ready(function() {
       initializePeoplePicker("_UserName");
   });
   function initializePeoplePicker(peoplePickerElementId) {
       var schema = {};
       schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
       schema['SearchPrincipalSource'] = 15;
       schema['ResolvePrincipalSource'] = 15;
       schema['AllowMultipleValues'] = true;
       schema['MaximumEntitySuggestions'] = 50;
       schema['Width'] = '280px';
       this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
   }

6. If we need to initialize the People Picker with Multiple selection, we will have to make a slight change in the code to achieve that:
   
   Fig: Code to initialize Multiple selection People Picker

7. After the initialization of People Picker, the HTML form control will change as shown below.
   
   
   
   Fig: HTML form showing People Picker Input Field

8. Now, the People Picker is initialized. Just type in the field, it will show the User Name from the Active Directory who has a SharePoint license assigned to their User Profile.
   
   
   
   Fig: People Picker showing User Name from SharePoint Tenant

9. As we have initialized this div for Single selection, it will automatically handle it if more than one name is entered.
   
   
   
   Fig: Showing error when more than one name is entered

10. Now that Initialization of People Picker is completed, let us see how to save the Name entered to the SharePoint List.
    

    function ensureUser() {
    var peoplePickerTopDivId = $('#_UserName').children().children().attr('id');
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerTopDivId];
    var users = peoplePicker.GetAllUserInfo();
    var arryuser = users[0];
    if(arryuser) {
        var payload = { 'logonName': arryuser.Key};
        $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/ensureuser",
            type: "POST",
            async:false,
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(payload),
            headers: {
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "accept": "application/json;odata=verbose"
            },
            success: function(data, status, xhr) {
               UserId = data.d.Id;
            },
            error: function(xhr, status, error) {
            }
        });
        }
        else {
            UserId = 0;
        }
    }

11. Call a function on button click to get the User Properties using REST API.
    
    Fig: Code to get User Properties from SharePoint tenant

12. In the above code, we are extracting User’s ID from SharePoint because the ‘Person or Group’ column saves the entries based on User ID and not the User Name or Email.
    
    
13. Trigger a POST REST call on the submit event to save the User Name in the list.
    

    $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('"+listname+"')/items",
            type: "POST",
            async: false,
            data: JSON.stringify({
                __metadata: {
                    type: "SP.Data.PeopleListItem"
                },
                UserNameId: UserId
            }),
            headers: {
                "Accept": "application/json;odata=verbose",
                "Content-Type": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "X-HTTP-Method": "POST",
            },
            success: function(data){
                alert("User Name is saved successfully");
            },
            error: function(error){
                alert(JSON.stringify(error));
           }
        });

    fig: REST POST call to save User Name

NOTE
We have created a column ‘UserName’, but we are saving the details in ‘UserNameId’.

If your column name is ‘ColumnName’, the column name to save User Name by ID will need to use ‘ColumnNameId’. The  Id at the end of the column name will tell SharePoint to save the User ID.

As I said earlier, ‘Person or Group’ type columns only saves ID, not Name or Email using custom code.