Accordion list problem

Setup, Configuration and Use Widgets
1

Hello everyone,

I have a problem that I haven’t been able to solve for three days. I wrote a widget for my energy consumption. As you can see in the source code, I use a list card and it works quite well as an accordion list except for the last entry “Balcony Power Plant”. I don’t see a list there.
I can’t explain why it works for “Phase A-C” but not for “Balcony Power Plant”.

Energie Monitor
Energie Monitor809×846 43.6 KB

I hope someone can help me.

Best regards, Björn

uid: Unterverteiler
tags: []
props:
  parameters:
    - default: Energie Monitor
      label: Titel
      name: titel
      required: false
      type: TEXT
    - default: Phase A,Phase B,Phase C
      description: Existierende Phasen, getrennt durch Komma.
      label: Phasen
      name: phasen
      required: true
      type: TEXT
    - context: item
      label: Phase A
      name: phaseA
      required: false
      type: TEXT
    - context: item
      description: Gruppe mit Geräten die auf der Phase A sind und die Leistung messen können.
      label: Gruppe Phase A.
      name: grpPhaseA
      required: false
      type: TEXT
    - description: Liste mit Geräten die auf der Phase A sind, getrennt durch Semikolon.
      label: Liste Phase A.
      name: listPhaseA
      required: false
      type: TEXT
    - context: item
      label: Phase B
      name: phaseB
      required: false
      type: TEXT
    - context: item
      description: Gruppe mit Geräten die auf der Phase B sind und die Leistung messen können.
      label: Gruppe Phase B.
      name: grpPhaseB
      required: false
      type: TEXT
    - description: Liste mit Geräten die auf der Phase B sind, getrennt durch Semikolon.
      label: Liste Phase B.
      name: listPhaseB
      required: false
      type: TEXT
    - context: item
      label: Phase C
      name: phaseC
      required: false
      type: TEXT
    - context: item
      description: Gruppe mit Geräten die auf der Phase C sind und die Leistung messen können.
      label: Gruppe Phase C
      name: grpPhaseC
      required: false
      type: TEXT
    - description: Liste mit Geräten die auf der Phase C sind, getrennt durch Semikolon.
      label: Liste Phase C.
      name: listPhaseC
      required: false
      type: TEXT
    - context: item
      description: Item mit dem Gesamtverbrauch der Phasen.
      label: Gesamtverbrauch
      name: gesamtverbrauch
      required: false
      type: TEXT
    - context: item
      description: Wechselrichtergruppe der PV-Anlage.
      label: PV-Anlage
      name: pvanlage
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 29, 2024, 9:39:11 PM
component: oh-list-card
config:
  title: =props.titel
  noHairlinesBetween: true
  accordionList: false
  mediaList: false
  simpleList: false
  style:
    font-weight: lighter
  stylesheet: >
    .card-header {
      background: #708090
    }
slots:
  default:
    - component: oh-repeater
      config:
        fragment: true
        accordionList: true
        for: int
        in: =props.phasen.split(",")
        sourceType: array
      slots:
        default:
          - component: oh-list-item
            config:
              accordionList: true
              title: =props.phasen.split(",")[loop.int_idx]
              after: =items[props[props.phasen.split(",")[loop.int_idx].replace(" ","").replace("P","p")]].state
              style:
                background-color: "#2f3234"
                color: "#adadad"
                border-style: none
                border-width: 0
                font-weight: lighter
            slots:
              accordion:
                - component: f7-list
                  config:
                    accordionList: true
                    noHairlinesBetween: true
                    style:
                      background-color: "#4D4D4D"
                      text-indent: 8px
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          fragment: true
                          accordionList: true
                          for: item
                          sourceType: itemsInGroup
                          groupItem: =props["grp"+props.phasen.split(",")[loop.int_idx].replace(" ", "")]
                          fetchMetadata: devicedata
                        slots:
                          default:
                            - component: oh-label-item
                              config:
                                accordionList: true
                                title: =loop.item.metadata.devicedata.config.device
                                after: '=(loop.item.metadata.devicedata.config.name == "PV-Anlage-Output") ? (items[loop.item.name].state) : items[loop.item.name].state'
                                action: popup
                                popupOpen: ='.popup'+loop.item.name
                                style:
                                  background-color: '=((loop.item.metadata.devicedata.config.name == "PV-Anlage-Output") && (items[loop.item.name].state.split(" ")[0] > 0)) ? "green" : ""'
                                  color: '=((loop.item.metadata.devicedata.config.name == "PV-Anlage-Output") && (items[loop.item.name].state.split(" ")[0] > 0)) ? "white" : "#adadad"'
                                  --f7-list-item-after-text-color: '=((loop.item.metadata.devicedata.config.name == "PV-Anlage-Output") && (items[loop.item.name].state.split(" ")[0] > 0)) ? "white" : "#adadad"'
                            - component: f7-popup
                              config:
                                class: ='popup'+loop.item.name
                                closeByBackdropClick: false
                                closeByOutsideClick: false
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                              slots:
                                default:
                                  - component: oh-list-card
                                    config:
                                      title: =loop.item.metadata.devicedata.config.device
                                      simpleList: false
                                      noHairlinesBetween: true
                                      stylesheet: >
                                        .card-header {
                                          background: #708090
                                        }
                                    slots:
                                      default:
                                        - component: oh-toggle-item
                                          config:
                                            title: Schalter
                                            item: =loop.item.name.split("_").slice(0,-1).join("_")+"_Schalter"
                                            iconColor: '=(items[loop.item.name.split("_").slice(0,-1).join("_")+"_Schalter"].state == "ON") ? "green" : "gray"'
                                            color: '=(items[loop.item.name.split("_").slice(0,-1).join("_")+"_Schalter"].state == "ON") ? "green" : "gray"'
                                            action: toggle
                                            actionItem: =loop.item.name.split("_").slice(0,-1).join("_")+"_Schalter"
                                            actionCommand: ON
                                            actionCommandAlt: OFF
                                            noChevron: true
                                            style:
                                              background-color: "#2f3234"
                                              color: "#adadad"
                                              --f7-toggle-hover-bg-color: transparent
                                              --f7-toggle-pressed-bg-color: transparent
                                              text-indent: 8px
                                              padding-right: 34px
                                        - component: oh-label-item
                                          config:
                                            title: Leistung
                                            item: =loop.item.name
                                            action: analyzer
                                            actionAnalyzerItems: =loop.item.name
                                            style:
                                              background-color: "#2f3234"
                                              color: "#adadad"
                                              text-indent: 8px
                                        - component: oh-label-item
                                          config:
                                            title: Strom
                                            item: =loop.item.name.split("_").slice(0,-1).join("_")+"_Strom"
                                            style:
                                              background-color: "#2f3234"
                                              color: "#adadad"
                                              text-indent: 8px
                                              padding-right: 32px
                                        - component: oh-label-item
                                          config:
                                            title: Status
                                            item: =loop.item.name.split("_").slice(0,-1).join("_")+"_Status"
                                            style:
                                              background-color: "#2f3234"
                                              color: "#adadad"
                                              text-indent: 8px
                                              padding-right: 17px
                                        - component: oh-button
                                          config:
                                            title: Schließen
                                            text: Schließen
                                            justify-content: flex-start
                                            action: popup
                                            popupClose: ='.popup'+loop.item.name
                                            class:
                                              - display-flex
                                              - justify-content-center
                                              - align-items-center
                                            style:
                                              background-color: "#708090"
                                              color: white
                                              height: 40px
                                              --f7-button-border-radius: 0px 0px 4px 4px
                                              --f7-button-vertical-align: center
                      - component: oh-repeater
                        config:
                          fragment: true
                          accordionList: true
                          for: j
                          in: =props.listPhaseA.split(";")
                          sourceType: array
                        slots:
                          default:
                            - component: oh-label-item
                              config:
                                title: =props["list"+props.phasen.split(",")[loop.int_idx].replace(" ", "")].split(";")[loop.j_idx]
                                after: ""
    - component: oh-label-item
      config:
        title: Gesamtverbrauch
        after: =items[props.gesamtverbrauch].state
        accordionList: true
        action: analyzer
        actionAnalyzerItems: =props.gesamtverbrauch
        style:
          background-color: "#2f3234"
          color: "#adadad"
          border-style: none
          border-width: 0
          font-weight: lighter
          border-top: 1px dashed
    - component: oh-list-item
      config:
        accordionList: true
        title: Balkonkraftwerk
        after: =items[props.pvanlage+"_ACLeistung"].state
        style:
          background-color: "#2f3234"
          color: "#adadad"
          border-style: none
          border-width: 0
          font-weight: lighter
          border-top: 1px solid
      slots:
        accordion:
          - component: f7-list
            config:
              accordionList: true
              noHairlinesBetween: true
              style:
                background-color: "#4D4D4D"
                text-indent: 8px
            slots:
              default:
                - component: oh-label-item
                  config:
                    accordionList: true
                    title: Test1
                - component: oh-label-item
                  config:
                    accordionList: true
                    title: Test2
2

Your use of accordionList is somewhat haphazard. This is only a property of the f7-list (and therefor, the oh-list that is built from the f7-list). It doesn’t belong in any other component; with one exception.

The accordion slot is not a default f7 feature, it has been built into the oh-list-item based components to make creating accordion lists easy (it automatically takes care of the intermediate f7 components you would have to add to make the accordion item work at that point. However, one of the ways that accordion slot is configured is that the parent component must have the accodionList property set to true. This makes sense because the parent of a list item should be a list. The exception, of course, is when the list is filled using a repeater. In that case, the repeater is the parent element of the list items, not the list itself and that is why you must add accordionList: true to the repeater. But, if you have set accordionList to true in any of the other elements, it is not doing anything at all.

This also explains why the last item in your widget does not show the accordion container. If you look carefully at the structure of your widget, the direct parent of the Balkonkraftwerk list item is the root component itself, the list card. In that list card you have explicitly set accordionList: false and so the accordion slot is not rendered.

If you just set accordionList: true for the root card and the first repeater and then remove it from all the components your widget should work the ay you want to.

3

Oh no, you’re right. I completely ignored the root element. I only made my various accordionList entries because I didn’t know what to do next.

Thank you very much.