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

at8808 · January 2016

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 · January 2016

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 · January 2016

@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 · January 2016

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 · January 2016

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 · January 2016

That worked perfectly, thanks so much!

VIniSanches · August 2016

Incredible!! Nice tip!

Thanks!

ecenteno · October 2016

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

AS · October 2016

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

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

Best Answer

Answers

Categories