Search this app

CtrlK

App home

Tables

All tips
App Feedback

DIY app solutions - Create a colorful visual status field

For which table?

All tips

Resources

App Feedback

TipStats

Tip Feedback

Cancel

Add a New App Feedback

Open

Open in New Window

We are updating our Terms of Service. See our blog post highlighting the changes. By continuing to use the Quickbase Service, the new Terms of Service will become effective on the renewal date for each account that you manage. If you do not accept the changes, please notify us thirty days in advance of your renewal date.

Quickbase will send a report of the events currently displayed on your calendar.
Email addresses

Subject Message

New apps will be added to your account close

Create your own free Quickbase app

Quickbase Exchange has hundreds of free apps for any business process.
It's simple to get started and you don't need to be technical to do it.

Project Management
Customer Support
Sales & CRM
Marketing

Team Management
Human Resources
Information Technology
Industry-specific solutions

Find an app in Quickbase Exchange

We need to check with your admin first...

We know you're eager to create your first app-but your account settings don't let you create apps yet. We've asked your account admin to allow it, and you'll get an email from us when you can.

Prefer a more hands-on solution? Can't wait? Try a 30-day free trial, and get started creating apps immediately.

Build a new app from scratch Import a spreadsheet to create a new app

Start a trial

Quickbase is a web-site that lets you select, customize, and share online workgroup applications. The application you are using right now is powered by Quickbase.

Chances are that your organization has purchased the Quickbase service, in which case you might be able to build and deploy your own web application for little or no additional cost.

You have permission to create your own web applications.

To find out more about Quickbase, visit our web site.

Terms of Service

Role Name:

Description:

For which table?

All tips Resources App Feedback TipStats Tip Feedback

From scratch
Design your own table

All tips

Create a colorful visual status field

Email More

New notification...
Print

Table

Spreadsheet-style report with rows and columns

Chart

Pie, bar, line and others

Kanban

Cards in columns Unavailable for this table because it has no valid multiple-choice or user fields.

Map

Addresses translate to pins on a map

Calendar

Dates show on a calendar

Summary

Group and total your data

Timeline

Start and end dates in a timeline with a schedule

Prev | Next

Tip short name

Create a colorful visual status field

Level

Intermediate

Product area

Reports & Home pages

Submitted by

Evan Martinez (Community Manager)

Description

If you have a long process that has many status, creating a color coding system to more easily scan through information makes it easier to track things. Create a field to display the status from a multi-choice field.

Steps to implement

1. On the table with the field you'd like to create a fancy status on, add a Formula - rich text field.

2. Copy/paste the code on the right into the Formula area in this fields properties.

3. Change "Task Status" to match the multi-choice field on your table.

4. Get creative with colors to make you individual status stand out. "background" is the background color of your status and "color" is the color of the text for that status.

5. On reports, hide the multiple choice status and show this formula field in it's place.

Copy paste code

If(
[Task Status]="Pending",
"<div class='" & "Pending" & "' style='padding: 3px 5px; background: #CDC0B0; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Pending" & "</div>",
[Task Status]="In Progress",
"<div class='" & "In Progress" & "' style='padding: 3px 5px; background: #009933; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "In Progress" & "</div>",
[Task Status]="On Hold-Client",
"<div class='" & "Hold-Client" & "' style='padding: 3px 5px; background: #C67171; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Hold-Client" & "</div>",
[Task Status]="On Hold-Client Accepted",
"<div class='" & "On Hold-Client Accepted" & "' style='padding: 3px 5px; background: #F08080; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Hold-Client Accepted" & "</div>",
[Task Status]="Trouble Ticket",
"<div class='" & "Hold-Trouble Ticket" & "' style='padding: 3px 5px; background: #F08080; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Trouble Ticket" & "</div>",
[Task Status]="Hold-Research",
"<div class='" & "Hold-Research" & "' style='padding: 3px 5px; background: #33A1C9; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Hold-Research" & "</div>",
[Task Status]="On Hold - Internal Review",
"<div class='" & "On Hold - Internal Review" & "' style='padding: 3px 5px; background: #FFE87C; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Hold-Internal Review" & "</div>",
[Task Status]="QA Fail",
"<div class='" & "QA Fail" & "' style='padding: 3px 5px; background: #B0171F; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "QA Fail" & "</div>",
[Task Status]="QA Pass",
"<div class='" & "QA Pass" & "' style='padding: 3px 5px; background: #00ff80; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "QA Pass" & "</div>",
[Task Status]="QA Review",
"<div class='" & "QA Review" & "' style='padding: 3px 5px; background: #E66C2C; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "QA Review" & "</div>",
[Task Status]="To Client for Approval",
"<div class='" & "To Client for Approval" & "' style='padding: 3px 5px; background: #76EEC6; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "To Client for Approval" & "</div>",
[Task Status]="Complete",
"<div class='" & "Complete" & "' style='padding: 3px 5px; background: #736AFF; color: #ffffff" & "; border-radius: 8px; text-align: center; text-decoration: none'>" & "Complete" & "</div>"
)

Screen shot


View screenshot large

Comments or feedback on this tip?

Add Tip comment

Tip comments

Created on June 7, 2019 at 11:59 AM (EDT). Last updated by Sawyer, Lisa (deactivated) on Sept. 20, 2019 at 3:54 PM (EDT). Owned by Sawyer, Lisa (deactivated).

Lisa Sawyer

Show fields from Show fields from Show fields from a related table

a table related to ""

Report Name *

Description

Show description on report page

Reports and Charts Panel

Each table has a panel listing its reports and charts, organized in groups.

Please wait while your new report is saved...

Print the report as a table

Print one Tip per page ( total)

Using the form:

Print as much of the timeline as fits on a single page

Print the timeline over multiple letter-size pages in landscape orientation

New subscription...

Search & replace in this report...

Save as a spreadsheet

Clear New and Updated flags

Sorting & grouping...

View as a calendar

View as a timeline

Change the owner of these records...

Delete all records in this report

Show the expanded URL for this report

Report

Group up Group down

Hide this column Add a column...

New table based on this column...

Column properties... Field properties...

grouping by

Field label
Column heading override
Justification
What does auto mean?

Multiple values found. more...

Fields in:

Fields to Extract:

Name for the new table:
Items in the new table are called:

When you bring additional fields into a conversion, Quickbase often finds inconsistencies. For example, say you're converting your Companies column into its own table. One company, Acme Corporation, has offices in New York, Dallas and Portland. So, when you add the City column to the conversion, Quickbase finds three different locations for Acme. A single value in the column you're converting can only match one value in any additional field. Quickbase needs you to clean up the extra cities before it can create your new table. To do so, you have one of two choices:

If you want to create three separate Acme records (Acme-New York, Acme-Dallas and Acme-Portland) click the Conform link at the top of the column.
If the dissimilar entries are mistakes (say Acme only has one office in New York and the other locations are data-entry errors) go back into your table and correct the inconsistencies�in this case, changing all locations to New York. Then try the conversion again.



		Don't show me this message again

foo

We're glad you're interested in doing more with Quickbase!

Now we need to make you official before you share apps or manage your account.

Verifying your email lets you share Quickbase with others in your company.

Your work email

Your company

Client Performance Report

Network latency: ()

The time taken for page load once the page is received from the server:()

The total process of navigation and page load: ()

From inline js at page top..
        .. to the time until docready:( s)
        .. to the time until window load begins: ( s)
        .. to the time until window load ends: ( s)

Profile
Sign up now
Manage
Sign out
This app
DIY app solutions
Your role is EOTI
Switch accounts
{{firstServiceAccount.FirstName}} {{firstServiceAccount.LastName}} (Service)

{{firstServiceAccount.Email}}
{{secondServiceAccount.FirstName}} {{secondServiceAccount.LastName}} (Service)

{{secondServiceAccount.Email}}
More accounts
- {{serviceAccount.FirstName}} {{serviceAccount.LastName}} (Service)
  
  {{serviceAccount.Email}}