[Solved] MainUI: Select multiple items within parameters in custom widget

Add-ons UIs
1

Hi everybody,

i want to create a generic widget for a room that contains illumination, temperature settings and such.
Currently it looks like this:

image
image803×266 9.06 KB

The only challenge is that the room can have one or more lights, so I would like to configure a group of individual items and in the end those items shall be displayed in a list within the widget.

I think displaying shouldn’t be a problem, as far as I understand that’s what the oh-repeater component can be used.

But i cant find a way to tell the properties to allow me selecting multiple items. Does anybody have an idea?
The item context gives me:
image
and this gives me only the option to select one item:
image

This is my current configuration for that parameter

- description: Lights
      label: Lights
      context: item
      required: false
      type: TEXT
2

I don’t have a lot of experience with oh-repeater yet, but my understanding is you have to already have grouped the Items somehow such as in a Group, tags, metadata, etc. It also appears to support an array. But I don’t know of a way to tell it to let you select multiple Items on a property. Maybe context: group would work. I suspect that is where the widget that is displayed to select the Item is defined. I don’t see an enumeration of what values context can take though. And there is no guarantee that it returns an array usable by oh-repeater.

If group doesn’t work, you can set a tag on the Items and use itemWithTag as the source to iterate over in your oh-repeater. Or put them into a Group.

1 Like
3

You can use multiple: true.

- name: lightItems
  description: Lights
  label: Lights
  context: item
  required: false
  multiple: true
  type: TEXT

these parameters are ConfigDescriptionParameterDTO instances.

Then you can configure your parameter (which will be an array) in the repeater

component: oh-repeater
config:
  for: lightItem
  in: =props.lightItems

but you won’t have access to the label etc., your loop.lightItem will be the item names.

Another option is to use sourceType: itemsWithTags with the semantic tags that you defined for the relevant items and filter on the parent group (if your items are directly under the group)

component: oh-repeater
config:
  for: lightItem
  sourceType: itemsWithTags
  itemTags: Control,Light
  filter: loop.lightItem.groupNames.includes(props.groupItem)
3 Likes
4

Thanks a lout to you both.
It’s working both ways, but i’ll stick to the itemsWithTags