Hide empty columns in DispForm & EditForm – Javascript

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”>
// Trim off all white spaces
var val = $(this).text().replace(/\s|\xA0/g,”);
// Check the string length – if it’s 0 hide the field

You can get the JQuery library file from here


8 thoughts on “Hide empty columns in DispForm & EditForm – Javascript

Add yours

  1. 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.

  2. 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. Why is ther only one quote character (”) in this line?

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

  4. Chanakya,

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

    1. 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..

      1. 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?

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

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: