Popup for Shutter-Widget

Hi Community,

I built the following shutter widget with 5 information fields myself. Now I would like to change this to save space so that the last 4 pieces of information can only be seen via a POPUP. If possible, this window should be opened via a button.
Unfortunately, I am currently reaching my limits with this. Can someone help me?

Thanks in advance.

Here is the previous code:

uid: shutter_widget_v5
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Geratetemperatur</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: May 9, 2021, 3:16:39 AM
component: f7-card
config:
  style:
    width: 250px
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
              style:
                width: 250px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              item: =props.control
              dirIconsStyle: chevron_{dir}_square_fill
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title1
                          item: =props.item1
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            margin-right: 0px
                            z-index: 1
                          title: =props.title2
                          item: =props.item2
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title3
                          item: =props.item3
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title4
                          item: =props.item4
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title5
                          item: =props.item5

How about a button that has an action calling e.g. another widget.
Someone tried something similar here.

I did something like this in my shutter widget:

I will try to make a solution for myself from the example of @DrRSatzteil.
I would, however, welcome any other suggestions.

I now have a result that I am not entirely satisfied with. Here the pictures:

screenshot_8

and here the code:

uid: shutter_widget_v7
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_GerƤtetemperatur</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: Apr 29, 2022, 5:30:07 AM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
    width: 250px
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
              style:
                width: 250px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              dirIconsStyle: chevron_{dir}_square_fill
              item: =props.control
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: =props.item1
                          style:
                            font-size: 13px
                            margin-bottom: 0px
                            margin-left: 0px
                            margin-top: 5px
                            width: 220px
                            z-index: 1
                          title: =props.title1
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-evenly
                - align-items-center
              style:
                height: 25px
            slots:
              default:
                - component: oh-link
                  config:
                    action: popup
                    actionModal: widget:infos_popup_v7
                    actionModalConfig:
                      item2: =props.item2
                      item3: =props.item3
                      item4: =props.item4
                      item5: =props.item5
                      title: =props.title
                      title2: =props.title2
                      title3: =props.title3
                      title4: =props.title4
                      title5: =props.title5
                      title6: ='weitere Daten:'
                    actionPosition: center
                    text: ='mehr...'
uid: infos_popup_v7
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Apr 29, 2022, 5:36:40 AM
component: f7-card
config:
  style:
    width: 250px
    background: '=(props.background) ? props.background : ""'
    color: peru
    filter: brightness(95%)
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            margin-right: 0px
                            z-index: 1
                          title: =props.title2
                          item: =props.item2
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title3
                          item: =props.item3
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title4
                          item: =props.item4
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title5
                          item: =props.item5
    - component: oh-button
      config:
        class:
          - margin-horizontal
        fill: true
        large: true
        popupClose: true
        round: true
        text: ='Close'

Unfortunately, I havenā€™t managed to reduce the Image popup widget to a specific size yet.
Does anyone of you have a tip for me?
Thanks in advance!

You may want to try a popover instead. It only has the size of your components unlike the relatively big popup component.

I already had this idea. However, I didnā€™t manage to implement it. How does the code have to be structured then?
Could you help me with this?

I might be wrong but as far as I remember all you need to do is change the popup action to a popover action.

I donā€™t know if this works with a f7-card component. Maybe you could drop the card and use a block component instead of the card-content. But I would also need to try this. Maybe someone else knows a definite answer?!

That may be, but Iā€™m really overwhelmed with it. In the meantime, however, I have also made a little progress with a popover campaign. However, the output is always displayed at the top left of the screen. Maybe someone else can tell me how to place the ā€œinfos_popup_v7ā€ widget in the middle of the screen.

Here are the pictures:

screenshot_11

screenshot_10

ā€¦ and here the code:

uid: shutter_widget_v7
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_GerƤtetemperatur</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: Apr 30, 2022, 3:15:15 PM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
    width: 250px
    height: 250px
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              dirIconsStyle: chevron_{dir}_square_fill
              item: =props.control
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: =props.item1
                          style:
                            font-size: 13px
                            margin-bottom: 0px
                            margin-left: 0px
                            margin-top: 5px
                            width: 220px
                            z-index: 1
                          title: =props.title1
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-evenly
                - align-items-center
              style:
                height: 25px
            slots:
              default:
                - component: oh-button
                  config:
                    title0: Something
                    outline: true
                    action: popover
                    actionModal: widget:infos_popup_v7
                    actionModalConfig:
                      item2: =props.item2
                      item3: =props.item3
                      item4: =props.item4
                      item5: =props.item5
                      title: =props.title
                      title2: =props.title2
                      title3: =props.title3
                      title4: =props.title4
                      title5: =props.title5
                    fill: true
                    text: mehr ...
                    style:
                      position: absolute
                      top: 160px
                      left: 15px
                      text-align: center
                    popoverOpen: .popOver
                - component: f7-popover
                  config:
                    class: popOver
                    closeByBackdropClick: true
                    closeByOutsideClick: true
                    backdrop: false
                    closeOnEscape: true
                    style:
                      vertical-align: center
                      horizontal-align: center
uid: infos_popup_v7
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Apr 30, 2022, 5:00:35 AM
component: f7-card
config:
  style:
    position: absolute
    background: '=(props.background) ? props.background : ""'
    color: peru
    filter: brightness(95%)
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          style:
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            margin-right: 0px
                            z-index: 1
                          title: =props.title2
                          item: =props.item2
                      - component: oh-label-item
                        config:
                          style:
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title3
                          item: =props.item3
                      - component: oh-label-item
                        config:
                          style:
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title4
                          item: =props.item4
                      - component: oh-label-item
                        config:
                          style:
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title5
                          item: =props.item5

The position of the popover is determined by the popoverā€™s parent, I believe. In the case where you use the built-in OH popover action, that parent is the window and therefore the popover is aligned with the window. To make the popover aligned with some part of your widget, the popover has to be built inside the widget.

This is not as bad as it sounds, and, in fact, youā€™re most of the way there already. While youā€™re using the OH popover action, all these lines:

                - component: f7-popover
                  config:
                    class: popOver
                    closeByBackdropClick: true
                    closeByOutsideClick: true
                    backdrop: false
                    closeOnEscape: true
                    style:
                      vertical-align: center
                      horizontal-align: center

are not doing anything. They do not reference the widget that you just happen to be opening as a popover. They are however, exactly what you want if you are incorporating your own popup into the widget. Just take all the components from your infos_popup and place them in the default slot of the f7-popup component.

Then you can just get rid of all the action based keys in the oh-button and just keep the popoverOpen key. You may want a more descriptive class name than just ā€˜popOverā€™ the element will already have that class. But if you use something like class: info-pop and just set the popoverOpen and popoverClose properties to .popover.info-pop you should be well on your way.

If you want to see an example you can just look at the code for my widget here (use the link at the bottom - the same widget also has built-in popups if youā€™re rather use that instead of a popover).

Many thanks for the answer. I understood part of your solution. However, I have to deal with her example first, which will take me some time.

Sorry, this is very difficult for me, are there any other examples I could look at?

No worries, building the popups/popovers in the widgets does get a little involved. The basics are as follows:

In your widget you need an f7-popup or f7-popover component as a child of the main widget component. In your case, that main component is the f7-card, so your basic structure is something like this:

component: f7-card
config:
  ...card config
slots:
  default:
    - component: f7-card-content
      ...all your basic visible components as you're already laid out
    - component: f7-popover
      config:
        ...popover configurations
      slots:
        default:
           ...all the components for your popover

The only other step is to make sure that you have at least one component on the widget that can open the popover and some way to close the popover once itā€™s open. For this you have to use the f7 built-in popoverOpen and popoverClose properties; you canā€™t use the oh specific actions. Using popoverOpen and popoverClose, is however pretty easy. Each of them just take a css identifier that points to the element you want opened/closed. For reasons specific to css in this case it is best just to stick to css classes (which are identified with a ā€˜.ā€™ in front of them). First then, you have to assign a fairly unique class name to your popover. Every popup automatically gets a class of popup and every popover gets popover, but you donā€™t want it to be one of these generic names in case your widget gets more complicated because then there might be some confusion as to which element you are trying to open. So, best to just add your own additional class.

- component: f7-popover
  config:
    class: some-unique-class-name

Second, once you have a unique class name, then you just use that for the popoverOpen and popoverClose values. If you want to be even more precise about what you are identifying, then you can included the generic class as well by chaining together the css class names.

- component: some-widget-component
  config:
    popoverOpen: .popover.some-unique-class-name
    ...rest of the component config

If you want the popover to automatically close when youā€™ve interacted with it, then you just use popoverClose on any of the components in the popover that your likely to click on or specifically add a close button.

    - component: f7-popover
      config:
        ...popover configurations
      slots:
        default:
          - component: oh-button
            config:
              popoverClose: .popover.some-unique-class-name
              text: Close popover
          ...rest of popover

Iā€™m impressed how much effort they put into helping me. Thanks for that, but I can deal with that later.

Iā€™ll get backā€¦

Iā€™m sorry, Iā€™m throwing in the towel - Iā€™m giving up. Many hours spent on this now and no result. Here is my last code, maybe someone will succeed and have more success than me:

uid: shutter_widget_v9
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_GerƤtetemperatur</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: May 1, 2022, 3:36:16 AM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
    width: 250px
    height: 250px
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              dirIconsStyle: chevron_{dir}_square_fill
              item: =props.control
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: =props.item1
                          style:
                            font-size: 13px
                            margin-bottom: 0px
                            margin-left: 0px
                            margin-top: 5px
                            width: 220px
                            z-index: 1
                          title: =props.title1
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-evenly
                - align-items-center
              style:
                height: 25px
            slots:
              default:
                - component: f7-popover
                  config:
                    class: info-pop
                    closeByBackdropClick: true
                    closeByOutsideClick: true
                    backdrop: false
                    closeOnEscape: true
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-evenly
                - align-items-center
              style:
                height: 25px
            slots:
              default:                    
                  slots:
                    default:
                      - component: oh-list
                        slots:
                          default:
                            - component: f7-list-item
                              slots:
                                default:                    
                                  - component: oh-button
                                    config:
                                      popoverOpen: .popover.info-pop
                                      popoverClose: .popover.info-pop
                                      outline: true
                                      action: popover
                                      fill: true
                                      text: mehr ...

@JustinG

Thank you once again for your support. It seems as if Iā€™m reaching my limits here as a layman.

Sorry, you got very close. I see from what you put here where my previous post was a little confusing. If you wish to come back to this at some point, hereā€™s what I would do with what youā€™ve posted. Really Iā€™ve just changed the level of the popover and moved the button to the body of the widget so that itā€™s there to allow you to open the popover:

uid: shutter_widget_v9
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_GerƤtetemperatur</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: May 1, 2022, 3:36:16 AM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
    width: 250px
    height: 250px
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              dirIconsStyle: chevron_{dir}_square_fill
              item: =props.control
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: =props.item1
                          style:
                            font-size: 13px
                            margin-bottom: 0px
                            margin-left: 0px
                            margin-top: 5px
                            width: 220px
                            z-index: 1
                          title: =props.title1
                - component: oh-button
                  config:
                    popoverOpen: .popover.info-pop
                    outline: true
                    action: popover
                    fill: true
                    text: mehr ...
    - component: f7-popover
      config:
        class: info-pop
        closeByBackdropClick: true
        closeByOutsideClick: true
        backdrop: false
        closeOnEscape: true
      slots:
        default:
          - component: Label
            config:
              text: replace this label component with the heirarchy of components from your popup widget

image

image

1 Like

@JustinG you are the greatest for me! Of course, I must continue with your submission. Take a look at what has become of it:

screenshot_2

However, I would like to make the popover a little larger so that it at least covers part of the base widget. I would also be interested in how the titles and items are displayed in a row in the popover. Can you give me any tips on this?
Here is the current code:

uid: shutter_widget_v9
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_GerƤtetemperatur</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: May 2, 2022, 4:14:58 PM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
    width: 250px
    height: 230px
  title: =props.title
  left: center
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              dirIconsStyle: chevron_{dir}_square_fill
              item: =props.control
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          style:
                            font-size: 13px
                            margin-bottom: 0px
                            margin-left: 0px
                            margin-top: 5px
                            width: 220px
                            z-index: 1
                          title: =props.title1
                          item: =props.item1
                - component: oh-button
                  config:
                    popoverOpen: .popover.info-pop
                    outline: true
                    raised: true
                    action: popover
                    fill: true
                    text: mehr ...
                    style:
                      position: absolute
                      top: 150px
                      left: 90px
                      text-align: center
    - component: f7-popover
      config:
        class: info-pop
        closeByBackdropClick: true
        closeByOutsideClick: true
        backdrop: false
        closeOnEscape: true
      slots:
        default:
          - component: oh-label-item
            config:
              style:
                font-size: 13px
                margin-left: 0px
                margin-bottom: 0px
                margin-top: 5px
                margin-right: 0px
                -index: 1
              title: =props.title2
              item: =props.item2
          - component: oh-label-item
            config:
              style:
                font-size: 13px
                margin-left: 0px
                margin-bottom: 0px
                margin-top: 5px
                margin-right: 0px
                -index: 1
              title: =props.title3
              item: =props.item3
          - component: oh-label-item
            config:
              style:
                font-size: 13px
                margin-left: 0px
                margin-bottom: 0px
                margin-top: 5px
                margin-right: 0px
                -index: 1
              title: =props.title4
              item: =props.item4
          - component: oh-label-item
            config:
              style:
                font-size: 13px
                margin-left: 0px
                margin-bottom: 0px
                margin-top: 5px
                margin-right: 0px
                -index: 1
              title: =props.title5
              item: =props.item5

Note:
May I send you a personal message?

This is fairly easy. You can add style settings directly to the popover component. In this case the default width of the popover seems to be 200px so if you want to make it a little wider, you would do something like this:

    - component: f7-popover
      config:
        class: info-pop
        closeByBackdropClick: true
        closeByOutsideClick: true
        backdrop: false
        closeOnEscape: true
        style:
          width: 250px

Youā€™re oh-label-items are not displaying the way you intend because they are not inside a list at the moment. All the components that end in -item are built to be the child components of a list; usually either a basic oh-list or a standalone oh-list-card. So in this case you want the fist component of your popover to be an oh-list and make all the label items children of that list, like this:

    - component: f7-popover
      config:
        class: info-pop
        closeByBackdropClick: true
        closeByOutsideClick: true
        backdrop: false
        closeOnEscape: true
        style:
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: true
            slots:
              default:
                - component: oh-label-item
                  config:
                    style:
                      font-size: 13px
                      margin-left: 0px
                      margin-bottom: 0px
                      margin-top: 5px
                      margin-right: 0px
                      -index: 1
                    title: =props.title2
                    item: =props.item2
                - component: oh-label-item
...rest of the label items...

image

Of course.

I think everything is working very well now. Here is the result again:

screenshot_3

screenshot_4

and the code:

uid: shutter_widget_v9
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>_GerƤtetemperatur</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: May 2, 2022, 5:54:09 PM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
    width: 250px
    height: 230px
  title: =props.title
  left: center
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              dirIconsStyle: chevron_{dir}_square_fill
              item: =props.control
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          style:
                            font-size: 13px
                            margin-bottom: 0px
                            margin-left: 0px
                            margin-top: 5px
                            width: 220px
                            z-index: 1
                          title: =props.title1
                          item: =props.item1
                - component: oh-button
                  config:
                    popoverOpen: .popover.info-pop
                    outline: true
                    raised: true
                    action: popover
                    fill: true
                    text: mehr / weniger ...
                    style:
                      position: absolute
                      top: 150px
                      left: 55px
                      text-align: center
    - component: f7-popover
      config:
        class: info-pop
        closeByBackdropClick: true
        closeByOutsideClick: true
        backdrop: false
        closeOnEscape: true
        style:
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: true
            slots:
              default:
                - component: oh-label-item
                  config:
                    style:
                      font-size: 14px
                      margin-left: 0px
                      margin-bottom: 0px
                      margin-top: 5px
                      margin-right: 0px
                      -index: 1
                    title: =props.title2
                    item: =props.item2
                - component: oh-label-item
                  config:
                    style:
                      font-size: 14px
                      margin-left: 0px
                      margin-bottom: 0px
                      margin-top: 5px
                      margin-right: 0px
                      -index: 1
                    title: =props.title3
                    item: =props.item3
                - component: oh-label-item
                  config:
                    style:
                      font-size: 14px
                      margin-left: 0px
                      margin-bottom: 0px
                      margin-top: 5px
                      margin-right: 0px
                      -index: 1
                    title: =props.title4
                    item: =props.item4
                - component: oh-label-item
                  config:
                    style:
                      font-size: 14px
                      margin-left: 0px
                      margin-bottom: 0px
                      margin-top: 5px
                      margin-right: 0px
                      -index: 1
                    title: =props.title5
                    item: =props.item5
1 Like

I still have one question: how do you set the color of the item values?