Why use HTML in Quickbase formulas?

If you're looking for a way to add extra function and style to your Quickbase apps, what you're actually looking for is HTML formulas.

HTML formulas combine the power of formula functions with the visual appeal of HTML (and CSS) resulting in imgmore engaging and professional looking applications.

What can you do with HTML Formulas?

• Combine formula functions with HTML to dynamically deliver eye-catching information.
• Enhance text and numbers with color, background, weight, font, and MUCH more.
  Watch an example: Want to make your text stand out? Add color [6 min]
• Add images to reports and forms to display products, logos, or other graphics.
  Watch an example: How to add images for picture perfect reports & forms [15 min]
• Incorporate icons that automatically update when field values change.
  Watch an example: Use icons to draw focus and drive action [11 min]
• Create numbered or bulleted lists of information including summaries from child tables.
• Add dynamic hyperlinks and buttons where you control the look, label, and behavior.

More stuff you can do with HTML Formulas!

• Use HTML tables to organize information and create print perfect forms (great for invoices, purchase orders, welcome letters, and more!).
• Format text and add links to custom data rules.
• Build the MOST incredible Kanban reports you've ever seen. Seriously look at this example (learn how to make it in the HTML Formula Crash Course):
  

What does an HTML formula look like?

An HTML formula is composed in a Rich Text formula field. It contains strings of text often joined to functions and field references using the "&" operator.

Below is an example that displays an image 50 pixels wide from an attachment field.

"<img src='" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e24/v0' width='50'>"

Of course, you can do a whole lot more with HTML! Below is the HTML formula that builds this handy AND dynamic shipping estimate table (learn how to make it in the HTML Formula Crash Course).

var text ARROW = "<img src='https://images.quickbase.com/si/16/401-left.png'>";

var text ONE = If([Order Subtotal]<500,$ARROW);
var text TWO = If([Order Subtotal]>=500 and [Order Subtotal]<2499,$ARROW);
var text THREE = If([Order Subtotal]>=2500 and [Order Subtotal]<4999,$ARROW);
var text FOUR = If([Order Subtotal]>=5000,$ARROW);

"<table border='1' cellpadding='1' cellspacing='0' style='width:300px;'>" &
" <thead>" &
" <tr style='background:dodgerblue;color:white'>" &
" <th scope='col' style='text-align: center;'><span style='font-size:14px;'><strong>Order Total</strong></span></th>" &
" <th scope='col' style='text-align: center;'><span style='font-size:14px;'><strong>Shipping Est</strong></span></th>" &
" <th scope='col' style='text-align: center;'><span style='font-size:14px;'><strong>This Order</strong></span></th>" &
" </tr>" &
" </thead>" &
" <tbody>" &
" <tr>" &
" <td style='vertical-align:middle;text-align: right;'>$499 or less</td>" &
" <td style='vertical-align:middle;text-align: center;'>$20</td>" &
" <td>" & $ONE & "</td>" &
" </tr>" &
" <tr>" &
" <td style='vertical-align:middle;text-align: right;'>$500 - $2,499</td>" &
" <td style='vertical-align:middle;text-align: center;'>$50</td>" &
" <td>" & $TWO & "</td>" &
" </tr>" &
" <tr>" &
" <td style='vertical-align:middle;text-align: right;'>$2,500 - $4,999</td>" &
" <td style='vertical-align:middle;text-align: center;'>$100</td>" &
" <td>" & $THREE & "</td>" &
" </tr>" &
" <tr>" &
" <td style='vertical-align:middle;text-align: right;'>$5,000 or more</td>" &
" <td style='vertical-align:middle;text-align: center;'>$150</td>" &
" <td>" & $FOUR & "</td>" &
" </tr>" &
" </tbody>" &
"</table>"

While the above looks complex, there are shortcuts to generating this type of HTML 😉

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 builds 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.

Feeling like a Junkie?  Subscribe Now!