Hide empty columns in DispForm & EditForm – Javascript

Posted: February 5, 2010 in Custom Form, javascript, JQuery

Have you ever tried to hide the columns that are empty in a display form or Edit form. you don’t need to develop a custom page for this. A simple jQuery will do. Here is the code.

<script type=”text/javascript” src=”/Chanakya/Scripts/jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
$(“td.ms-formbody”).each(function(){
// Trim off all white spaces
var val = $(this).text().replace(/\s|\xA0/g,”);
// Check the string length – if it’s 0 hide the field
if(val.length==0){
$(this).parents(‘tr:first’).hide();
}
});
</script>


You can get the JQuery library file from here

Advertisements
Comments
  1. Steve says:

    Chanakya,
    I’d be grateful if you could give your getting started audience a few comments for how this script works. My guess would be that the td.ms-formbody is telling .each to perform a function that iterates through all of the elements in the form and that “$(this)” would be the current element whose value less any white space is being stored in a variable named val. /\s|\xA0/g, looks like a regular expression used to replace white space with emptyness, and finally it looks to me like the parent element of the element is hidden if the element is empty. I might also assume that this script counts on the fact that there will be only a one single element in each element in the DispForm and EditForm documents. This is my best guess, but I’d be grateful if you could comment on this.
    Thanks,
    Steve

  2. chanakya01 says:

    What you have said is right..
    It just searches for the string of length 0 in each td of the page & whenever it finds one it hides the whole tr..

    Hope this makes sense…

  3. Steve says:

    Why is ther only one quote character (”) in this line?

    var val = $(this).text().replace(/\s|\xA0/g,”);

  4. Brian says:

    Chanakya,

    To install the code you provided do you have to open the DispForm & EditForm in SharePoint Designer and insert the code?

    • Add a content editor webpart and add this code in it. You can edit the page in browser itself. If you don’t find edit page options in site actions menu, add the querystring value toolpaneview=2 in the browser URL..

      • Brian says:

        Got it. Thanks. I have inserted the code and webpart but it is still not working. When I add to the dispform page, the column displays and next to it the column is followed by field value. See below.

        Column A Column A field value.

        Any thoughts on how to get around this?

  5. […] Hide empty columns in dispform & editform – javascript […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s