Fill a list item with different items using oh-repeater

Add-ons UIs
1

Good morning,

I’m a bit on the fence. A few weeks ago you already helped me to create my CustomWidget for the windows of a room:

Code:

uid: windowCard
tags:
  - Tobsi
props:
  parameters:
    - label: Title
      name: title
      required: false
    - context: item
      description: Item with all window states of this room
      label: Room
      name: location
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Dec 21, 2023, 8:39:47 PM
component: f7-card
config:
  style:
    border-radius: var(--f7-card-expandable-border-radius)
  title: =props.title
slots:
  default:
    - component: oh-list
      slots:
        default:
          - component: oh-repeater
            config:
              for: equip
              fragment: true
              groupItem: =props.location
              sourceType: itemsInGroup
            slots:
              default:
                - component: oh-repeater
                  config:
                    filter: loop.point.tags.includes('OpenState') && loop.point.tags.includes('Opening')
                    for: point
                    fragment: true
                    groupItem: =loop.equip.name
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          icon: oh:window
                          iconUseState: true
                          item: = loop.point.name
                          title: = loop.point.label

Now I have created a timestamp item for the window contact, which I would like to display in the footer.
However, I am at a complete loss as to how I can assign different item states to my list item.

grafik

I was thinking that after the first repeater, I would have to set an additional repeater with filter: loop.equip.tags.includes('window'). However, I don’t know how to filter out the openstate first and assign it as an item and then filter the timestamp and insert the value into the footer.

I hope you have figured out my problem and can help me. Thank you in advance.

2

Assuming the timestamp Item has a name that can be “calculated” from the name of the Contact Item, all you need to do is reference the date time Item in the oh-label-item widget. There is nothing that says any given widget can only show information from one Item. For example it can be as simple as

                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          icon: oh:window
                          iconUseState: true
                          item: = loop.point.name
                          title: = loop.point.label
                          footer: =  items[loop.point.name+'_Timestamp'].displayState

The change above assumes you’ve configured a State Description metadata on the Timestamp Item. If not use .state instead of .displayState

The slots created by the repeater can be as simple or as complex as you need to. So if an oh-label-item by itself isn’t sufficient to show everything like you need you can construct a more complicated compound widget for each. But in this case, all you need is to show the timestamp along with the Item state and you can do that in the title, or the footer, or inline with the state.

There’s no need for more filters or anything like that.

1 Like