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

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

Script code

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

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

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

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

<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>

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

var data = $("Div[title='Account Holder Name'] > input").val();
var parsed = JSON.parse(data);
var AccountName = parsed[0].Key;
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

var data = $("Div[title='Account Holder Name'] > input").val();
var parsed = JSON.parse(data);
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

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;
}

6 Comments

Join the conversation! Your thoughts help the community grow.

Akash Kumhar8y ago
Good one...
Lu Oduro8y ago
Var parsed = JSON.parse(data); Don't Work for me i don't understand have you got an explication?
- Sagar Pardeshi8y ago
  Add the Jquery dependency Js files
Lu Oduro8y ago
Hello this don't Work for me with sharepoint 2013.
Piyush Agarwal8y ago
This is a nice article. Thanks
Humayun Kabir Mamun9y ago
Thanks Sagar for this nice article...