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

In this blog, you will learn how to disable (Gray Out) particular SharePoint List columns (Request Status) in quick edit view.

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)
  1. < script type = "text/javascript" >  
  2.     var loginName = "";  
  3. var userid = _spPageContextInfo.userId;  
  4. GetCurrentUser();  
  5.   
  6. function GetCurrentUser() {  
  7.     var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";  
  8.     var requestHeaders = {  
  9.         "accept""application/json;odata=verbose"  
  10.     };  
  11.     $.ajax({  
  12.         url: requestUri,  
  13.         contentType: "application/json;odata=verbose",  
  14.         headers: requestHeaders,  
  15.         success: onSuccess,  
  16.         error: onError  
  17.     });  
  18. }  
  19.   
  20. function onSuccess(data, request) {  
  21.     var loginName = data.d.Title;  
  22.     if (loginName != 'Your outlook display name to whom you want to give access') {  
  23.         (function() {  
  24.             var overrideContext = {};  
  25.             overrideContext.Templates = overrideContext.Templates || {};  
  26.             overrideContext.Templates.OnPreRender = function(ctx) {  
  27.                 var statusField = ctx.ListSchema.Field.filter(function(f) {  
  28.                     return f.Name === 'Request_x0020_Status';  
  29.                 });  
  30.                 if (statusField) {  
  31.                     statusField[0].AllowGridEditing = false;  
  32.                 }  
  33.             }  
  34.             SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);  
  35.         })();  
  36.     } else {  
  37.         // alert("Hello " + loginName + userid); }  
  38.     }  
  39. }  
  40.   
  41. function onError(error) {  
  42.     alert(error);  
  43. } < /script>