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 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") ;
// If the view is categorized , use this line, else comment it
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		
// If the view is categorized , use this line			
for (var c = 0; c < celllength; c++)
  rows[i].cells[c].bgColor = '#F4F4F4';

(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,


and comment the following line.

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';


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

The above javascript function is fully customizable like,
and the bgcolor values etc.

Dig Deeper on Lotus Notes Domino Administration Tools

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.




  • iSeries tutorials'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 ...