Let's say you have a view of support tickets that are awaiting processing. The older the ticket gets the more important it is that somebody does something about it.

How do we convey this to the user though? Well, there's various methods, but yesterday I came up with a new way, which I think you'll like. Imagine each row of the view is a varying shade of red, based on the document's age. The older the document the redder the row.

You can see an example of this in the screen-grab to the right and in this DEXT demo page. On the demo page you'll need to scroll down to see it in effect.

How Does It Work?

In terms of CSS this works by virtue of the fact you specify a colour as three numeric values representing the mix of red, green and blue. You might be used to seeing something like this:

<tr style="background-color:#ff0000;"><td>I should be bathed in red</td></tr>

But did you know you can also do it like this (in all browsers!):

<tr style="background-color:rgb(255,0,0);"><td>I should be bathed in red too</td></tr>

An RGB value of 255,0,0 is red, whereas 255,255,255 is white. You can specify any shade of pink by passing 255 for the Red value and any number for Green and Blue, as long as they're both the same. See this table as an example:

The smaller the number you specify for Green and Blue the redder the colour. Can you see where this is going?

How This Works In Domino

What we need to do in our view is have each row calculate a number between 0 and 255. Brand new documents need to come out of the formula with a value of 255, whereas really old documents need to compute to 0.

The view itself needs to be treated as HTML and one of the columns would have a formula like this:

days_passed:=1+(@Date(2008;11;20)-@Date(@Created))/(60*60*24);
factor:=20;
val:=@Min(@Round((1/(days_passed/factor))*255); 255);
"<tr style=\"background-color:rgb(255,"+@Text(val)+",+@Text(val)+");\">

As you can see (hopefully) the G and B values of the row colour are worked out as a "percentage" value of 255, based on how many days have passed since it was created.

The number you multiply 255 by should be somewhere between 0 and 1. If it's 0 then you get red. if it's 1 then you get white. So it might seem the opposite way round to what you'd expect.

Note that I've introduced a "factor" in to the formula above. What I found was that you need to spread the shading of your rows out over the range of dates you expect to encounter. The factor needs to be about the same order of magnitude as the top end date expected. The best way to work this out is to play with it in your real world scenario.

Using Dates In View Columns

By now you might have noticed the view uses today's date in a column formula. Although the way I've done doesn't invoke the problems with indexing that using @Today does you might be wondering how it gets updated, as the date appears hard-coded.

Remember I've talked before about how you can use scheduled agents to update view selection formula. Well, you can do the same thing with column formulas too! Imagine this code running every night at shortly past midnight:

Set TodayDT = New NotesDateTime(Now)
tmp = |days_passed:=1+([+TodayDT.DateOnly+|]-@Date(@Created))/(3600*24);
factor:=20;
val:=@Min(@Round((1/(days_passed/factor))*255); 255);
"<tr style=\"background-color:rgb(255,"+@Text(val)+","+@Text(val)+");\">"|

Set folder = database.GetView("TicketsByDate")
folder.Columns(1).Formula = tmp
Call folder.Refresh

It's as easy as that. There's little wonder I'm so fond of Notes.

Summary

Used in the right place this technique can add much usefulness to the user and help them immediately recognise documents in need of attention. How you use it is down to you (it doesn't have to be a support ticket system!). It doesn't have to be shades of red either. You can use shades of any colour, as long as one of the RGB values always stays the same. Brilliant.

Next blog entry will discuss the use of this technique with LotusScript.