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.
- Identify the “trigger” field
- Select your icons
- 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.
FROM THE TUTORIAL: "I've had a lot of requests for this tutorial on using icons to draw focus and drive action red yellow or green icons used for fields like project status bring the users attention to where action is needed plus they make your quick base look ultra cool and it's not just for status I'll share examples with emojis and logos as well to get started well first need to identify the trigger field this is a multiple choice field like project status then we'll need to select our icons and gather their URLs last we'll put it together using the case function combined with simple HTML and rich text formula field let's dive in for this tutorial have created just a very basic quick base what I've done here is just created a status field and the status field has statuses such as not started on track and cancel now what I'd like is for an icon to appear based on each of these statuses to do that I'm going to add a new field let's go ahead and just call that icon now the field type here is going to be a formula rich text field this will allow us to enter the HTML that will make the magic happen first I'm going to go ahead and edit the properties of our status field so I can copy inch of our statuses and then I will go into our new icon field and paste those statuses the formula that we're going to use here in order to generate the icons for each of these statuses is called case what case allows us to do is to set which icon will be associated each of these statuses based on whichever one is selected in our field so that field was called status so when status is equal to not started we want to show one icon when it's on track we want to show another icon at risk etc for each of these statuses we'll need to enclose them in quotations so that it's recognized as text and then we'll put a comma in here for what's going to happen for each of those statuses now here's where the icons come into play so what we'll need to do is identify the URL code that will point the QuickBase to that status icon now these do all have to be within a URL so store it on the internet somewhere they can be in QuickBase they could be on your website or somewhere else what QuickBase has for us is essentially a library of urls that we can use I've included the link to get to that library below so I'll open that library now here's the library of all the icons now what I'm going to suggest is for this example we use the 24 by 24 these are pixels icons far not started status I'm going to use a blue icon so I'm just going to search for blue and in this case I want to use the blue rectangle so I'll just copy that URL jump back to my quick base field paste that in here don't worry about the warnings right now we'll just get all the URLs added the next is on-track so I'm going to make that green and I'm going to use the circle icon here I do recommend using different shapes if you were going with the statuses just in case any of your users or colorblind I worked with a vice president who was colorblind and it was really helpful for him have statuses in different shapes that allowed him to understand a little bit better what was happening so there's the red one for at risk and we've got oh sorry I want red for the on hold just shift that over for at risk what can I do yellow here we go grab that yellow icon paste it in and then for canceled let's do gray and paste that okay now I'm getting started with the HTML so what we'll need to do is begin again with the quotation so it recognizes it is text but we're going to enclose the image tag I say source SRC is equal to we're going to put another quotation in here and give it our link and with the quotation and closing out that tag now you'll notice that something funny is happening here where it still doesn't recognizing the full URL what we need to do because we've got quotations inside of quotations is put a backslash in front of each of these quotations that are inside of our URL tag and we're going to end that with a quotation to close out the text and a comma I'll include all of these in the text below so that way you can easily copy them into your quick base so I'm just going to repeat this pattern so just copy paste paste paste paste and here at the end as well copy copy and paste paste paste paste and I'll just need to close that out remove this one and add it up here so here's our completed URL formula that includes the HTML to link to each of these icons save let's go back to our form now if we choose not started we get that blue square on track we get the green circle at risk we get the yellow triangle and on hold we get the red sort of diamond and then canceled we'll get that gray square simple enough now there are other examples that you can use with this and so I've got one here for you around sentiment instead of using icons for the sentiment you might have a positive sentiment a little happy emoji a neutral sentiment with a so-so emoji and our negative sentiment with our sad emoji another example I've prepared for you is using logos so if you'd like to use logos if you worked with different client accounts maybe you have a list of companies that might be on each record in this case I've used a number of different car brands so we've got BMW Infiniti Lexus so on you notice these were not obtained from the QuickBase library I stored these in another table you can see here my images table within the QuickBase itself got some of my quick based junky logos in there but I stored these in the quick base themselves so I was able to pull the URL from the quick base here on to jump back to company onto the logo form here let's go ahead and take a look at that so here very similar to the one we were just looking at we've got the formula of case now with our company field and then the different variations and the different URLs that go to each of those icons or in this case logos now you may have noticed that those logos were rather large might not want them to show up that large especially on your reports you know it will expand the height of your report rose to make room for those icons so you might not want them as large now but when I change that it's pretty easy to do I'll show you how I'll show you a neat little trick that QuickBase recently added I can do a control find or X re ctrl F or command F if you're on a Mac and here I can search let's say I want to search for the end element because I need to put in my size just before that end element now if I find all you see now I've got all of them selected so I can actually edit in was a six places simultaneously so I'm going to add here just inside of that in tag let's do with width equals and we need a backslash quote 75 is going to be 75 pixels actually I should quote to make the with 75 pixels wide it will correspondingly adjust the height as well so I don't mean to also put the height in and save now when I look at that logo it's much smaller and won't affect my reports as much so there you have it status icons as well as how to add other images such as company logos or emojis to your quick base to add a more engagement and draw that focus and attention to things that need to have action taken."
Feeling like a Junkie? Subscribe Now!
