How To: Conditional Formatting in Domo


Since Excel was first released for the Mac in 1985 it has become the workhorse for analysts across all industries. For weekly reporting however, it can be a drag to pull a report into excel, apply conditional formatting, and distribute it to multiple people on a regular basis.

Often when businesses are trying to evaluate data in a spreadsheet or table, it can be challenging to determine how individual items/rows are performing at a glance. Conditional formatting in excel allows you to highlight information when your own business conditions are met. In the example below, I’ve used data from Google Adwords to create “CPA” from the Cost / Conv. data field.

By highlighting items where Cost per Acquisition 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 expensive to acquire customers. While this is rather simple to do with a few buttons in excel, it’s not a standard table format in Domo.

Luckily with some tweaking, we can enhance Domo's Table chart type with Beast Modes that include HTML & CSS to apply our own conditional formatting to reports. This works for all standard (non-Sumo tables).

How to Implement:

We can do this by combining the SQL CONCAT function with an HTML DIV element. Because HTML & CSS are rendered in the browser, we can now change the background color based on user defined conditions. We could also load other elements like image files (ex. custom indicator icons).

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

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 Conditional Formatting:

  • Highlight Duplicate or Unique Values
  • Highlight Min, Max, Median Values
  • Monitor Overages/Underages

The Possibilities Are Endless

The ability to add HTML & CSS opens up several other capabilities in Domo. Here are some other ideas for using HTML & CSS to extend Domo Functionality.

  • Create Multiple/Custom Summary Numbers
  • Create a Clickable Blog Roll From an RSS connector
  • Create a Social Media Monitoring Dashboard with Facebook Image Snippets or Twitter User Icons (As seen in facebook, twitter, or instagram quickstarts)

Let us know what you think. Have Domo questions or challenges? Drop us a note at contact@searchdiscovery.com.


About Search Discovery

Search Discovery is a digital intelligence company that empowers organizations to make better, dynamic and transformative business decisions. We're focused on delivering results for our clients through digital analytics, SEO, digital media, and technology.


Comments

Let's Talk.

You're excited. We're excited. Give us a shout so we can get this party started.

!
!