How can I create colored backgrounds, pictures and stoplight graphics in my forms and reports?

Knowledge Base

Our Knowledge Base covers a wide variety of technical topics, from the basic to the complex.

You can exploit the HTML function of a Formula Text field to produce background colors and even graphics into forms tables and reports.

Below are a few examples:

Color Status: Example of using Formula Text field with HTML to produce fields that have background colors and graphics. Color Status: Example of using Formula Text field with HTML to produce fields that have background colors and graphics.

Colored Fields: Example of using Formula Text fields with HTML to display background color. Colored Fields: Example of using Formula Text fields with HTML to display background color.

Steps:

1. Create a formula text field and paste the respective html code into the formula section of the formula text field's properties.

FORMULA TEXT FIELD - COLORED STATUS: Case ([Status],"Not Started","<div style=\"background-color:pink;width:50\">Not Started</div>", "In-Progress","<div style=\"background-color:lightyellow;width:50\">In-Progress</div>", "Completed","<div style=\"background-color:honeydew;width:50\">Completed</div>",null)

FORMULA TEXT FIELD - ICON STATUS: Case ([Status],"Not Started","<div><img src=\"https://www.quickbase.com/up/bdcwxur8p/g/rf/ej/va/227-rect_red.png\"></div>", "In-Progress","<div><img src=\"https://www.quickbase.com/up/bdcwxur8p/g/rh/ej/va/229-rect_yellow.png\"></div>", "Completed","<div><img src=\"https://www.quickbase.com/up/bdcwxur8p/g/rg/ej/va/228-rect_green.png\"></div>", null)

2. Select your graphic icons or pictures (suggest small thumbnails) and load them into QuickBase.

3. Copy their URL location and insert them into the html code below for the respective locations for the various status settings.

4. Don't forget to check the "Allow some HTML tags" checkbox.

5. Include the new fields on your reports.

You can find a number of useful graphics that are linkable at: https://www.quickbase.com/db/bcgnn27bx?a=q&qid=7

More information about Row Colorization: https://www.quickbase.com/help/row_colorization.html

Helpful Hex to Dec and Dec to Hex color conversion site: http://www.321webmaster.com/hex-to-rgb.php

Tags:

46100 reads

Comments

can't get icon to work

Submitted by John (not verified) on Fri, 08/07/2009 - 10:21.

I keep getting formula errors when I try to put this in a forumla text field. Any suggestions? FORMULA TEXT FIELD - ICON STATUS: Case ([Status],"Not Started","", "In-Progress","", "Completed","", null)

can't get icon to work

Submitted by QB_Support_Karis (not verified) on Mon, 08/17/2009 - 14:29.

Hi John, What error messages are you getting? Thanks, Karis QuickBase Support

Color for Multiple Choice Text

Submitted by Dani (not verified) on Tue, 08/04/2009 - 12:37.

I have tried to do the above but if the field is a multiple choice field it does not allow me to enter in the html tags for color. I am trying to colorize the status column field - is this possible?

Color for Multiple Choice Text

Submitted by QB_Support_Karis (not verified) on Thu, 08/06/2009 - 16:14.

Hi Dani, At this time, only our formula text fields allow HTML tags. You can use a formula text field to display the value in your multiple choice field, though. The following link as well as this article explains the steps. Color the Background of a Field with HTML https://www.quickbase.com/help/color_field.html If you get stuck, please enter a support case and we'll help you out! How do I create a Support Case for QuickBase? 1. Log in to QuickBase at www.quickbase.com. 2. Go to http://support.quickbase.com and select "Enter a support case." 3. Enter the relevant information in the fields and be as detailed as possible. 4. Click Save. Your message is then sent to the QuickBase Support team. 5. When your case is updated by the support team, you will receive an email notifying you of the update. You can then respond by updating the Issue/Question section of the case, and we will then receive your updated case and respond accordingly. * If you are not able or choose not login to QuickBase, then you will not be able to update your case. It will be created using an Anonymous profile and you will only receive a reply to your message via email. How do I see the cases I have created? 1. Go to http://support.quickbase.com. 2. On the right side of the screen, click the Support Portal Beta button. You will be prompted to sign in. From here you can see your previous and current cases. Thanks! Karis QuickBase Support

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly.

Homepage:

Subject:

Comment: *

Input format

Filtered HTML

Web page addresses and e-mail addresses turn into links automatically.
Allowed HTML tags: <a> <p> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption> <img> <h1> <h2> <h3> <h4>
You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>, <xml>. The supported tag styles are: <foo>, [foo].
Images can be added to this post.

Plain Text

Web page addresses and e-mail addresses turn into links automatically.
Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>

More information about formatting options

Word verification: * Type the characters you see in this picture.

(verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Knowledge Base