0

I want to hide a column for a specific group permission on Display form.

I have found a jQuery code and I have tried to use it but the column still visible to the user that is on this particular group.

I added the code by:settings --> edit the page --> web part --> script editor.

Here is my code:

    <script
  src="https://code.jquery.com/jquery-1.10.1.js"
  integrity="sha256-663tSdtipgBgyqJXfypOwf9ocmvECGG8Zdl3q+tk+n0="
  crossorigin="anonymous"></script>
  <script type="text/javascript" 
  src="mysite/SiteAssets/jquery.SPServices.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;
       var flag = ($(xData.responseXML).find("Group[Name='Dev Site Add-ins Members']").length != -1);
       if (flag)
  {
         var feedbackField = $("input[title=Comments]");
         feedbackField.parent().parent().parent().hide();       
  }
     }
  });
});
</script>

Here is screenshot:

User exist in group

In this screenshot the comments column still visible for this user:

Comments column still visible

Any idea what I am doing wrong ?

Any help will be greatly appreciated.
Thank you!

  • The code you are using can be used to hide the column from new/edit form (observe the jQuery selector here: $("input[title=Comments]")). You cannot use the same selector in list view to hide the column. – Ganesh Sanap Nov 22 '19 at 12:28
1

Problem:

The code you are using can be used to hide the column from new/edit form (observe the jQuery selector here: $("input[title=Comments]")). You cannot use the same selector in list view to hide the column.

Solution:

Instead of:

var feedbackField = $("input[title=Comments]");
feedbackField.parent().parent().parent().hide();

Use this:

//To Hide Column Header
document.querySelector("div[name^='Comments']").parentElement.style.display = "none";

// To Hide all rows for the Comments column
var tdElementsNodeList = document.querySelectorAll("td[class^='ms-vb-lastCell']");
for(var i = 0; i < tdElementsNodeList.length; i++) {
    tdElementsNodeList[i].style.display = "none";
}

Note:

  1. In order to work this code you have to add comments column as a last column in list view.
  2. This code will break in Quick Edit mode. So, better you can disable quick edit mode.
| improve this answer | |
  • Hi @GaneshSanap, i have replaced my code with the following: here, i have tried to change the ID of column to the last one which is ID=36 but it doesn't take an effect when i reload the page it get back to ID=12, and i got this console error document.querySelector(...) is null which means that it should be the last column in list view to take effect. Any idea how to fix this? – SmithBZ Nov 22 '19 at 13:20
  • i have also tried the code on new list,the column hided but on all groups permissions not for a specific group.Also when i removed the code the "Comments" column has been deleted automatically, so it doesn't appear back after reloading the page. – SmithBZ Nov 22 '19 at 14:10
  • 1
    You need to inspect the elements and find out the correct selectors to use in your code. – Ganesh Sanap Nov 22 '19 at 14:24
  • 1
    This is something related to element selectors. You just have to find the right selector of the element you want to hide. check this, might help you: jQuery Selectors. – Ganesh Sanap Nov 26 '19 at 9:23
  • 1
    I'll post a new question regarding this thank you! – SmithBZ Nov 26 '19 at 9:26
1

I will advise you to use power apps to hide your fields:

PowerApps Form - Hiding fields from certain Users.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.