Hide empty rows in DispForm

17.06.2010 Updated code to support this heading script: Headings in SharePoint Forms – jQuery

Have you ever wanted to hide rows from your DispForm if they are empty?

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

To begin with NewForm looks like this:
IMG

And your DispForm like this:
IMG

Add a CEWP below your DispForm list-form like this:
IMG

With this code:

$("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 it is not a heading - hide it
	if($(this).parents().html().match('FieldName="#H#')==null){
		if(val.length==0){
			$(this).parents('tr:first').hide();
		}
	}
});

Now your DispForm should look like this:
IMG

If you want to hide the table row based on other criteria, adapt the check in line 7 to fit your need – either it’s by length or it’s by string comparison.

Regards
Alexander

67 Comments on “Hide empty rows in DispForm”

  2. Hi Alexander:
    I am using this “Hide” script on many DispForms and it’s a godsend!

    Do you know if the script can be changed to be able to print to PDF and still hide the blanks fields? If I use the browser print function, the fields are hidden but if I print to PDF, the hidden fields appear.

    Thanks-

    Charlie Epes

    1. Hi,
      I trimmed off the excess code:

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Initiate fields to make object that can ge referenced by it's FieldInternalName
fields = init_fields();

// Arrays of fields to hide
var arrToHide = ['YourFieldNr1','YourFieldNr2'];
// Loop trough and hide fields
for(i=0;i<arrToHide.length;i++){
	$(fields[arrToHide[i]]).hide();
}

function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>

      Alexander

    1. Hi Thiago,

      I have tried this script provided by alex but nothing is hidden :s
      anything u can mention which you might have changed in the script or smt to be carefl about
      also, did u use this scrit in the add and edit forms

      Thanks in advance
      Julia

  7. Alexandar, i’ve been using a lot of your example and they are great! I’m having a hard time making this work in DispForm.aspx.

    I’ve got a lookup column in the newform, but don’t know how to obtain the value in the dispform.

    I want it to be like this…

    If lookupfield = “New” then
    hide field1
    hide field2

    If lookupfield = “Old” then
    show field1
    show field2

    Can you help me with that?

    1. Hi,
      To get the value from a field in DispForm (replace “Dummy2” with the FieldInternalName of the field):

      var fieldVal = $(fields["Dummy2"]).find(".ms-formbody").text();
alert(fieldVal);

      Alexander

    2. Alexandar… I’ve tried a number of combinations of code and it isn’t creating an alert… I can’t paste the code as it doesn’t seem to go through and show up on the comments.

    3. Maybe this will work without the greater than less than

      script type=”text/javascript” src=”/Documents/JavaScript/jquery-1.3.2.min.js”/script
      script type=”text/javascript”>

      var fieldVal = $(fields[“Category”]).find(“.ms-formbody”).text();
      alert(fieldVal);

      /script

  8. Alexander

    I tried this below, and it doesn’t work. I’ve also tried a number of combinations… (I know i’m the URL to jquery is corect as it is working fine in other code i’m doing.

    var fieldVal = $(fields[“Category”]).find(“.ms-formbody”).text();
    alert(fieldVal);

    1. Sorry, i have not given you the full story here. The function init_fields() were not included in the example…

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Initiate fields to make object that can be referenced by it's FieldInternalName
fields = init_fields();

var fieldVal = $(fields["Dummy2"]).find(".ms-formbody").text();
alert(fieldVal);

function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>

      Read here how to post code in comments

      Alexander

    2. Thank you! Your code works great and displays exactly correct in the message box, but I can’t get it to work in an if statement… I’ve tried it two ways.

      1

      <script type="text/javascript" src="Documents/JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Initiate fields to make object that can be referenced by it's FieldInternalName
fields = init_fields();

var fieldVal = $(fields["Category"]).find(".ms-formbody").text();
if(fieldVal=="New User");
    alert("New User is actually selected");


function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>

      2

      <script type="text/javascript" src="Documents/JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Initiate fields to make object that can be referenced by it's FieldInternalName
fields = init_fields();

var fieldVal = $(fields["Category"]).find(".ms-formbody").text();
if(fieldVal=="New User"){;
   alert("New User is actually selected");
   };


function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>

    3. You came close with number 2. Modify the if statement like this:

      var fieldVal = $(fields["Category"]).find(".ms-formbody").text();
if(fieldVal=="New User"){
   alert("New User is actually selected");
}

      Alexander

    4. I appreciate all your help… Unfortunately it still doesn’t work.. I’m making sure everything is case sensitive and still no pop up is displayed. I’ve added alert(fieldval) and it does display “New User” without the quotes, but the other alert “New User is actually selected” never displays…

    5. There must be some whitespace behind the value, try to alert it like this:

      var fieldVal = $(fields["Category"]).find(".ms-formbody").text();
// Check for whitespace
alert("-"+fieldVal+"-");
// try to trim off whitespace
alert("-"+$.trim(fieldVal)+"-");

      Alexander

    6. This code should work:

      <script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();

var fieldValRaw = $(fields["Category"]).find(".ms-formbody").text();
var fieldVal = fieldValRaw.replace(/[ xA0]+$/,'');
if(fieldVal=="New User"){
   alert("New User is actually selected");
}

function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>

      Alexander

  10. Alex, the solution you provided for Brandon to display the value of a field in dispForm.aspx worked for me too. You are simply awesome. Thank you for helping all of us. Keep up the good work.

  12. Is there a way to modify the code so that in addition to hiding all empty fields, it also hides fields that have a field internal name that starts with two dash characters “–” (even if that field contains data).
    $(“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();
    }
    });

  13. Hi,

    When combining this functionality with the “headings” script the headings get hidden since they are blank :(.

    Can we overcome this by hiding all blank fields except the ones with specific field name (or the ones that start with #H# for your first headings method), and if so how?

    Thanks in advance,
    Kat

    2. Hi Alexander, I wasnt very clear. I have a Yes/No checkbox box on the form and I want to it hide when set as ‘no’ (not checked). What additional code do I need to add on line 7 as it is currently visible on the DispForm even when all other empty fields are hidden?

      Thanks

    3. Hi,
      The Yes/No check box is special in the way that NOT selected results in a “No” and not an empty string.

      Adapt line 7 like this:

      if(val.length==0 || val=='No'){

      Alexander

  18. I’m back to bug you again. I am having a few issues trying to modify your scripts. Your scripts work fine as designed, it is only when I am trying to modify. for this one I have tried to using with the new accordian script, but it will not hide the empty fields. I added an alert to return the val, and I get a blank alert for each empty field but it will not hide. So I changed the one line to this
    [sourcecode]
    if(val.length==’null’ || val.length==0 || val.length==’ ‘){

    still no luck, so I am guessing it has something to do with how the fields are returned with the accordian script. Any hints? This is not a deal breaker but would be helpful.

    1. I am so sorry. I figured it out again. It was the script order. If I put the hide empty fields after the accordian it worked. Sorry to bother.

  19. I got this to work on my site… however it also my hides my Picture field (I am using this on a Contact list). I think I just need an If statement right before for the hide command checking to see if the FieldName is “Picture”. I can seem to figure out the correct syntax to do this. Any help would be greatly appreciated.

  20. Hi!

    The script works perfect. But i need some change. I want to leave one specific row (we name it ‘Zugewiesen’ be visible, even if its empty. How can this be done?

    thanks

    1. Hi, Sorry for the late reply, but if you still look for the answer:

      $("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($(this).parents().html().match('FieldName="#H#')==null && $(this).parents().html().match('FieldInternalName="Person"')==null){
		if(val.length==0){
			$(this).parents('tr:first').hide();
		}
	}
});

      Alexander

  21. Hi Alexander,

    The script is not working for me. I have copied the source to a text file, uploaded to a document library and copied the location of the file and pasted inside a content editor web part on the editdispform. I am using SharePoint 2010. Does that matter at all? Do I need to add the jquery library reference above the first line of code?

    $(“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 it is not a heading – hide it
    if($(this).parents().html().match(‘FieldName=”#H#’)==null){
    if(val.length==0){
    $(this).parents(‘tr:first’).hide();
    }
    }
    });

    1. Hi,
      You should wrap it like this:

      <script type="text/javascript" src="/Script/jquery-1.7.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 it is not a heading - hide it
	if($(this).parents().html().match('FieldName="#H#')==null){
		if(val.length==0){
			$(this).parents('tr:first').hide();
		}
	}
});
</script>

      Change the script “src” to the jQuery file.

      Alexander

  23. Hi Alexander,
    I was trying to customize your script to only hide a with 0 characters after a “:” character. This is because my field names are showing, so even if the field value was left blank, there is still the field name text in the . I tried the script below but it is not working. Do you have any suggestions or corrections to my code?

    $(“td.ms-vb-tall”).each(function(){
    var val = $(this).text().replace(/s|xA0/g,”);
    var afterSemi = val.substr(val.indexOf(“:”) + 1);
    if(afterSemi.length==0){
    $(this).parents(‘tr:first’).remove();
    }
    });

    1. Just a follow up to my post…some of my text did not post so it does not read correctly… an updated post below…

      I was trying to customize your script to only hide a tr with 0 characters after a “:” character. This is because my field names are showing, so even if the field value was left blank, there is still the field name text in the td. I tried the script below but it is not working. Do you have any suggestions or corrections to my code?

      $(“td.ms-vb-tall”).each(function(){
var val = $(this).text().replace(/s|xA0/g,”);
var afterSemi = val.substr(val.indexOf(“:”) + 1);
if(afterSemi.length==0){
$(this).parents(‘tr:first’).remove();
}
});

  24. Hi Alexander,

    you have a error in your regular expression,

    in line 3 you have:
    var val = $(this).text().replace(/s|xA0/g,”);

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

    Anyway, do you any code to do the same in editform.aspx?

    1. Hi,
      I have fixed the regex – thanks.

      To do something like this for EditForm, you must refer spjs-utility.js and use a code like this:

      var fields = init_fields_v2();
$.each(fields,function(fin,tr){
  if(getFieldValue(fin) === ""){
    $(tr).hide();
  }
});

      This is written “freehand” and not tested, but should work for text / choice columns.

      Alexander

  25. Hi Alex
    many thanks for the script and explanations
    I have tried using the script provided to hide the empty rown on the display page, but all the fields and headers disappeared, even the ones which had content..would you have an idea of why am I getting that behavior

    Also,if I wanna use one of your scripts on the edit or add forms, would I have to change something?

    Thanks in advance
    Julia

  26. hi Alex

    I found this slightly similar code on another side which worked well:

    $(document).ready(function() {

    $(“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 it is not a heading – hide it
    if($(this).parents().html().match(‘FieldName=”#H#’)==null){
    if(val.length==0){
    $(this).parents(‘tr:first’).hide();
    }
    }
    });
    });

    Can you please point out and explain why this one worked and the one we have here didn’t..i would like to understand why so as to be able to use correctly the rest of the scripts u are providing on your side

    Many thanks in advance

    1. Hi,
      The reason the last one worked must have to do with the wrapping with $(document).ready.

      I suspect your CEWP is not placed below the form web part? – this would explain why the first one did not work and the second did.

      This code will never work in NewForm or EditForm as all it does is to look at the text in the “td” – and if empty – hide the row.

      Alexander

  27. Thanks Alex for the response
    the CEWP was below the web part in both cases..
    when I didn’t have the wrapping with $(document).ready , all fields and header disappeared, that’s what I found weird
    also, when I try the other scripts, even with the wrapping with $(document).ready, I don’t get the expected behavior…would it have smt to do with the fact that I am sharepoint online?

    Also, can you please point out to how to adopt the scripts for add & edit if possible
    Thank You
    Julia

  28. Not sure if this will be useful to somebody, but this is what I had resorted to for hiding fields conditionally..Unfortunately the above didn’t work for me 🙁 I wish it did so as I couldreadily use the rest of the scripts

    $(document).ready(function(){

    var selected = $(“select[title = ‘Field1’]”).val();
    if(selected == “scheduled”) {

    $(“TABLE.ms-formtable>TBODY>TR:eq(2)”).css(‘display’, ‘none’);
    }
    });

  29. Thanks Alex , much appreciated !

    I wanted to see if you would have an idea how to resolve the following
    “I am uploading a script on a CEWP which uses JQUERY. The code does not execute on the first time It is loaded in IE. as pop up bow appears at the bottom of the page pormting the end user if he wants to allow blocked content..only when checked, that the page reloads..and the script gets executed

    Is there a way to avoid this and have the blocked content enabled form the start”

    Thanks !
    Julia

      1. That did it!..i was an HTTP link..now I am using a protocol-relative url.

        Thank you one more time Alex ! highly appreciate your prompt response and help

        Julia

  30. Hi,Alexander Bautz
    I have tried the below script to hide the column in dispform.aspx which is null value but didn’t work.

    $(document).ready(function() {

    $(“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 it is not a heading – hide it
    if($(this).parents().html().match(‘FieldName=”#H#’)==null){
    if(val.length==0){
    $(this).parents(‘tr:first’).hide();
    }
    }
    });
    });

    Also tried without $(document).ready(function() {

    it also not works , I have added script into txt file and give link into CEWP.

    Pls help

      3. Yes, I have added the following script which you have mentioned.

        $(“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 it is not a heading – hide it
        if($(this).parents().html().match(‘FieldName=”#H#’)==null){
        if(val.length==0){
        $(this).parents(‘tr:first’).hide();
        }
        }
        });
        });

        But it doesn’t work in dispform.aspx

      5. Yes, the script was working now after creating the customize form of display from.

        I think the script will work under the customize form

  31. Hi Alexander,

    Thank you for this wonderful post!
    Unfortunately, the code ain’t working for me…

    I tried to implement it on SP 2010 dispform.aspx

    I added this code in a CEWP under the list WP in dipform.aspx

    $(“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 it is not a heading – hide it
    if($(this).parents().html().match(‘FieldName=”#H#’)==null){
    if(val.length==0){
    $(this).parents(‘tr:first’).hide();
    }
    }
    });

    Is there’s something I’m doing wrong?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.