Coloring Specific View Rows Using a Dynamic Table and CSS in XPages
Wednesday, September 23, 2009 at 1:37PM I had a student ask recently about the ability to set the background color of a table row based upon a value in the data. This is something that was pretty commonly done in traditional Domino Web Development. In investigating how to do this I couldn't find a way to implement this using the standard View control, so I developed the following technique.
I use a dynamic html table (I showed how to implement this in my previous post here) but this technique can be used with a Data Table as well.
Create a CSS Style sheet that will map the colors to be used to the data values from the Domino View data. In the View I'm using as a data source there is a column that contains a Status value with one of the following values in it
- New
- Existing
- Terminated
- Pending
I have the following CSS in a stylesheet resource called rowclasses.css that I will be using in this demo.
.New {
background-color: red;
}
.Existing {
background-color: blue;
}
.Terminated {
background-color: fuchsia;
}
The class definitions in the CSS stylesheet are the same as the values from the status column.
Add the style sheet as a resource for the XPage.
Before the Stylesheet is applied the XPage rendered in the browser looks like the following
We want the individual table rows background color to be set using the colors from the CSS style sheet based upon the value from the Status column in the View data.
To review, the dynamic table uses a repeat control that has a variable called "customers" for each row of data that will be displayed. The value in the status column can be read from that variable using the Expression Language syntax customers.Status.
To set the value of the table rows background color, select the table row. On the Style tab of the Properties tab click the computed diamond icon next to the Class field and choose "Compute value...".
In the Script Editor dialog box that opens up change the language to Expression Language and type in the expression customers.Status. Click the OK button to save the expression to the class field.
Save the XPage and preview it in the browser. Now each rows background color will be set to the value in the CSS stylesheet based upon the value from the status column.
The status column does not have to be displayed, but it does have to be available in the data.
The style does not have to be applied to the entire row, it could be applied to one or many table cells as well.
The application with complete source code can be downloaded from my website here.
CSS, Dynamic Controls, XPages in Development, Tips and Tricks, Tutorial 