Solved: Color logic not updating in custom widget

I’ve created a custom widget base on the OH3 examples.

The issue I’m having is the icon color is not changing with an update to the item state. As you can see in the image below, i toggled off the “Living Downlight 1 OnOff” item, but the icon stays green.

Widget YAML:

uid: all_lights
  - card
  - lights
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 4, 2021, 1:57:51 PM
component: f7-card
  title: All Lights
    - component: oh-list
          - component: oh-repeater
              fragement: true
              for: item
              sourceType: itemsWithTags
              itemTags: Switch,Light
              filter: loop.item.label.includes("Christmas") == false || items.TisTheSeason.state == "ON"
                - component: oh-toggle-item
                    icon: f7:lightbulb
                    iconColor: '=(loop.item.state == "ON") ? "green" : "gray"'
                    color: '=(loop.item.state == "ON") ? "green" : "gray"'
                    title: =loop.item.label

Image after toggle:

1 Like

Thanks so much.
I’ll use that reference in future.
The “fragement” is also part of the official docs. :grinning:
I might log a PR to update the example with your notation and correct the spelling mistakes.

One follow up question. I expected by extension to be able to do this:
title: =items[].label
but this doesn’t seem to work. Returns blank (not undefined, but blank).
loop.item.label works, but just trying to understand the difference.

1 Like

items[x] is a not a reference to a complete item object but a smaller dict that contains only two main properties of interest state (raw) and displayState (formatted if state display metadata is defined for the item). The best way to get the label is still loop.item.label.

1 Like

Amazing, thank you.
That totally explains it.