Use icons to draw focus and drive action in Quickbase

Subscribe on YouTube

Drive action with visual icons on your reports and forms. Displaying an icon based on another field (such as Status) will draw focus to what needs attention.

This technique can also be applied to other images like logos and emojis. This video includes using the Case formula, basic HTML, and the Quickbase icon library.

Add icons to 'pop' important information on reports and forms:

• Need to see off-track projects at a glance?
• Want to highlight a past due invoice?
• Desire to make out-of-stock items more obvious?

In this tutorial, I walk you through the three things you need to transform your forms and reports with visual icons.

1. Identify the “trigger” field
2. Select your icons
3. Write the HTML formula

Let's drive action with some icons!

RESOURCES:
Quickbase Icon Library:
https://login.quickbase.com/db/9kaw8phg?a=ShowPage&pageid=1600

Case([Status],
"Not Started","<img src=\"https://images.quickbase.com/si/24/230-rect_blue.png\">",
"On Track","<img src=\"https://images.quickbase.com/si/24/222-point_green.png\">",
"At Risk","<img src=\"https://images.quickbase.com/si/24/241-triang_yellow.png\">",
"On Hold","<img src=\"https://images.quickbase.com/si/24/233-rhomb_red.png\">",
"Canceled","<img src=\"https://images.quickbase.com/si/24/226-rect_gray.png\">")

Case([Sentiment],
"Positive","<img src=\"https://assets-cflare.quickbasecdn.net/res/3a605fa-3485/js/ckeditor-dev-4.5.8/plugins/smiley/images/regular_smile.png\">",
"Neutral","<img src=\"https://assets-cflare.quickbasecdn.net/res/3a605fa-3485/js/ckeditor-dev-4.5.8/plugins/smiley/images/confused_smile.png\">",
"Negative","<img src=\"https://assets-cflare.quickbasecdn.net/res/3a605fa-3485/js/ckeditor-dev-4.5.8/plugins/smiley/images/sad_smile.png\">","")

The above emoji URLs were obtained from the emojis used in the native Rich Text Field functionality provided by Quickbase.

Case([Company],
"VW","<img src=\"https://company.quickbase.com/up/yourdbid/a/r3/e6\" width=\"75\">",
"BMW","<img src=\"https://company.quickbase.com/up/yourdbid/a/r8/e6\" width=\"75\">",
"Lexus","<img src=\"https://company.quickbase.com/up/yourdbid/a/r5/e6\" width=\"75\">",
"Kia","<img src=\"https://company.quickbase.com/up/yourdbid/a/r6/e6\" width=\"75\">",
"Toyota","<img src=\"https://company.quickbase.com/up/yourdbid/a/r4/e6\" width=\"75\">",
"Infiniti","<img src=\"https://company.quickbase.com/up/yourdbid/a/r7/e6\" width=\"75\">")

The above URLs for the company logo were derived using the following URL formula:

URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#]& "/e6"

This URL field was on the record where the image was attached. The 6 at the end is the field ID for the attachment field.

FROM THE TUTORIAL: ...Let's take that same example of documents but also add tasks. As an example, if you want all of your users to only access or create tasks related to a project. Hiding the task table in the menu bar can create that navigation that forces them to go through the project's table in order to access or create tasks. This can minimize any task orphans being created that don't have a parent project. So, let's go into the roles. In this example, I just want to have the team members with those settings for both the documents as well as the tasks table. Opening their role, I'll choose the user interface and in the first column here you can see "hide in table bar." So I'm going to choose to "hide in the table bar" both the tasks the documents..."

Feeling like a Junkie? Subscribe on YouTube now!