Show/hide icon by given (props) value?

Add-ons UIs
1

Hi,

I’m in the middle of migrating from OH 2.5 to OH 3.2 and started playing around with the custom widgets.

Now I would like to build a simple widget just showing the state of an item, where the state can have up to five different values, e.g:

Raining: true, false
Heating Status: comfort, standby, night
Home Status: home, sleeping, away, holiday
etc.

My goal is to have one widget, where I can set different icons (up to five) depending on values also given in props, e.g.:

home status = “home”, show icon “house” in color “green”

What’s working right now is to set an icon visible/not visible when I check against a given value in the widget code like:

...
- component: oh-icon
  config:
      icon: =props.icon_1_name
      visible: "=(items[props.item_name].state === 'home') ? true : false"
      style:
         color: =props.icon_1_color
...

Now, to get the things a bit more configurable, I would like to check against the value of a prop, like

...
- component: oh-icon
  config:
    icon: =props.icon_1_name
    visible: "=(items[props.item_name].state === props.item_value_1) ? true : false"
    style:
      color: =props.icon_1_color
....

where e.g. item_value_1 is set to “home” in props.

The second code snipped is not working… :frowning:

Is this possible?

Any hint would be great.
Thanks a lot in advance.

2

Yes, this is very possible.

In general, in the widgets, you do not need to resort to strict comparison (===). Most of the values you are going to work with are already strings so == will work just fine. I don’t think this is the source of the error here, but it will probably save you some headache later on.

If this is not evaluating correctly the you have to check that props.item_value_1 is returning what you think it is. Are you sure that is the correct property name (you have not shown the whole code so we can’t check)? Are you sure that you have populated that property with the correct value? Create a quick label in the widget and set that label text to props.item_value_1 to see:

- component: Label
  config:
    text: =props.item_value_1
3

Hi Justin,

thanks for the quick answer. I stripped down my widget code (there is a lot more) and started just with the icon part and it is working…

So the problem is somewhere else as you mentioned. Got to figure this out.

Many thanks again.