Easily Hide Columns on a SharePoint Form with jQuery

1 minute read

This is a really simple little thing. I end up writing little functions like this all the time, and never think much about them. But they are darn useful.

This little function will hide a list column’s row in the form. You might want to do this on a NewForm but not the EditForm, for instance, so setting the column to be hidden may not be a good answer. With this little function, you can hide the column’s row conditionally or on page load – whatever suits your fancy.

Here’s the function. All you need to pass it is the DisplayName of the column.

// Function to hide a column's row in the form
function hideColumn(c) {
  $(".ms-formlabel h3 nobr").filter(function() {
    var thisText = $.trim($(this).clone().children().remove().end().text());
 //   alert("::" + thisText + "::");
    return thisText.indexOf(c) === 0 && thisText.length === c.length;
  }).closest("tr").hide();
}

Then you might call the function like this:

$(document).ready(function() {
  hideColumn("Priority");
});

This will simply hide the column, but any value in it will still be submitted.

For instance, I just added a column to a list called “User Agent String”, set like so:

$("textarea[title='User Agent String']").val(navigator.userAgent);

and then hid it:

hideColumn("User Agent String");

Put it together and what have you got? (Bonus points to anyone who knows the next line in the song.)

$(document).ready(function() {

  // Set the User Agent String
  $("textarea[title='User Agent String']").val(navigator.userAgent);

  // Hide the columns which aren't relevant to the user
  hideColumn("User Agent String");

});

// Function to hide a column's row in the form
function hideColumn(c) {
  $(".ms-formlabel h3 nobr").filter(function() {
    var thisText = $.trim($(this).clone().children().remove().end().text());
 //   alert("::" + thisText + "::");
    return thisText.indexOf(c) === 0 && thisText.length === c.length;
  }).closest("tr").hide();
}
Advertisements

31 Comments

  1. I meant to ask, where and how would you insert this code. I am using office 365/SharePoint 2013. I have a site with document set, on the new form i want to hide a few fields and on edit form I want to be able to display them for edit. I hope to find some help. thanks for your time.

    Reply
    • lakman:

      Each Document Set Content Type has a “home page” called docsethomepage.aspx. It’s a Web Part Page, so you can add Web Parts to it. Using the Content Editor Web Part, you can add things like script or custom CSS. You should use the Content Link to point to a file containing your customizations for better maintainability.

      M.

      Reply
  2. I greatly follow many of your posts and has been very helpful. I would like to hide a column in a list that comes up with calculated value=[Me] basically the user id but as I have enforced unique value on the column and would not like user to know that upfront however would like to display such validation message saying duplicate entry etc. Any thoughts on how to achieve this. Would greatly appreciate any insight. Thank you!

    Reply
  3. I’m unable to get this to work with hiding a column for a Choice Field. I’m actually trying to just hide the section of the userform. I’ve tried the following and none of them work. I’m able to get Yes/No Checkboxes to hide without any problem using this syntax, but not choice fields. Anyhelp would be appreciated.

    $(“input[title$=’MyField’]”).closest(‘td’).hide();

    Reply
  4. How can I put this into the SharePoint 2013 “Quick Edit” list view to show and hide columns? And how can I do this for a number of columns and to be accessed on the same web part or wiki page by clicking a link or another element? I need to instantly show or hide columns in a list based on use choice.

    Reply
  5. Always love your articles. Typical case of I’m not a developer (designer myself) so always love it when developers help non-developers (and developers helping developers).

    Any chance you could add an example in of extending this to hide some columns depending on value selected in another? e.g. hide “user agent string” if a choice column called “profile” contained the value of user.

    And if anyone has examples with JSlink that would be great.

    Reply
    • @C M J:

      There’s no “formula” for this sort of thing. I could give you another specific example, but you’d probably need to tweak it. My suggestion would be to get familiar with CSS-style selectors (which is basically what jQuery uses) so that you can meet your specific needs.

      M.

      Reply
  6. Hi Marc! Thank You much, works great! :)

    p.s.: for SP Online 2013 (Calendar Edit/New form) – selector in my case was:

    jQuery(“.ms-formlabel span nobr”).filter(function()
    istead of
    jQuery(“.ms-formlabel h3 nobr”) for on-premise

    Best regards,
    Gennady

    Reply

Have a thought or opinion?