Different Operation On SharePoint People Picker

Introduction 

In this article I have explored different operations on Sharepoint people picker like:

  • Hide , show and set as Read-only people picker
  • Get and set people picker item
  • Get User Properties & basic property
  • Ensure the user

A lot of people come across the same requirements in Sharepoint people picker.

I developed this POC, which often proves helpful to deal with investigating user properties. Basic property gets associated with People Picker control. Also I explore hide and show people picker control from Sharepoint Default New and Edit list form.

Hide, show and set as read-only people picker

Here, using jQuery, we handle the hide, show, and set as read only people control without using SPUtitlity.

Hide and Show People Picker: In Sharepoint list, default New or Edit form on the basis of condition. Set people picker control as hide and show using jQuery.

SharePoint People Picker
Script code

  1. $("div[title='Column Name']").hide();  
  2. $("div[title= ‘Account Holder Name']").hide();  
SharePoint People Picker
Script code
  1. $("div[title= ‘Account Holder Name']").show();  
SharePoint People Picker
Read-only People picker

In Sharepoint list, default New or Edit form on the basis of condition; set people picker control as read-only using jQuery.

SharePoint People Picker
Script

  1. var data = $("Div [title='Account Holder Name'] > input").val ();  
  2.       var parsed = JSON.parse(data);  
  3.       var UserDisplayName = parsed[0].DisplayText;  
  4.       $("div[title='Account Holder Name']").hide();  
  5.       $("div[title='Account Holder Name']").after(UserDisplayName);  
SharePoint People Picker
Get and set people picker item

Set People Picker Item

Set run time people picker value using jQuery In Sharepoint, list default New/Edit form on the basis of current login username.

SharePoint People Picker
Script 

  1. <script>  
  2.         $(document).ready(function(){  
  3.             var userid = _spPageContextInfo.userId;  
  4.             var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";  
  5.             var requestHeaders = { "accept""application/json;odata=verbose" };  
  6.             $.ajax({  
  7.                 url: requestUri,  
  8.                 contentType: "application/json;odata=verbose",  
  9.                 headers: requestHeaders,  
  10.                 success: onSuccess,  
  11.                 error: onError  
  12.             });  
  13.   
  14.             function onSuccess(data, request) {  
  15.                 var Logg = data.d;  
  16.                 //var loginName = Logg.LoginName; //get login name  
  17.                 var loginName = data.d.LoginName.split('|')[1];  
  18.                 ExecuteOrDelayUntilScriptLoaded(function () {  
  19.                     setTimeout(function () {  
  20.                         SetAndResolvePeoplePicker("Account Holder Name", loginName);  
  21.                     }, 2000);  
  22.                 }, 'clientpeoplepicker.js');  
  23.   
  24.             }  
  25.             function onError(error) {  
  26.                 alert("error");  
  27.             }  
  28.              });  
  29. function SetAndResolvePeoplePicker(fieldName, userAccountName) {  
  30.        // alert(userAccountName);  
  31.         var _PeoplePicker = $("div[title='" + fieldName + "']");  
  32.         var _PeoplePickerTopId = _PeoplePicker.attr('id');  
  33.         var _PeoplePickerEditer = $("input[title='" + fieldName + "']");  
  34.   
  35.         userAccountName.split(";#").forEach(function (part) {  
  36.    if (part !== "" && part !== null) {  
  37.             
  38.             _PeoplePickerEditer.val(part);  
  39.             var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];  
  40.             _PeoplePickerOject.AddUnresolvedUserFromEditor(true);  
  41.    }  
  42.         });  
  43.   
  44.     }  
  45.     </script>  

SharePoint People Picker
Get People Picker Item

Get run time people picker value using jQuery In Sharepoint, list default New/Edit form on the basis of current login username.

SharePoint People Picker

Script 

  1. var data = $("Div[title='Account Holder Name'] > input").val();  
  2. var parsed = JSON.parse(data);  
  3. var AccountName = parsed[0].Key;  
  4. alert(AccountName);  

Get User Properties & basic property

Without using REST API, dynamically get People picker user, all types of User Properties & basic properties using jQuery

SharePoint People Picker

Script 

  1. var data = $("Div[title='Account Holder Name'] > input").val();  
  2.        var parsed = JSON.parse(data);  
  3.      alert('Account Name:-'+ parsed[0].Key +'\nDisplay Name:-'+parsed[0].DisplayText +'\nUser Name:-'+ parsed[0].Description +'\n -----User Properties-------\n'+parsed[0].EntityData.Title +'\n'+parsed[0].EntityData.Department+'\n'+parsed[0].EntityData.SIPAddress+'\n');  

SharePoint People Picker

 
 

Ø Ensure the user: In People Control we can ensure user is exist or not in Sharepoint list New and Edit Form

 
Script

  1. var data = $("Div[title='Account Holder Name'] > input").val();  
  2. var parsed = JSON.parse(data);  
  3. var isResolved = parsed[0].IsResolved;  
  4. if (isResolved == true) {  
  5.     return true;  
  6. else {  
  7.     $("Div[title='Account Holder Name']").after("User does not exist");  
  8.     return false;  
  9. }  

Up Next
    Ebook Download
    View all
    Learn
    View all