Hey @Ursusprimus
I can understand that the oh-repeater
component might be hard to understand at first glance but it’s more than worth digging into it’s concept, as its maybe one of the mightiest ones that the MainUI has to offer currently.
Some material which might help you here:
It’s crucial that all elements (that should trigger a list selection) are childs of the oh-repeater
component, to distinguish between the correct popup to open.
In the way you did it, the selection popups have the same ID and the system grabs one randomly, which is the reason for the observed behaviour, as you already recognized by yourself.
The ‘funny’ thing is, that you made yourself much more work than needed and you already touched the right elements while doing so (I might repeat me here, but trust me, that you’ll save a lot of time in the long-term if this trial&error approach changes to ‘I understand what I do’ - It’s worth it!) :
- component: oh-repeater
config:
sourceType: array
for: selection
in:
- title: Musik/Lists
icon: f7:music_albums
item: Alexa_Musik
- title: Alexa Gerät
icon: f7:tv_music_note
item: Alexa_Device
This first oh-repeater
component of type: array
creates the structure of its childs (everything that is in it’s default
slot) for every array that is defined at the in:
part of it (every array starts with the dash -
). Each of these arrays have elements assigned to it (3 for each of them in this case).
As you want to create 2 selection elements you need 2 arrays with 3 elements each (The list-title; list-icon & the itemName which holds your selection metadata)
To access these array elements you have to use the name of the for-loop (selection
in that case) and the elements name… so for the list-title for example, if would look like:
= |
loop |
.selection |
.title |
Start your expression [fixed] |
Accessing the oh-repeater for-loop [fixed] |
Name of your loop [custom] |
Element inside your array that you want to access [custom] |
… which leads to:
=loop.selection.title
Hope this made it a bit more clear for you.
Corrected YAML
uid: ursusprimus_selection
component: f7-card
slots:
default:
- component: f7-row
config:
class:
- padding
slots:
default:
- component: oh-repeater
config:
sourceType: array
for: selection
in:
- title: Musik/Lists
icon: f7:music_albums
item: Alexa_Musik
- title: Alexa Gerät
icon: f7:tv_music_note
item: Alexa_Device
fragment: true
slots:
default:
- component: f7-col
slots:
default:
- component: oh-list
config:
id: list
slots:
default:
- component: oh-list-item
config:
title: =loop.selection.title
after: =items[loop.selection.item].displayState
smartSelect: true
icon: =loop.selection.icon
iconColor: default
popupOpen: =".selectionPopup_"+loop.selection_idx
style:
border: 1px solid lightgray
border-radius: 5px
- component: f7-popup
config:
class: ="selectionPopup_"+loop.selection_idx
slots:
default:
- component: f7-page
slots:
default:
- component: f7-navbar
config:
title: =loop.selection.title
style:
position: sticky
slots:
left:
- component: oh-link
config:
iconIos: f7:arrow_left
iconMd: material:arrow_back
iconAurora: f7:arrow_left
popup-close: true
- component: f7-list
config:
virtualList: true
slots:
default:
- component: oh-repeater
config:
sourceType: itemStateOptions
itemOptions: =loop.selection.item
for: option
fragment: true
slots:
default:
- component: oh-list-item
config:
title: =loop.option.label
actionFeedback: ='{ "text":"You selected <b>' + loop.option.label + '</b><br>Sending command <b>' + loop.option.value + '</b> to item", "position":"center","icon":"<i style=\\"color:green\\" class=\\"f7-icons\\">checkmark_alt</i>" }'
noChevron: true
radio: true
checked: "=loop.option.value === items[loop.selection.item].state ? true : false"
popupClose: true
action: command
actionItem: =loop.selection.item
actionCommand: =loop.option.value
- component: oh-list
config:
mediaList: true
slots:
default:
- component: oh-toggle-item
config:
title: Alexa starten
item: Alexa_Start