Manage Learn to apply best practices and optimize your operations.

Alternate row colors/column colors for any sort of Web view (categorized & uncategorized)

There has been quite a few solutions to produce alternate row colors for a Web view.

There has been quite a few solutions to produce alternate row colors for a Web view. They all involve writing cluttered HTML in the column headings, treating view contents as HTML, or using agents, etc. But the following solution is purely a javascript function and has nothing to do with Domino view design. Part of this idea was derived from a posting in the notes.net site.

Step 1.) Create a view with few columns(Let it be uncategorized initially).

Step 2.) Embed the view in a form(Display as HTML).

Step 3.) Put the following code in the Onload event of the form.(Or have it as a function in the JS Header and call it in the OnLoad event).

var tableElements = document.body.all.tags("table");
var table = tableElements[tableElements.length-1];
var headlength=rowlength="";
heads = table.getElementsByTagName("th") ;
headlength=heads.length;
	
// If the view is categorized , use this line, else comment it
//headlength=headlength-1;
		
for( i = 0; i <headlength; i++)
  heads[i].bgColor = '#D2D2D2';
       
rows = table.getElementsByTagName("tr") ;
for( i = 0; i < rows.length; i++)
{
if(i % 2)
{
// If the view is not categorized , use this line		
celllength=rows[i].cells.length;	
// If the view is categorized , use this line			
//celllength=rows[i].cells.length-1;
		 	
for (var c = 0; c < celllength; c++)
  rows[i].cells[c].bgColor = '#F4F4F4';
}       
else
rows[i].bgColor='';
}

(The code is self explanatory. It gets the table element, changes the background color of the cells. The above code works fine for an uncategorized view.)

Step 4: For a categorized (single or many), uncomment the following lines,

//headlength=headlength-1;
//celllength=rows[i].cells.length-1;

and comment the following line.
//celllength=rows[i].cells.length;

This should work well for a categorized view.

Step 5 : To provide alternate column color effect, modify the for loop given below,

for (var c = 0; c < celllength; c++)
  rows[i].cells[c].bgColor = '#F4F4F4';

to,

for (var c = 0; c < celllength; c++)
if (c % 2)
  rows[i].cells[c].bgColor = '#F4F4F4';

The above javascript function is fully customizable like,
table.cellspacing='2'
table.cellpadding='2'
and the bgcolor values etc.
This was last published in April 2002

Dig Deeper on Lotus Notes Domino Administration Tools

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchDataCenter

SearchContentManagement

Close