UI list with similar but different types

Add-ons UIs
1

The use case is to implement a list with all batteries in the system to have an overview of the battery health. There are two types of battery items; battery level (number) and battery low indicator (ON/OFF). Each type has it own list widget (see https://community.openhab.org/t/example-custom-list-widgets).

All batteries have the property ‘Energy’ to filter for the list. The widget for the battery health is based on this example https://community.openhab.org/t/a-couple-of-simple-oh-repeater-examples/. Here the widget also specifies the layout for each item.

How to make the battery health widget use the widget list layout of each item?

A similar use case would apply for light with switches and dimmers.

2

I have moved this topic out of the add-on marketplace category, that category is only for publishing widgets that others can download and use.

You can reference another widget from within a custom widget. Instead of listing a component you use the syntax widget:. So, for example, if you have a custom widget named default_battery_widget you can call that as a component in another widget:

  - component: widget:default_battery_widget

In most cases you also need configuration parameters for your called widget. Those can be added just like you would add configuration to any other component:

  - component: widget:default_battery_widget
    config:
      item: Name_of_battery_item
3

Justin, thanks for your response.

I don’t think I understand how this solve the use-case. My thinking was that I cannot reference another widget since the list widget is defined in the semantic model for each item. The items are all batteries but have different list widgets due the differences in the things.

A workaround could be to create two sub-list, but I was looking for a solution to list different item widgets in one list (similar to how this is resolved in the equipment and property lists).

4

Just search through your elements once as type switch and once as no switch

      slots:
        default:
          - component: oh-list
            slots:
              default:
                - component: oh-repeater
                  config:
                    filter: '(loop.item.type=="Switch") ? true : false'
                    for: item
                    groupItem: =props.itemGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-toggle-item
                        config:
                          icon: =loop.item.category
                          iconUseState: true
                          item: =loop.item.name
                          title: =loop.item.label
                - component: oh-repeater
                  config:
                    filter: '(loop.item.type=="Switch") ? false : true'
                    for: item
                    groupItem: =props.itemGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          icon: =loop.item.category
                          iconUseState: true
                          item: =loop.item.name
                          title: =loop.item.label
5

Tallman, thank you for the proposed solution.

That should meet the use-case I intended.

Can I conclude that it is not possible to create a list that will just show the list widget as configured in the semantic model for the items?

6

It is possible but somewhat awkward. I don’t believe that there is any way to dynamically set a component. That is, each

 - component:

line must be hard-coded and cannot include a variable. So if you want to have the possibility of different components for a variable item, then you must either use something like Tallman’s solution or build each of those components and use the visible property to only show that one the you want.

 - component: oh-toggle
   config:
     visible: [true only if item is switch type otherwise false]
 - component: oh-knob
   config:
     visible: [true only if item is dimmer type otherwise false]

This gets even more complicated if you want to use the custom widget that has been set as the default list widget for an item. That information is stored in the listWidget metadata namespace. If you are using an oh-repeater then you can get access to this by using the fetchMetadata property. You can then compare the result of that to the various widget options in the visible properties as above. It would look something like this:

 - component: oh-repeater
   config:
     for: item
     fetchMetadata: listWidget
     ...other repeater options
   slots:
     default:
       - component: widget:default_widget_a
         config:
           item: loop.item
           visible: =(loop.item.metadata.listWidget.value == "widget:default_widget_a")
       - component: widget:default_widget_b
         config:
           item: loop.item
           visible: =(loop.item.metadata.listWidget.value == "widget:default_widget_b")
7

Hi Justin,
Thanks for the explanation. I am learning a lot here.
Very much appreciated.