Setting background color of cell

App Building
,
1

I am attempting to set the background color of a cell based on the cells content. If I go to appearance > background on the given column I can use ternary operators like so

{{item === 0 ? '#147034' : '#3DBDF7'}}

I can get it to work. but I want more complex logic because I want to make it into a heatmap so I was thinking about normalizing the value based on the min and max and then using that to determine the color.

I have tried several different ways of putting ifs in here and none worked. I also tried a switch statement.

I also tried making a js query to do the heavy lifting, but I could not figure out how to pass the item variable to the js to do its work.

Can anyone help solve this issue through either of the above methods or a different method.

I know I can use ternary operators to make it work, but I feel like thats going to get extremely unreadable very quickly.

2

Something like this might work for you using a hsl green-to-red colour banding?
The table uses a random number from 1 to 100 to represent a percent so I divide it by 100 which you may not need to - and I used 120 as the initial angle which is 'green'

image
image761×684 57.2 KB

1 Like
3

oh wow super useful. I switched it around to be slightly different based on my use case.

hsl({{((item / calculate_max_units.data) * 120).toString(10)}} 100% 65%)

this colors it from red to green where stuff close to 0 is red and stuff close to the max value is green.

Thank you for your help!

image
image955×564 53.2 KB

4

nice! got to love a heatmap