Easily Hide Columns on a SharePoint Form with jQuery
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();
}
bibbidi-bobbidi-boo
You win!
I use this all the time on calendar list forms to hide the workspace column. Very handy for that and other uses.
Oh and bibbibi bobbidi boo.
Marc,
(Responding here where I have more room to type :) )
On twitter, earlier today, I mentioned that $(this).text().trim() looked funny to me… and although you pointed to the indexOf() method not being correct, this particular code would fail on “older” browsers (<IE9).
jQuery's .text() method will return a javascript/EMAC native String object representing the text inside the specified element… from that point forward you are dealing with Javascript native objects (in this case a String) and not jQuery. So .trim() and .indexOf() above are actually methods of the String object and not jQuery.
This code will work only on browsers that support the Javascript/EMACS standard of 1.8.1 or higher. Running this code in IE8 will fail, because that browsers supports only the Javascript version up to 1.5. (http://en.wikipedia.org/wiki/JavaScript#Versions).
I have a working example here to demonstrate the problem: http://jsbin.com/isekel/1
Running this in IE8 will NOT show an alert (you can see there is a javascript error on the page)… in other browser levels it will show an alert() with "Hello World".
Although I would like to stop coding for Javascript version 1.5, I may not be able to do that just yet… several (specially in corporations) are still using IE8 (or older, sadly).
Paul.
Should have mentioned… the following approach will protect you in all browsers:
$.trim($(this).text()).indexOf(c) === 0;
What about if we use:
if (findFormField(“Date in Query”))
{
findFormField(“Date in Query”).closest(“tr”)[0].style.display=”none”;;
}
My sample column is Date in Query rather than User Agent.
Works in IE9, IE9 with IE8 and IE7 mode and some version of Chrome that I’ve also tested.
Where findFormField is the function that you wrote for taming long lists?
Can’t you use ShowInDisplayForm/ ShowInNewForm/ ShowInEditForm ?
http://msdn.microsoft.com/en-us/library/ms437580.aspx
Cristian:
Sure, if you want it to be the case pervasively. However, many times we want to show or hide a column based on the values in a given field or based on some user interation with the form. This script lets you do that during the page lifecycle.
M.
Thanks, Marc. I found a blog using SPServices on how to do that pervasively, also: http://blog.kodono.info/wordpress/2014/06/20/showhide-a-sharepoint-fields-in-the-newform-editform-and-dispform/
Found this article which uses SPServices and jQuery to Hide SharePoint List Columns based on User Permissions:
http://www.sharepointdiary.com/2013/07/hide-sharepoint-list-columns-based-on-user-permissions.html#ixzz2aB75sSMX
how and where do we apply this code?
I want to be able to use this type of code for a document set. i want to hide few columns on new Document Set and display them on Edit Form. Can you please guide through how to implement this code?
lakman:
Have you tried anything yet? You can find many posts about getting started with jQuery. I can’t tell you exactly what to do because I don’t know anything about your environment.
M.