Color the Background of a Field with HTML

QuickBase lets you color rows in any table report, but what if you want to color only one field in that report? If you know some HTML, you can do it.


Colored Cells in a report. The Current Priority field is a Formula-Text field with HTML tags enabled.
Its conditional formula says: If Priority is Urgent, make the background red.



One advantage to this method is that the color coding shows on forms too.

When and how to use this feature

You'll probably want to use this feature in a Formula-Text field only. If you use it in a regular text type field, your users would need to enter HTML code to make the color appear. Even if your users know HTML, they probably don't want to type code into your QuickBase application. Instead, use a Formula-Text field to automate field colorization for them. To do so, design a Formula-Text field to show values that come from another field and color code them based on choice.

Tip: You can also use HTML tags to color the text in a field instead of the background.

To color a field:

  1. Create or select a Formula-Text field that you want to color.

  2. Access the field's properties page.

  3. Within the Text field options section turn on the Allow some HTML tags to be inserted in the field checkbox. (Read about using HTML tags in text fields.)

  4. In the Formula box, enter the formula that will generate the background color.

    Set background color with a <div> tag. See examples in the table below.

  5. Click Save.

  6. Add the new Formula-Text field to reports and forms on which you want it to appear.

Using HTML in a Formula - Text field

Combining the QuickBase formula language with HTML code can be tricky. When you combine HTML code with the QuickBase formula language, treat the HTML as you would any text literal within a formula.

Sample Text Formulas with HTML to color 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:

 

Return to top   

© 1999-2014   Intuit Inc.  All rights reserved.  Legal Notices.