Foreign Language Help for all you Americanised Googlers: color … color … color
Download the attached PDF ... it's got a bunch of screencaptures that make it all easier to understand.
Automatically changing colours in XPage view objects
Foreign Language Help for all you Americanised Googlers: color … color … color
The Objective here is to colour a cell in a View based on a picklist in a form. I want each task to have a colour which can be individually assigned. Of course, I might also desire the colours to represent tasks assigned to particular individuals (eg all of Tom’s tasks are colourcoded ‘YellowOnBlack’) but I’ll leave that exercise as an Extra Credit option if you finish this exercise early.
STEP 1: Create a CSS with a list of colours. I used W3C web standard colour names but in a production application I would be tempted to define the colours using #RRGGBB codes:
*
ProjectColours.CSS
.LightRedOnWhite{
color: LightRed;
background-color: White;
}
.DarkRedOnWhite{
color: DarkRed;
background-color: White;
}
.LightBlueOnWhite{
color: LightBlue;
background-color: White;
}
.DarkBlueOnWhite{
color: DarkBlue;
background-color: White;
}
etc
etc
*
STEP 2: Put the CSS colour names into a multivalue keyword document
STEP 3: Create a Custom Control with a combobox using Labels and Values populated via a dblookup eg '@DbLookup(@DbName(),"Keyword",'"Colour",2)
STEP 4:. Name the project document and the colour combobox on the Custom Control for future reference. I set the document name = 'ProjectDoc' and the combobox field = 'ProjectColourText'.
STEP 5: Select the Style tab for the Custom Control and add the 'ProjectColours' style sheet. Set the Style Class of the combobox to the Expression Language value 'ProjectDoc.ProjectColourText'. This will make the combobox display using the colour values defined in the CSS
STEP 6: You can now start creating Project documents and assigning them colours. When you assign a colour the display of the Project Colour field will change to match your selection:
STEP 7: We now need to have the selected colours displayed on the top level view of the documents. Set the Data Var for the View object to 'SelectedProjDoc'. (Note that this is the 'Data Var' setting ... not the 'Data\Data Var' setting).
STEP 8: The final step is to tell the selected columns within the View object that they should use the value retrieved from the ProjectColourText field within each document as the CSS colourvalues for that particular document.