Get Expert Help

Quick Base Junkie Blog

Short videos and posts to skyrocket your Quickbase skills!

Get tips in your inbox

Join the Quick Base Junkie Community email list!

Back to the Blog

Use icons to draw focus and drive action in Quickbase

advanced cool stuff formulas how to html incorporating images Jun 26, 2018

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!

Want to learn more about using HTML in Quickbase?

The Quick Base Junkie HTML Formula Crash Course is a self-paced, online course that gradually building from basic to advanced. 

Through numerous examples, demonstrations, and exercises, you'll be able to harness a valuable new skill set. (Not to mention the enormous value you'll add to your apps.)

Learn more about the HTML Formula Crash Course or the HTML Course Bundle.

 

VIDEO RESOURCES:
Access the Quickbase Icon Library

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.

 

 

 

Feeling like a Junkie?  Subscribe Now!

Recent Posts & Videos from the Blog

Use icons to draw focus and drive action in Quickbase
Use icons to draw focus and drive action in Quickbase
Use icons to draw focus and drive action in Quickbase