Disable (Gray Out) Particular SharePoint List Columns Except Authorized Person In Quick Edit View Using JavaScript And Content Editor Web Part

Disable (Gray Out) particular SharePoint List columns except for the authorized person in quick edit view using JavaScript and Content.

Editor web part

Note

Download the attached zip file for graphical representation.

Problem Statement

Disable (Gray Out) particular SharePoint List columns (Request Status) in a quick edit view.

Solution

To solve this we first get the name of the person who logged in the SharePoint and then we will compare with the name of authorized person with whom we want to provide access to a particular column and then provide access if it matches to the logged name,

Create SharePoint List named “Employee Data”
Go to setting and rename title column as Emp ID and create columns as shown in below table

sr no

Column Name

Column Type

Description

1

Emp Id

Single Line of text

Rename Title column

2

Email

Single Line of text

3

Name

People Picker

4

Request Status

Choice

New, Pending, Approved, Rejected

Click on gear icon on the top left side of List and click Edit Page
List will open in edited mode, Click on Insert – Media and Content, then click on Add button
Click on Edit web part and paste path of JavaScript file which will create in site asset folder of same root site
Click on Apply then OK and then stop the page from editing

Note
Before clicking Apply Check the URL is working by clicking on Test Link provided in Content editor.
Create a file called quickedit.js in site asset folder and Paste the following code.

Note

(provide login name to whom you want to provide access as highlighted in yellow color in code)

< script type = "text/javascript" >
var loginName = "";
var userid = _spPageContextInfo.userId;
GetCurrentUser();
function GetCurrentUser() {
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 loginName = data.d.Title;
if (loginName != 'Your outlook display name to whom you want to give access') {
(function() {
var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.OnPreRender = function(ctx) {
var statusField = ctx.ListSchema.Field.filter(function(f) {
return f.Name === 'Request_x0020_Status';
});
if (statusField) {
statusField[0].AllowGridEditing = false;
}
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
} else {
// alert("Hello " + loginName + userid); }
}
}
function onError(error) {
alert(error);
} < /script>

sr no	Column Name	Column Type	Description
1	Emp Id	Single Line of text	Rename Title column
2	Email	Single Line of text
3	Name	People Picker
4	Request Status	Choice	New, Pending, Approved, Rejected