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.
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.
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.
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 = 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) {
-
- 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>
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.
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
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');
Ø 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;
- }