SharePoint : Different Operation On People Picker

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

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

We developed this POC, which often proves helpful to deal with investigating user properties. Basic property gets associated with People Picker control. Also, let's 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 the condition. Set people picker control as hide and show using jQuery.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image001.png Script code

$("div[title='Column Name']").hide();  
$("div[title= ‘Account Holder Name']").hide();

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image002.png Script code

1. $("div[title= ‘Account Holder Name']").show(); ** **

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image003.png 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.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image004.png Script

var data = $("Div [title='Account Holder Name'] > input").val ();  
 var parsed = JSON.parse(data);  
 var UserDisplayName = parsed[0].DisplayText;  
 $("div[title='Account Holder Name']").hide();  
 $("div[title='Account Holder Name']").after(UserDisplayName);

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image005.png

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.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image006.png Script 

<script>  
 $(document).ready(function(){  
 var userid = _spPageContextInfo.userId;  
 var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid("  + userid + ")";  
 var requestHeaders = { "accept":  "application/json;odata=verbose"  };  
 $.ajax({  
 url: requestUri,  
 contentType: "application/json;odata=verbose",  
 headers: requestHeaders,  
 success: onSuccess,  
 error: onError  
 });  
  
 function onSuccess(data, request) {  
 var Logg = data.d;  
 //var loginName = Logg.LoginName; //get login name  
 var loginName = data.d.LoginName.split('|')[1];  
 ExecuteOrDelayUntilScriptLoaded(function () {  
 setTimeout(function () {  
 SetAndResolvePeoplePicker("Account Holder Name", loginName);  
 }, 2000);  
 }, 'clientpeoplepicker.js');  
  
 }  
 function onError(error) {  
 alert("error");  
 }  
 });  
function SetAndResolvePeoplePicker(fieldName, userAccountName) {  
 // alert(userAccountName);  
 var _PeoplePicker = $("div[title='" + fieldName + "']");  
 var _PeoplePickerTopId = _PeoplePicker.attr('id');  
 var _PeoplePickerEditer = $("input[title='" + fieldName + "']");  
  
 userAccountName.split(";#").forEach(function (part) {  
 if (part !== ""  && part !== null) {  
  
 _PeoplePickerEditer.val(part);  
 var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];  
 _PeoplePickerOject.AddUnresolvedUserFromEditor(true);  
 }  
 });  
  
 }  
 </script>

•  

  http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image007.png 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.

  http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image008.jpg

  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

  http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image009.png

  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'); 

  http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/image010.png

   

   

  Ensure the user

  In People Control we can ensure user exists or not in Sharepoint list New and Edit Form

  http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/different-operation-on-sharepoint-people-picker/Images/peoplpickerva.JPG 

  Script

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