You can change the color of any row or column in a Web view or entry in a Web calendar, based on the information in your document and the CSS styles you create.
- Pick the field you want to use and determine the color of the entry or column.
- Decide which of the following options to use for your application:
A: Add a field to the form(s) used by docs to calculate a CSS class name based on the value of the field you picked in step 1.
B: In the view column formula use an if statement to select a CSS class based on the value of the field you selected in step 1.
C: Do both.
- Modify your view to implement pass through HTML for one or more columns referencing a CSS class you will define. The reference to the CSS class to use will be:
A: Based on the class name value in another field.
B: Hardcoding a class name selection with an if statement.
C: Both.
- Create a new (or modify your existing) style sheet either as a page or resource in your Domino database.
- Create classes in your style sheet for each different color you want to use, and name them so they align with what you are triggering on in step 1.
- Use a view template and reference your style sheet in the HTML head section of your view template.
Example: In a calendar view, I want to distinguish scheduled classes based on the training room they are in.
Steps for example:
- On my existing form, I decided to use the trainroom field for determining the color I would assign to the entry.
- Using option A, I added a field to this form called "classstyle" with an if statement to translate the trainroom field into a CSS class that I will define in a style sheet.
"classstyle" computed text Formula is:
@If ( trainroom = "1";
"train1";
trainroom = "2";
"train2";
"holiday"
)
Note: You should also create a quick agent to update all pre-existing documents to calculate the classstyle value.
- Using option B. I would modify my calendar view's entry display column's formula to use an if statement to select which CSS style to apply - in effect hardcoding it into the view itself.
- Implement your choice in the view's column. In this case, I chose option C (A & B combined), to implement my entry colors.
The first @if test implements option A, the next three @if
tests implement option B. Finally, the default for the @if is to
not use any CSS classes.
gr := @If( group = ""; ""; " - ");
@If ( @IsAvailable(classstyle);
"[<div class=""+classstyle+"">]"
+ Group + gr +
DaySubject + "[</div>]";
trainroom = "1";
"[<div class="train1">]"+ Group
+ gr + DaySubject
+ "[</div>]";
trainroom = "2";
"[<div class="train2">]"+ Group
+ gr + DaySubject
+ "[</div>]";
trainroom = "holiday";
"[<div class="holiday">]"+ Group
+ gr + DaySubject
+ "[</div>]";
Group + gr + DaySubject
)
- I modified my existing style sheet to add these classes. Notice I did not tie them to DIV or SPAN explicitly, since I could re-use them and add DIV or SPAN specific requirements in those tags:
/* Here are the definitions that
are being used for the different
calendar entries */
.train1 {
BACKGROUND-COLOR: white;
}
.train2 {
BACKGROUND-COLOR: #add8e6;
}
.holiday {
FONT-WEIGHT: bold;
COLOR: white;
BACKGROUND-COLOR: red
}
/* I am listing how div and span
are defined separately to demonstrate
why I
did not use DIV.train1, etc instead
in my definitions above. In my case, I
added a legend to my template
using the same classes but used a
span tag vice
div to fit my legend one line */
DIV {
display: block;
font-family: sans-serif;
}
SPAN {
font-size: x-small;
font-family: sans-serif;
}
TIP: If you use a style sheet editor, remove the <STYLE> </STYLE> tags from the top and bottom of the style sheet you store in your Domino database.
- In the HTML head for my view template I linked to my stylesheet.
<LINK HREF="kendo-calendar-v2.css" REL="stylesheet" TYPE= "text/css" >
Extending this method
This method can be applied to regular view columns in the same manner -- enabling you to have more than just alternating colors in a view. You could also use the same method to use different styles for each column to achieve a kaleidoscope of colors in your views.
Summary
CSS style sheets allow you to fix many of the formatting issues that a default Domino Web view imposes, simply by defining styles for TD, A and BODY elements. You can also customize your Web views, so that you can call attention to specific items based on their values by using CSS classes.
Do you have comments on this tip? Let us know.
This tip was submitted to the SearchDomino.com tip exchange by member Linda Ruiz. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our monthly tip contest and you could win a prize and a spot in our Hall of Fame.
