SharePoint Online - Client Side People Picker – JavaScript

Following code sample is an example of how to use People Picker controls in a SharePoint online custom form. Just add a Script Editor webpart to a page and add following code. Hitting ‘Test on Console’ button will log selected people’s names in the browser console.

In addition to name, there are other properties that you can directly use as shown in the following image.

Complete code to place in the Script Editor webpart:

< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

< script src ="/_layouts/15/SP.Runtime.js"></script>

< script src ="/_layouts/15/sp.js"></script>

< script src ="/_layouts/15/1033/strings.js"></script>

< script src ="/_layouts/15/clienttemplates.js"></script>

< script src ="/_layouts/15/clientforms.js"></script>

< script src ="/_layouts/15/clientpeoplepicker.js"></script>

< script src ="/_layouts/15/autofill.js"></script>

< script src ="/_layouts/15/SP.Core.js"></script>

 

< div >

  <p><span>On behalfof:</span></p>

  <divid="peoplePickerDivOnBehalfOf"></div>

  <p><span>ApproverName:</span></p>

  <divid="peoplePickerDivApprover"></div>

 

  <inputtype="button"value="Test in Console" onclick =" ViewFieldData ( )"/>

</div>

 

<scripttype ="text/javascript">

$(document).ready( function() {

 

// Initialize People Pickers after loading clientpeoplepicker.js file.

SP.SOD.executeFunc( "/_layouts/15/clientpeoplepicker.js","SP.ClientContext",function() {

setTimeout( function() {

initializePeoplePicker( 'peoplePickerDivApprover');

initializePeoplePicker( 'peoplePickerDivOnBehalfOf');

}, 2000);

});

});

 

  // Render and initialize the client-side People Picker.

  function initializePeoplePicker(peoplePickerElementId) {

// Create a schema to store picker properties, and set the properties.

   var schema = {};

schema[ 'PrincipalAccountType'] ='User,DL,SecGroup,SPGroup';

 

// To specifies where you would want to search for the valid values

schema[ 'SearchPrincipalSource'] = 15;

 

// To 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 ViewFieldData() {

var peoplePickerApprover=this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDivApprover_TopSpan;

var peoplePickerOnBehalfOf=this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDivOnBehalfOf_TopSpan

//var keysApprover = peoplePickerApprover.GetAllUserKeys();

//var keysOnBehalfOf = peoplePickerOnBehalfOf.GetAllUserKeys();

 

// Read the first person selected

var userApproverText='';

var userApprover = peoplePickerApprover.GetAllUserInfo();

if (userApprover.length > 0) {

var userA=userApprover[0];

 

// Read DisplayText property. There are few other properties available too

userApproverText = userA.DisplayText;

}

 

// Read all people selected

var userOnBehalfOfText='';

var userOnBehalfOf = peoplePickerOnBehalfOf.GetAllUserInfo();

if (userOnBehalfOf.length > 0) {

for ( var i = 0; i < userOnBehalfOf.length; i++) {

var userB = userOnBehalfOf[i];

 

if (i == 0) {

userOnBehalfOfText += userB.DisplayText;

} else{

userOnBehalfOfText += ( '; '+userB.DisplayText);

}

}

}

 

console.log( "Approver: "+userApproverText);

console.log( "On behalf of: "+userOnBehalfOfText);

  }

</script>