Any way to color rows based on values in a column?

at8808

I want to create a card that shows a table that has rows that are colored based on the value in a specified column. The heat map table does not work because it does not allow me to set the ranges manually. Does anyone know a way to do this?

quinnj

Sure thing. The basic idea is to wrap your cell content in a 100% heigh/100% width div to take care of the background color. The following shows an example of doing a red background:

 

CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Red Conditional Format', '</a></div>')

 

Plus another example where we're actually choosing between green, yellow, red:

 

CASE

WHEN `CHANGE` > 0 THEN CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN IFNULL(`CHANGE`, 0) = 0 THEN CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN `CHANGE` < 0 THEN CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

END

 

You can obviously tweak the colors as needed. 

quinnj

@at8808,

 

The easiest way to do this is to use a Sumo Card. It allows you to set conditional formatting on cell values. See the help center article for reference: http://wiki.domo.com/confluence/pages/viewpage.action?pageId=44827302

 

A more involved alternative solution would utilize custom Beast Mode calculcations where we could generate valid HTML to display the formatting you're after. This solution is based on the fact that Domo table cards will *render* valid HTML instead of displaying the text value of the HTML.

at8808

Thanks, I was able to use HTML to change font color, size and background color with conditional formatting I entered. 

 

However, I am wondering if there is a way to actually color the entire cell in the table using HTML? Right now using the font background color only fills in the area around the actual value, not the entire cell. Does anyone know a way to color the entire cell without making a Sumo card? 

quinnj

Sure thing. The basic idea is to wrap your cell content in a 100% heigh/100% width div to take care of the background color. The following shows an example of doing a red background:

 

CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Red Conditional Format', '</a></div>')

 

Plus another example where we're actually choosing between green, yellow, red:

 

CASE

WHEN `CHANGE` > 0 THEN CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN IFNULL(`CHANGE`, 0) = 0 THEN CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN `CHANGE` < 0 THEN CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

END

 

You can obviously tweak the colors as needed. 

at8808

That worked perfectly, thanks so much!

VIniSanches

Incredible!! Nice tip!

 

Thanks!

ecenteno

Hello.....I love this idea! Will this work on a case where i'm looking for an is null value to be "highlighted"?

AS

@ecenteno I haven't been able to color my null cells.  Not that it's impossible, but I haven't found a way.