In Quickbase, you can add color-coding to a table report, Kanban report, or calendar. You can also color code individual fields, which can affect reports as well as forms. You can use formulas to do this, so the color in a field updates based on other values, like priority or completion. This can help you prioritize your work or communicate important information to your end users.
Color-coded fields in a report. The Current Priority field is a Formula-Rich-Text field. Its conditional formula says: If Priority is Urgent, make the background red.
Color-coded field on a form.
To color code a field
You can use a formula rich text field to add color to a field. You can also add color to the text in a field instead of the background.
-
Create or select a formula rich text field.
-
In the Formula box, enter the formula to color code using a
<div>tag. See examples in the table below. -
Click Save.
-
Add the new formula rich-text field to reports and forms.
Sample Text Formulas with HTML to color-code field backgrounds
|
You want to... |
Formula |
Notes |
|---|---|---|
|
Show value from the Priority field with the background always in pink. |
<div style=\"background-color:pink;\">"& [Priority]&"</div>
|
This code will display the value from the Priority field on a pink background. Wherever HTML calls for a quotation mark, you must precede it with a backslash (\), so Quickbase does not mistake it for the start or end of a literal in the Quickbase formula language. (Read more about literals and the backslash.) |
|
Show the value from the Priority field. Make the background red only if Priority is Urgent. |
If([Priority]="Urgent", "<div style=\"background-color:red;\"> Urgent</div>", [Priority] ) or, if you prefer to use a hex value: If([Priority]="Urgent", "<div style=\"background-color:#FF0000;\"> Urgent</div>", [Priority] ) Black text is hard to see on red. Make text white: If([Priority]="Urgent", "<div style=\"color:white; background-color:#FF0000;\"> Urgent</div>", [Priority] ) |
This formula says: If Priority is urgent, enclose the word "urgent" within a div with a red background. Otherwise, just show the value from the Priority field. Again, wherever HTML calls for a quotation mark, you must precede it with a backslash (\), so that Quickbase does not mistake it for the start or end of a literal in the Quickbase formula language. (Read more about literals and the backslash.) |
|
Color code each value from the Priority field with various shades of red. |
Case([Priority], "Urgent", "<div style=\"color:white; background-color:#FF0000;\"> Urgent</div>", |
Use a Case() function when you're dealing with values in the same field. White text is appropriate for red but not for the other colors.
|