Different operations on SharePoint 2013 people picker

how to make people picker column read only sharepoint 2013
Check out Best Alternative to InfoPath


In this article I have explored different operations on SharePoint 2013 people picker like:
– How to show, hide or set people picker as read only?
– Get and set people picker item
– Get User Properties & basic property of people picker
– Ensure the user in People picker control.


Lot of people come across the same requirements in SharePoint people picker.
I developed this POC, often proves helpful to deal with investigating User Properties & basic property get associated with People Picker control. Also I explore hide and show people picker control from Sharepoint Default New and Edit list form.

How to show, hide or set people picker as read only?

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

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

Disable People Picker in List Form sharepoint 2013 using jQuery
Disable People Picker in List Form sharepoint 2013 using jQuery

Script code: $(“div[title=’Column Name’]”).hide();

: $(“div[title= ‘Account Holder Name’]”).hide();

Disable People Picker in List Form sharepoint 2013 using jQuery
Disable People Picker in List Form sharepoint 2013 using jQuery

Script code: $(“div[title= ‘Account Holder Name’]”).show();

hide people picker sharepoint 2013 list form jquery
hide people picker sharepoint 2013 list form jquery



Read-only People picker SharePoint:

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

get user properties from people picker using jquery
get user properties from people picker 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);

sharepoint 2013 get user properties from people picker using jquery
sharepoint 2013 get user properties from people picker using jquery

Get and set people picker item in SharePoint:

– Set People Picker Item: Set run time people picker value using jQuery In SharePoint, list’s default New/Edit form on the basis of current login username.

sharepoint 2013 ensure user people picker
sharepoint 2013 ensure user 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 2013 ensure user people picker using jQuery
sharepoint 2013 ensure user people picker using jQuery

SharePoint 2013 ensure user people picker using jQuery

Also you can read some SharePoint 2013 JavaScript object model article:

– Get People Picker Item: Get run time people picker value using jQuery In Sharepoint, list’s default New/Edit form on the basis of current login username.

how to make people picker column read only sharepoint
how to make people picker column read only sharepoint

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 from People picker

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

how to make people picker column read only sharepoint 2013

how to make people picker column read only sharepoint 2013Script:
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’);

http://localhost:12813/pc/



how to make people picker column read only sharepoint using jQuery
how to make people picker column read only sharepoint using jQuery

Ensure the user in People picker:

In People Control we can ensure user is exist or not in SharePoint list New and Edit Form

sharepoint 2013 people picker jquery
sharepoint 2013 people picker jquery

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


Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →