Monday, July 30, 2007

Domino View design Part1: Alternate row color

Simple javascript technique to control view display on web. This script executes after the view loaded on the page, this script make use of table, th, td, row objects to manipulate the style. Works well with standard view.

1.Create a $$ViewTemplateDefault form

2.Create a DIV tag with name "ViewBody"

3.Embed a view or create a $$ViewBody field

4.End the DIV tag



5.Copy paste the following javascript to the 'JSHeader' event of the form

// ALTERNATE ROW COLOR BUILDING
function transformView() {
var tableElements = document.all.ViewBody.getElementsByTagName('table');
var table = tableElements[tableElements.length - 1] ;
table.cellSpacing = '0' ;
table.border=1
headers = table.getElementsByTagName("th") ;
for( i = 0; i
headers[i].bgColor = '#cccccc' ;
}
rows = table.getElementsByTagName("tr") ;
var counter = 0
for( i = 0; i <>
rows[i].bgColor = (i % 2 ? '#efefef' : '') ;
}
}

6.Call the 'transformView()' function in the 'onLoad()' event of the form.

Domino view in browser:

1 comment:

Anonymous said...

function transformView() {
var tableElements = document.all.ViewBody.getElementsByTagName('table');
var table = tableElements[tableElements.length - 1];

table.cellSpacing = '0' ;
table.border = '1' ;

headers = table.getElementsByTagName("th") ;
for ( i=0; i<(headers.length); i++ ) {
headers[i].bgColor = '#cccccc'
}

rows = table.getElementsByTagName("tr") ;
for ( i=1; i<(rows.length); i++ ) {
rows[i].bgColor = (i % 2 ? '#efefef' : '') ;
}
}