Since Excel was first released for the Mac in 1985 it has become the work­horse for analysts across all indus­tries. For weekly report­ing however, it can be a drag to pull a report into excel, apply condi­tional format­ting, and distrib­ute it to multi­ple people on a regular basis.

Often when busi­nesses are trying to eval­u­ate data in a spread­sheet or table, it can be chal­leng­ing to deter­mine how indi­vid­ual items/rows are perform­ing at a glance. Condi­tional format­ting in excel allows you to high­light infor­ma­tion when your own busi­ness condi­tions are met. In the example below, I’ve used data from Google Adwords to create “CPA” from the Cost / Conv. data field.

By high­light­ing items where Cost per Acqui­si­tion or “CPA” is greater than $10.00 in Red, and items where CPA is less than $5.00 in green, I can now see which campaigns are cheaper or more expen­sive to acquire customers. While this is rather simple to do with a few buttons in excel, it’s not a stan­dard table format in Domo.

Luckily with some tweak­ing, we can enhance Domo’s Table chart type with Beast Modes that include HTML & CSS to apply our own condi­tional format­ting to reports. This works for all stan­dard (non-Sumo tables).

How to Imple­ment:

We can do this by combin­ing the SQL CONCAT func­tion with an HTML DIV element. Because HTML & CSS are rendered in the browser, we can now change the back­ground color based on user defined condi­tions. We could also load other elements like image files (ex. custom indi­ca­tor icons).

Beast Mode Format: CONCAT(‘html’,@field,’html’)
Beast Mode

Example:

CASE
--red
    WHEN `Cost / conv.` > 10
        THEN CONCAT('<div style="background-color:#fcbcb7; text-align: right; text-decoration:none; font-weight: bold; width: 100%; height:100%; margin:-20px; padding:20px;"><a href="#">','$',`Cost / conv.`, '</a></div>')

--green
    WHEN `Cost / conv.` < 5
        THEN CONCAT('<div style="background-color:#bbe491; text-align: right; font-weight: bold; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">','$',`Cost / conv.`, '</a></div>')

--yellow
  ELSE CONCAT('<div style="background-color:#fccf84; text-align: right; font-weight: normal; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">','$',`Cost / conv.`, '</a></div>')
END

Uses for Condi­tional Format­ting:

  • High­light Dupli­cate or Unique Values
  • High­light Min, Max, Median Values
  • Monitor Overages/Underages

The Possi­bil­i­ties Are Endless

The ability to add HTML & CSS opens up several other capa­bil­i­ties in Domo. Here are some other ideas for using HTML & CSS to extend Domo Func­tion­al­ity.

  • Create Multiple/Custom Summary Numbers
  • Create a Click­able Blog Roll From an RSS connec­tor
  • Create a Social Media Moni­tor­ing Dash­board with Face­book Image Snip­pets or Twitter User Icons (As seen in face­book, twitter, or insta­gram quick­starts)

Let us know what you think. Have Domo ques­tions or chal­lenges? Drop us a note at contact@searchdiscovery.com.