Loading tweets...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();
}
9 comments
Skip to comment form ↓
Daniel
November 30, 2012 at 12:49 am (UTC -4) Link to this comment
bibbidi-bobbidi-boo
Marc
November 30, 2012 at 7:32 am (UTC -4) Link to this comment
You win!
Nancy Skaggs
November 30, 2012 at 6:09 am (UTC -4) Link to this comment
I use this all the time on calendar list forms to hide the workspace column. Very handy for that and other uses.
Nancy Skaggs
November 30, 2012 at 6:09 am (UTC -4) Link to this comment
Oh and bibbibi bobbidi boo.
Paul Tavares
December 1, 2012 at 4:46 pm (UTC -4) Link to this comment
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.
Paul Tavares
December 1, 2012 at 5:22 pm (UTC -4) Link to this comment
Should have mentioned… the following approach will protect you in all browsers:
$.trim($(this).text()).indexOf(c) === 0;
Andrew
December 20, 2012 at 5:24 am (UTC -4) Link to this comment
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?
Cristian
March 11, 2013 at 1:19 pm (UTC -4) Link to this comment
Can’t you use ShowInDisplayForm/ ShowInNewForm/ ShowInEditForm ?
http://msdn.microsoft.com/en-us/library/ms437580.aspx
Marc
March 11, 2013 at 1:22 pm (UTC -4) Link to this comment
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.