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

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?

Best Answer

  • quinnj
    quinnj Domo Employee
    Answer ✓

    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. 

Answers

  • quinnj
    quinnj Domo Employee

    @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.

  • 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
    quinnj Domo Employee
    Answer ✓

    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. 

  • That worked perfectly, thanks so much!

  • Incredible!! Nice tip!

     

    Thanks!

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

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

    Aaron
    MajorDomo @ Merit Medical

    **Say "Thanks" by clicking the heart in the post that helped you.
    **Please mark the post that solves your problem by clicking on "Accept as Solution"
This discussion has been closed.