LAN2LAN Technobabble
Corporate Blogs
Sometimes we want to do things in a view that we know would impact performance or that simply aren't possible. I'll warn you up front that this is going to be "old school" but could still have useful applications in XPages.

The Problem

I was given a web application to work on where the home page was using multiple embedded single category views set to display using Java applet. Needless to say the load time on the page could be described as "poor" if one was feeling kind. I wanted to convert the home page to use an HTML version of the views, but one particular view was interesting in that if a particular document was "overdue", there was a column set to show value as colour that turned the text red. This column calculated whether something was overdue or not by comparing a date field to @today (listed in the top 10 design crimes list in my book). So there was the issue: how can you compare a date to "today" without using @today in the view.

The solution I chose has two main ingredients:

1) A CSS class for "red" text
2) A JavaScript function that compares a date I pass it with "Today" and tells me if its in the past or not

1) The following style was added to the stylesheet referenced by the form that would be displaying the 'view'

.redText {

2) The following function was added to the JavaScript library referenced by the form that would be displaying the 'view'

function setRedColor(dtY, dtM, dtD, strStatus) {
// dtY dtM and dtD are passed in as strings. strStatus is the text I want to appear in red
today = new Date() //this is today and the view doesn't know about it!
cDate = new Date(dtY+"/"+dtM+"/"+dtD)//this is the date I passed in
if (cDate document.writeln(""+strStatus+"")

Note that in this example I constructed a JavaScript date object from strings - if you pass in numbers, the initialization of the variable would be more like:
cDate = new Date(dtY,dtM,dtD)

You can use JavaScript function to convert if you prefer using parseInt(string).

So to pull it all together, I have a view column where I have directly coded the HTML for table rows and cells (the table tags and table headings are on the form as passthru HTML and I am using the view as a way to populate the table rows). I am pulling this view column in via an @dblookup because you are limited to the number of HTML embedded views you can display (one basically). In simple terms what the code does is compare StageCompletionDate to "today" in the JavaScript function and returns HTML directly into the table cell in the view text being rendered to the browser. Note that around each of the arguments being passed to the JavaScript function are apostrophes, so what looks like " is in fact " '. I wouldn't use the apostrophes on the date arguments if I wanted to pass them to JavaScript as numbers.

"<tr><td><a href=\"/"+@WebDbName+"/0/"+@Text(@DocumentUniqueID)+"?OpenDocument\">"+FullName+"</a></td>"+
@If(Status !="Completed";"<script>setRedColor('"+@Text(@Year(StageCompletionDate))+"','"+@Text(@Month(StageCompletionDate))+"','"+@Text(@Day(StageCompletionDate))+"','"+@Text(StageCompletionDate;"D0S0")+"')</script>";;@Text(StageCompletionDate;"D0S0")))
"<td class=\"tdStatusCol\"> "+ Status+"</td></tr>"+

So there you have it! The date displays in red if the document is over due and with no major cost to the view - all the hard work is done by the browser. I really like this as a neat way you can be creative with Notes!

I've used this technique for other things, such as displaying a client-specific price for a product list. That one is a little more complicated but I can post it if anyone is interested.

Comments (1) Melissa Snell April 1st, 2010 16:18:31

1) Jazzing up view columns on the web using JavaScript
Mr Lun ski 08/06/2010 17:12:12

How exciting, just what the Dr ordered!

 Add a Comment
Web Site:
Comment:  (No HTML - Links will be converted if prefixed http://)
Remember Me?