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)

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