The demonstration database contains products, which have "units in stock" and a "reorder level". When the standard Products view is displayed in Lotus Notes, a hidden column with "Use value as color" has been placed just before the "Units in Stock" column with the formula:
@If(UnitsInStock<=ReorderLevel;255:0:0:-1:-1:-1;-1:-1:-1:-1:-1:-1)
This has the effect of changing the background color of the units in stock to red if the value is at or below the reorder level - time to buy some more!!
The same effect is possible in Xpages. An attached PDF shows the screen shots accompanying the steps.
1) Add a hidden column to your view that contains the information that you will use to decide whether to apply the color or not. The column is required so that we can access the information in it once the view has been added to the Xpage. Hide it because we don't want to confuse anyone who will continue to access the native view in Lotus Notes. In this example, we already have the Units in Stock in the view, but we will also need to know the reorder level. A column was added to the view to hold the value of the reorder level.
2) Create a stylesheet (or modify an existing one already on the Xpage). Add in a classs with a background color: in this case 'redBackground'
3) Create a new XPage (or modify an existing one)
4) Add the stylesheet resource that contains your class to the Xpage from the Styles tab of the Properties panel for the XPage
5) From the Container Controls panel on the right-hand side of the Designer client, drag and drop a "View" Control onto the XPage. In the dialog box that appears, select the view and click OK
6) Hide the Reorder level column and column header by unticking the "visible" property check box. You can also remove all the hidden columns you added to the view - these only need to be on the original view and do not have to be in the XPage
7) To give us a way of accessing the view data, in the properties of the view panel, go to “All properties” and under the data section set the “var” property to be “rowData”
8) Go to the column who's color you want to change - in this case "Units in stock". Go to the Style tab on the properties panel and click on the diamond to the right and click "Compute Value"
9) Enter some Javascript that will return the name of the class ("redBackground") if the units in stock are the same or less than the reorder level. To do this you will need to convert the values into numbers using parseInt or parseFloat (if you need decimal places) to compare the column values as numbers
try{
var qtyReorder=parseInt(rowData.getColumnValue("Reorder Level"));
var qtyInStock=parseInt(rowData.getColumnValue("Units in Stock"));
if(qtyInStock<=qtyReorder){
return "redBackground"
}
}
catch(e){
print(e);
}
10) Now save and preview in a browser.
A PDF containing screenshots is attached