Visible property in oh-repeater

Hi,
i try to create a custom widget.
It contains a oh-repeater with oh-toggle-items:

      - component: oh-repeater
        config:
          visible: '=(items.vac_eG_selected.state == "ON") ? "true": "false"'
          for: item
          sourceType: itemsWithTags
          itemTags: vac_Room_eG
          fragment: false
        slots:
          default:
            - component: oh-toggle-item
              config:
                visible: '=(items.vac_eG_selected.state == "ON") ? "true": "false"'
                icon: f7:lightbulb
                iconColor: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"'
                color: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"'
                title: =loop.item.label
                item: =loop.item.name

which works so far and results in:

whats doesn’t work is the visible Switch to hide the Items created by the repeater.

Any suggestions?

Greets

Welcome to the forums!

In this case the visible in the repeater would apply to the repeater component itself, but since the repeater isn’t a real component that’s rendered this value doesn’t really have any meaning. The property you want here is the filter property which takes all the values returned by the repeater and keeps only the ones that return a true filter expression.

You can read about it in the repeater documentation here:

It looks, from your example like you would like to include or suppress all the items based the the value of the additional item vac_eG_selected so you just need that state test as the filter:

filter: '(items.vac_eG_selected.state == "ON")'

This will be true for all the elements in the repeater when that item is on and they will all be included and it will be false for all the elements when that item is off and they will all be excluded meaning your repeater will render no items.

2 Likes

try filter property of oh-repeater

1 Like

Thank you very much for your fast reply.
It worked :+1:
I changed the condition to a String Item, so i write the selected floor to the String item. Depending on the String (Floor) the available Rooms are shown and can be selected.