API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
Alternate Row Colors
If you are opening up a view in a browser, not using the Java applet (because the Java applet takes so much longer to open, especially over a phone line) and wish to have alternate row colors (yes, Rnext does this, but this is for those of you not on Rnext yet) then this is one way to do it. There are several ways to accomplish this, so this is by no means the only way.

Insert a column at the far left of the view. Make sure the column does not have any sorting associated with it, or it will destroy the sorting in your column. The title of this column is:

[<script language=JavaScript>document.write('</tr><tr>');</script>]

You'll see in a minute why that's the column title. The formula for this column is:

"[<script language=JavaScript>document.write(\'</tr><tr\' + (" + @DocNumber + " % 2 ? \' bgcolor=b1dfff>\' : \'>\') + \' \');</script>]"

Note that there is both a string and a Notes formula in that line. Part of the string is some literal characters for JavaScript - that's why it looks a bit confusing.

Here's what's happening in the actual column formula. A string of text will be written to the browser. This string, for the first document in the view, will look like:

</tr><tr bgcolor=b1dfff> and for the second document in the view it will look like: </tr><tr>

There's a lot of JavaScript to just write that little bit of text there. What's happening in the JavaScript is that it writes out </tr><tr no matter what. Then, the plus sign tells JavaScript that the string that follows will be concatenated. The string that follows is a result of a JavaScript formula. The formula (enclosed in parentheses) says take some integer and divide it by 2 and get the remainder (either 0 or 1). If it's 1, then add the text bgcolor=b1dfff> to the string that we're writing. If it's 0, add the text > to the string that we're writing. Doing that all in parentheses is a quick JavaScript way of doing an "if/then/else" statement. The first part (before the question mark) is the statement to evaluate to a true/false value. Between the question mark and the colon is what to do if the statement is true and after the colon is what to do if the statement is false. After that bit a text is added to the line, then a single space is written.

Now, in every row on the table that Domino builds, we stop the row that Domino is generating and create our own row either with a background color or not (b1dfff is a light blue color). Since we're doing that, an extra empty cell will be written to the screen at the far left. It won't appear to the user because there's no value in it, but it will be there. This means that the column headings would be off by 1 column unless we stop and start that row, which is why the column title is the way it is. You could put a background on the column title if you want, but I chose in this example to leave it alone.

Note: Since this code is placed in the first column and the first column is (by default) the one that shows the links, the view will have no links unless you do something to have the links show. Choose the column you want to be "clickable" and set the column property "Show this column as links" as can be seen here.

Another Note: Since there's cellspacing and cellpadding that Domino generates for this table, there will be a slight gap in-between cells on the row that you've switched the color on. The only way around that is to not use a view and build all the HTML for the table yourself. But it doesn't look all that bad this way, so it's a decent solution. And the best thing is, once you have that column defined in one view, it's generic. This means that you can copy and paste that column to other views and do the same thing.

Final Note: If you're using this method in a categorized view, then @DocNumber will return a number with a decimal in it. This may not generate the results you expect, or may even cause an error, depending on the levels of categorization. If that is the case, then change your column formula to this:

"[<script language=JavaScript>document.write(\'</tr><tr\' + (parseInt(\"" + @DocNumber("_") + "\".substring(\"" + @DocNumber("_") + "\".lastIndexOf(\"_\")+1, \"" + @DocNumber("_") + "\".length)) % 2 ? \' bgcolor=b1dfff>\' : \'>\') + \' \');</script>]"

What that code is actually doing is looking at the very last value in the category. For top-level categories (or all documents, if no categorization is being used), then evaulate the entire document number. So you end up with alternate row colors within each individual level of categorization. This isn't quite the same as alternate row colors for every single row, but it's pretty close.