Change OH-button color in widget depending on item state?

Add-ons UIs
1

Is it possible to change the color of an OH-button in a widget depending on the item state?

My first try did not work:

    - component: f7-block
      config:
        class: bog
        style:
          display: flex
          flex-wrap: wrap
          justify-content: space-between
          align-content: space-between
          padding: 20px
      slots:
        default:
          - component: f7-segmented
            slots:
              default:
                - component: oh-button
                  config:
                    text: '=(props.OnButton) ? props.OnButton : "An"'
                    outline: true
                    action: command
                    actionItem: =props.item
                    actionCommand: ON
                    bgColor: "=(items[props.item].state === 'ON') ? green : white"
                    style:
                      width: 100px
                - component: oh-button
                  config:
                    text: '=(props.OffButton) ? props.OffButton : "Aus"'
                    outline: true
                    action: command
                    actionItem: =props.item
                    actionCommand: OFF
                    bgColor: "=(items[props.item].state === 'OFF') ? red : white"
                    style:
                      width: 100px
2

Yes possible
1 thing to look out for is on/off items like dimmers may be 0 or 100 as off/on
if you have altered the description metadata displayState maybe better
not sure - but not home to check if bgColor is correct or just color

1 Like
3

Your expression:

bgColor: "=(items[props.item].state === 'ON') ? green : white"

Is missing one piece. Because it is an expression, it is treating green and white as variables, which you haven’t defined. So no matter what the state of the item, this expression returns undefined. In order for it to return the strings 'green' or 'white' which the property expects, you have to place quotes around them.

bgColor: "=(items[props.item].state === 'ON') ? 'green' : 'white'"
1 Like
4

Thanks! Works perfectly! :grinning:

@JustinG
Can you also specify an RGB color using that syntax?
This does not work:
bgColor: “=(items[props.item].state === ‘ON’) ? ‘green’ : ‘rgb(211,211,211)’”
or
bgColor: “=(items[props.item].state === ‘ON’) ? ‘green’ : rgb(211,211,211)”

5

The property bgColor is tied to the property of the underlying f7 element. The f7 bg-color property only accepts a limited number of named color options:

If you want to use something that is not in that list then you will have to do it using css and the style property (and use the expression version with the quotes).

                - component: oh-button
                  config:
                    text: '=(props.OnButton) ? props.OnButton : "An"'
                    outline: true
                    action: command
                    actionItem: =props.item
                    actionCommand: ON
                    style:
                      width: 100px
                      background: “=(items[props.item].state === ‘ON’) ? ‘green’ : ‘rgb(211,211,211)’”

P.S. html uses a different color for ‘green’ than f7 does, so you’ll have to use the link I put above to get the color code for f7 green and use that in the expression if you want it to match exactly what you had before.

1 Like
6

Thx again!