Problem with background color for grid-cells

Hello,

i got a strange problem with coloring of some grid cells.

- component: oh-label-cell
                config:
                  action: group
                  actionGroupPopupItem: Home_Status
                  expandable: false
                  footer: =items.Home_Urlaubsmodus.displayState
                  header: "=items.Home_Anwesenheitserkennung.displayState "
                  icon: "f7: house"
                  item: Home_Anwesenheitserkennung
                  label: Alles ok!
                  subtitle: =items.TimeOfDay.state
                  style:
                    background: '=(items.Home_Anwesenheitserkennung.state > 0) ? "#FF7276" : ""'

I would like this cell to change the color, if item Home_Anwesenheitserkennung > 0, but i does not change the color.

At another cell it works fine:

- component: oh-label-cell
                config:
                  action: group
                  actionGroupPopupItem: SZ_Klima
                  expandable: false
                  footer: = "Luftfeuchtigkeit " + items.HM_SZ_Heizung_Humidity.displayState
                  header: Schlafzimmer
                  icon: f7:thermometer
                  item: HM_SZ_Heizung_ActTemp
                  style:
                    background: '=(items.HM_SZ_Heizung_Humidity.state > 60) ? "#FF7276" : ""'
                  subtitle: = "Status " + items.HM_SZ_Heizung_ActProfile.displayState + " /
                    Fenster " + items.Group_Schlafzimmer_Fenster.state
                  trendItem: HM_SZ_Heizung_ActTemp

Strange thing is, that even when i copy…

 style:
                    background: '=(items.HM_SZ_Heizung_Humidity.state > 60) ? "#FF7276" : ""'

of the second cell to the first cell (1:1) the color does not change (in the second it does!).

Any ideas?

Thanks Alex

The actual strange thing is that you report the second cell does change, because neither of them should. There’s a minor issue and a major issue with what you’ve posted.

The minor issue is your comparisons items.HM_SZ_Heizung_Humidity.state > 60 and items.Home_Anwesenheitserkennung.state > 0. All states returned by items.itemName.state are string values, even if the item is some other item type. String comparisons are not the same as numerical comparisons because string comparisons look at each value one character at a time so “7” is greater than “60” because the character code for “7” is larger than the character code for “6”. To get the actual numerical comparison that you are looking for you need to convert the state to a number first using Number(value), Number.parseInt(value), or Number.parseFloat(value) depending on the situation. parseFloat is probably the most broadly applicable, so if you don’t know which one to choose, just use that one.

The major issue is that neither the oh-label-cell or the oh-cell that it is derived from accept a style property. The label cell does have a stateStyle property, but (as the name implies) that only applies styling to the state label itself. No other style declaration are passed on the the cells.

There is a direct, built-in way to change the background of a cell using the color property, but this is restricted to the default f7 color palette, so if you want a custom color such as #FF7276 then you need to use an indirect method.

The easiest is probably just to put an additional element in the background of the cell and set the background color of that element. If you add:

slots:
  background:
    - component: div
      config:
        style:
          width: 100%
          height: 120px
          background: '=(Number.parseFloat(items.Home_Anwesenheitserkennung.state) > 0) ? "#FF7276" : ""'

to your label cell, you will colorize the background of the cell according to your formula.

1 Like

Thank you, this works perfect!

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.