Introduction

Person or Group are important fields in SharePoint List and Library, and most developers face difficulties in getting and binding the details for the People Picker field.
In this article I have given samples on how to bind the user details, disable the field, show the custom error messages and empty the field, as these are the commonly used action item on People Picker field; I hope this article will help you in day to day developer activities in SharePoint JavaScript object model (JSOM).

Bind People Picker with Logged in User Name

The below sample code will help to bind the current logged in user details to the people picker field, this is the common functionality we will be using in the SharePoint Forms.
Steps to configure the JavaScript Code.
Or you can use script editor Web Part to include this code.
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
In this code on button click, we are binding current logged in user to Employee field.
  1. <script type = "text/javascript"
  2. src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" > < /script>
  4. < button type = "button"
  5. id = "btnGetDetails"
  6. style = "background-color: yellow; font-weight:bold" > Get People Picker Person Details < /button> <
  7. script type = "text/javascript" >
  9. // Field Name
  10. var fEmployee = "Employee";
  12. $(document).ready(function() {
  13. // Button Click
  14. $("#btnGetDetails").click(function() {
  15. BindPeoplePickerWithLoggedinUser(fEmployee);
  16. });
  17. });
  19. function BindPeoplePickerWithLoggedinUser(ppTitle) {
  20. setTimeout(function() {
  21. var _PeoplePicker = $("div[title='" + ppTitle + "']");
  22. var peoplePickerEditor = _PeoplePicker.find("[title='" + ppTitle + "']");
  23. var _PeoplePickerTopId = _PeoplePicker.attr('id');
  24. peoplePickerEditor.val(_spPageContextInfo.userDisplayName);
  25. var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
  26. ppobject.AddUnresolvedUserFromEditor(true);
  27. }, 1000);
  28. }
  29. </script>

Get Values from the People Picker Field

The below example will explain how to get the Person details from the People Picker Field using JavaScript in SharePoint.
Below are the steps to get the People Picker filed information using JavaScript (JSOM)
Steps
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
On button click we are getting the Reporting Manager Account Name, Email, and Display Name of the person using Person or Group field.
JavaScript Code
  1. <script type = "text/javascript"
  2. src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" > < /script>
  4. <button type = "button"
  5. id = "btnGetDetails"
  6. style = "background-color: yellow; font-weight:bold" > Get People Picker Person Details < /button> <
  7. script type = "text/javascript" >
  9. // Field Name
  10. var fRepMgr = "Reporting Manager";
  12. var pEmail;
  13. var pAccountName;
  14. var pValue;
  16. $(document).ready(function() {
  17. // Button Click
  18. $("#btnGetDetails").click(function() {
  19. GetPeoplePickerDetails(fRepMgr);
  20. alert("Account Name: " + pAccountName + "\nEmail: " + pEmail + "\nName: " + pValue);
  21. });
  22. });
  24. // Get the People Picker Field Details
  25. function GetPeoplePickerDetails(ppTitle) {
  26. var _PeoplePicker = $("div[title='" + ppTitle + "']");
  27. var _PeoplePickerTopId = _PeoplePicker.attr('id');
  28. var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
  29. editorsInfo = ppobject.GetAllUserInfo();
  30. if (editorsInfo.length > 0) {
  31. pAccountName = editorsInfo[0].Key;
  32. pEmail = editorsInfo[0].Description;
  33. pValue = editorsInfo[0].DisplayText;
  34. }
  35. return null;
  36. }
  37. </script>

Empty People Picker (Multiple Users)

The below sample code will help you to empty the Person or Group field using JavaScript code, this will enable multiple users also.
This will be helpful when we need Employee name changes to update his profile details.
Steps to configure the code,
This JavaScript code will loop through the people picker filed and remove entries from there.
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
JavaScript code
  1. // Field Name
  2. var fRepMgr = "Reporting Managers";
  4. $(document).ready(function(){
  5. // Button Click
  6. $("#btnGetDetails").click(function(){
  7. EmptyPeoplePicker("Reporting Managers");
  8. });
  9. });
  11. function EmptyPeoplePicker(peoplePickerId){
  12. var _PeoplePicker = $("div[title='" + peoplePickerId + "']");
  13. var _PeoplePickerTopId = _PeoplePicker.attr('id');
  14. var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
  15. var usersobject = ppobject.GetAllUserInfo();
  16. usersobject.forEach(function (index) {
  17. ppobject.DeleteProcessedUser(usersobject[index]);
  18. });
  19. }

Disable the People Picker Field

This is one of the commonly used functionalities in SharePoint development, I see most of the developers face issues in disabling the People picker field, below the is the sample code to make the field as read-only using JavaScript.
Steps to configure the JavaScript
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
JavaScript Code
  1. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  3. <button type="button" id="btnHide" style="background-color: yellow; font-weight:bold">Disable Manager People Picker Field</button>
  4. <script type="text/javascript">
  6. // Field Name
  7. var fRepMgr = "Reporting Manager";
  8. $(document).ready(function(){
  9. // Button Click
  10. $("#btnHide").click(function(){
  11. DisablePeoplePicker(fRepMgr)
  12. });
  13. });
  15. // Disable the SP People Picker using Field Name
  16. function DisablePeoplePicker(title){
  17. $("div.sp-peoplepicker-topLevel[title='" + title + "']").css('border', 'hidden');
  18. $("input.sp-peoplepicker-editorInput[title='" + title + "']").prop('disabled', true);
  19. $("div[title='" + title + "']").css('margin-left', '-5px');
  20. $(".sp-peoplepicker-initialHelpText").css('display', 'none');
  21. $(".sp-peoplepicker-delImage").css("display","none") ;
  22. $("div[title='" + title + "'] span").css('text-decoration', 'none');
  23. }
  25. </script>

Display Custom Error Message for People Picker Field

This is one of the most important functionalities in SharePoint, this sample will explain you how we can provide our custom error message for a People Picker field in out of box SharePoint list form.
Using this code we can display the error message below the people picker field as SharePoint out of box will work.
Steps to configure
This is the commonly used functionality for most of the developer, hope this will help.
People Picker Field Actions In SharePoint Using JavaScript (JSOM)
If we make Person or Group field mandatory, it will show message as ‘Field can’t be blank’, but using the below code we were able to show our custom message.
I hope this will help and simplifies your development.
JavaScript Code
  1. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  3. <script type="text/javascript">
  5. var fRepMgr = "Reporting Manager";
  7. function PreSaveItem() {
  8. // getting email address of the manager on presave
  9. var email = GetPeoplePickerEmail(fRepMgr);
  10. if(!email){
  11. // Reporting manager is empty, showing our custom error message
  12. var errorMsg = "Please provide Reporting Manager";
  13. PeoplePickerErrorNotification(fRepMgr, errorMsg);
  14. return false;
  15. }
  16. }
  18. // This funcation will displays the error message on below of People Picker field
  19. function PeoplePickerErrorNotification(ppTitle, message){
  20. var _PeoplePicker = $("div[title='" + ppTitle + "']");
  22. var ndiv = $('#ErrNotiDiv_' + ppTitle.replace(" ", ""));
  23. if(ndiv.length > 0){
  24. ndiv.remove();
  25. }
  27. $(_PeoplePicker).parent().append( "<div id='ErrNotiDiv_" + ppTitle.replace(" ", "") + "' style='color:#bf0000;'>" + message + "</div>" );
  28. }
  30. // This function will return the people picker email address
  31. function GetPeoplePickerEmail(ppTitle){
  32. var _PeoplePicker = $("div[title='" + ppTitle + "']");
  33. var _PeoplePickerTopId = _PeoplePicker.attr('id');
  34. var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
  35. editorsInfo = ppobject.GetAllUserInfo();
  36. if(editorsInfo.length > 0){
  37. return editorsInfo[0].Description;
  38. }
  39. return null;
  40. }
  42. </script>

Summary

I hope I have provided all commonly used code for Person or Group Field using JavaScript Object Model (JSOM), please provide your comments to improve this article.
Hope this article helps, Happy Coding!!