SharePoint online Step-by-step: Client side People Picker control

  • Article

Introduction

In this post, we will discuss how we can use client-side People Picker control in SharePoint online Office 365? The same code will also work in SharePoint 2016 or SharePoint 2013.

Here in this particular example, we have taken a div whose id is "peoplePickerDiv" will render the people picker. In the document load, we are calling the initializePeoplePicker method which will initialize the people picker control.

Also, we need to make sure we will give the below js file references in the particular order.

We have also added "Get User Info" button on click of the button we are calling the getUserInfo() function which will return information about all the users from the people picker.

Here we will add the code inside a script editor web part which we will put on a web part page.

Full Code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="_layouts/15/strings.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>
<script type="text/javascript" src="_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>

 

<div id="peoplePickerDiv"></div>
 
<input type="button" value="Get User Info" onclick="getUserInfo()"></input>
<br/><br/>
        <h1>User info:</h1>
        <p id="resolvedUsers"></p>
        <h1>User keys:</h1>
        <p id="userKeys"></p> 
        <h1>User ID:</h1>
        <p id="userId"></p>

 

<script>
$(document).ready(function() {    
   initializePeoplePicker('peoplePickerDiv');  
    });  
    
   function initializePeoplePicker(peoplePickerElementId) {   
    // Create a schema to store picker properties, and set the properties.  
    var schema = {};  
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';  
    //This value specifies where you would want to search for the valid values
    schema['SearchPrincipalSource'] = 15;             
    //This value specifies where you would want to resolve for the valid values
    schema['ResolvePrincipalSource'] = 15;  
         schema['AllowMultipleValues'] = true;  
    schema['MaximumEntitySuggestions'] = 50;  
    schema['Width'] = '280px';   
    // Render and initialize the picker.  
   // Pass the ID of the DOM element that contains the picker, an array of initial   
   // PickerEntity objects to set the picker value, and a schema that defines  
   // picker properties.              
  this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);  
                          }
                        
   function getUserInfo() {
    // Get the people picker object from the page.
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
   // Get information about all users.
   var users = peoplePicker.GetAllUserInfo();
   var userInfo = '';
   for (var i = 0; i < users.length; i++) {
   var user = users[i];
 for (var userProperty in user) {
 userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
 }
 }
  $('#resolvedUsers').html(userInfo);
   // Get user keys.
  var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);
   // Get the first user's ID by using the login name.
   getUserId(users[0].Key);
  }
 // Get the user ID.
 function getUserId(loginName) {
 var context = new SP.ClientContext.get_current();
 this.user = context.get_web().ensureUser(loginName);
 context.load(this.user);
 context.executeQueryAsync(
 Function.createDelegate(null, ensureUserSuccess),
 Function.createDelegate(null, onFail)
 );
 }
 function ensureUserSuccess() {
 $('#userId').html(this.user.get_id());
 }
 function onFail(sender, args) {
 alert('Query failed. Error: ' + args.get_message());
 }
</script>

Once you Save the web part page, the people picker will appear like below. Once you put a user and click the button it will show details of the user.

https://www.enjoysharepoint.com/wp-content/uploads/2018/09/sharepoint-online-people-picker-client-side.png

References

https://msdn.microsoft.com/en-us/library/office/jj713593.aspx

You can see some useful articles:

Conclusion

Here we have discussed how to use client-side People Picker control in SharePoint Online Office 365? The same code will also work in SharePoint 2013 or SharePoint 2016.