Hide SharePoint list columns based on user permissions

This SharePoint tutorial explains, hide sharepoint list columns based on user permissions using JavaScript. As we know Microsoft provided a powerful feature in SharePoint called Permission and group, we can easily manage our SharePoint site by using Out of box Permission and groups.

As we know Microsoft didn’t provide any out of box permission feature for list columns, so we will write a small piece of JavaScript code which will hide SharePoint online list columns based on user permissions.

Hide SharePoint list columns based on user permissions

The below are the steps to set permission to List column based on user groups.

In the below example, we will see how we can hide the Name list column from the form using JavaScript and SPServices code.

Step 1: Login to your SharePoint site and create a list as below image.

Step 2: The below is the code to hide your custom column for specific groups of user.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
 $().SPServices({
  operation: "GetGroupCollectionFromUser",
  userLoginName: $().SPServices.SPGetCurrentUser(),
  async: false,
  completefunc: function(xData, Status) {
  var xml = xData.responseXML.xml;
    if (xml.search('DHL Visitors') == -1)
     {                         
           $("select[title=Name]").parent().parent().parent().hide();          
       }  
    }
 });
});
</script>

Step 3: Next go to the NewForm.aspx and EditForm.aspx page -> Add a Script Editor WebPart in the both page. Next, add the below code inside it. When Visitors will login to the list they can’t see the specific Name field in both pages.

You may like following SharePoint customization tutorials:

• Retrieve and Display TASK status using REST API in SharePoint
• How to show/hide columns based on the value of SharePoint radio button
• Add JSLink in Task List View in SharePoint Online
• Create a Custom Calendar in SharePoint using Rest API and jQuery
• How to add Google Analytics in SharePoint Online
• Display SharePoint list data in jQuery data table using Rest API
• What is people picker and how we will use HTML Div as a People picker control in SharePoint Online?
• Add heading in the default newForm.aspx in SharePoint list using JavaScript and CSS
• Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript
• Change column ordering in list forms in SharePoint Online/2013/2016
• How to remove/hide default title column from SharePoint Online list (modern/Classic)
• HTTP Error 400 The size of the request headers is too long SharePoint Online Office 365

Hope this SharePoint tutorial helps to hide SharePoint online list columns based on user permissions using JavaScript code.