Color-coding fields

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.


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

Use a Formula-Rich-Text Field to color a field:

  1. Create or select a Formula-Rich-Text field.

  2. Access the field's properties page.

  3. In the Formula box, enter the formula to color code using a <div> tag. See examples in the table below.

  4. Click Save.

  5. Add the new Formula Rich-Text field to reports and forms.

Tip: You can also color the text in a field instead of the background.

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>",
"High","<div style=\"background-color:#FF6666;\"> High</div>",
"Medium", "<div style=\"background-color:#FF9999;\"> Medium</div>",
"Low","<div style=\"background-color:#FFCCCC;\"> Low</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.

 

Related topics: