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 that 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="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://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.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Hi Rajkiran, thanks for sharing this.
Where do you apply this code to hide the column? Is it in view formatting?
I am looking to hide certain columns, but want all users to add values to these columns in the form. Is this feasible?
Kind regards,
Jonas
Raj,
its not working on sharepoint online, i am getting error,
Operation undefined.
can you help me on this ?
Raj,Can you share the step by step details
Please inspect the element and get the exact name .. next replace it with above code …
Seems to work!
Anything that is not Javascript I’d be really interested to take a look 🙂
What does the “$(“select[title=Name]”).parent().parent().parent().hide(); ” .parent().parent()…. do ??
Visitors dont have access to NewForm and EditForm.aspx just Dispform.aspx
Enjoy Sharepoint is a perfect site for developers. Thanks a lot. and thanks rajkiran for shaing .
Thanks.