Since Excel was first released for the Mac in 1985 it has become the work­horse for ana­lysts across all indus­tries. For week­ly report­ing how­ev­er, it can be a drag to pull a report into excel, apply con­di­tion­al for­mat­ting, and dis­trib­ute it to mul­ti­ple peo­ple on a reg­u­lar basis.

Often when busi­ness­es are try­ing 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 per­form­ing at a glance. Con­di­tion­al for­mat­ting in excel allows you to high­light infor­ma­tion when your own busi­ness con­di­tions are met. In the exam­ple below, I’ve used data from Google Adwords to cre­ate “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 cam­paigns are cheap­er or more expen­sive to acquire cus­tomers. While this is rather sim­ple to do with a few but­tons in excel, it’s not a stan­dard table for­mat in Domo.

Luck­i­ly with some tweak­ing, we can enhance Domo’s Table chart type with Beast Modes that include HTML & CSS to apply our own con­di­tion­al for­mat­ting to reports. This works for all stan­dard (non-Sumo tables).

How to Implement:

We can do this by com­bin­ing the SQL CONCAT func­tion with an HTML DIV ele­ment. Because HTML & CSS are ren­dered in the brows­er, we can now change the back­ground col­or based on user defined con­di­tions. We could also load oth­er ele­ments like image files (ex. cus­tom indi­ca­tor icons).

Beast Mode For­mat: CONCAT(‘html’,@field,’html’)

Exam­ple:

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 Con­di­tion­al Formatting:

  • High­light Dupli­cate or Unique Values
  • High­light Min, Max, Medi­an Values
  • Mon­i­tor Overages/Underages

The Pos­si­bil­i­ties Are Endless

The abil­i­ty to add HTML & CSS opens up sev­er­al oth­er capa­bil­i­ties in Domo. Here are some oth­er ideas for using HTML & CSS to extend Domo Functionality.

  • Cre­ate Multiple/Custom Sum­ma­ry Numbers
  • Cre­ate a Click­able Blog Roll From an RSS connector
  • Cre­ate a Social Media Mon­i­tor­ing Dash­board with Face­book Image Snip­pets or Twit­ter User Icons (As seen in face­book, twit­ter, or insta­gram quickstarts)

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