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”):
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:
And your DispForm like this:
Add a CEWP below your DispForm list-form like this:
With this code:
<script type="text/javascript" src="/test/English/Javascript/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>
Now your DispForm should look like this:
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
October 16, 2009 at 10:34 am |
Nice, this can be useful for lists wiht many columns for ex. Thanks Alexander!
– http://www.sharepointdesigners.net –
November 2, 2009 at 4:13 pm |
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
November 2, 2009 at 5:02 pm |
Hi,
Not sure if this does any difference, but try to change line 8 like this
(this).parents('tr:first').remove();Alexander
November 23, 2009 at 5:09 pm |
Hi Alexander,
Do you know how I can hide certain fields in DispForm? Not necessarily empty fields, but fields I don’t want the public to see at all.
Thank you!
November 23, 2009 at 6:22 pm
Hi,
Have you looked at this article:
Dynamic expand/collapse fields or array of fields.
In this code you should find your answer – if not, let me know and i will show you.
Alexander
November 23, 2009 at 8:55 pm |
Hi,
That’s almost what I need, except that I don’t need the rule to be conditional. There are some fields that I don’t want them to appear at all.
Thanks
November 23, 2009 at 9:23 pm
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
November 23, 2009 at 10:29 pm |
It just works! Thank you Alexander!