CustomWidget PopOver - Item from parameter does not use the configuration of the specific widget, but the last widget

Thanks again,
seems, that this works only while having the popover code directly within the “main”-widget and having the popover action part of an (direct) f7-component.

Same as Jan did:

So this works:

- component: f7-button
  config:
    action: popover
    popoverOpen: .detailList
  slots:
    default:
      - component: f7-popover
        config:
          class: detailList
          closeByBackdropClick: true
          closeByOutsideClick: true
          backdrop: false
          closeOnEscape: true
          style:
            --f7-popover-width: 400px
            --f7-popover-border-radius: 4px
        slots:
          default:
            - component: oh-list
              slots:
                default:
                  - component: oh-repeater
                    config:

Means, I can’t leverage the oh-card’s design and mimic that by f7-components - well: fair enaugh :wink:

Thanks guys for your help!

HI @RGroll, I have a follow up question. If i have 2 or more similar widgets in a site with the same popup and only by clicking again it shows the right one. this is a repeatable story. Is there a way to prevent this behaviour?

what do you mean by this?

I thought, I stick with the predefined layout of the basic oh-cells/oh-cards, e.g.:

… and just bother with some “details-widgets” as popover or popup to get a simple but similar look of the “top-level” UI elements.

Therefore I had a oh-label-card component in the above example with popover action.

If I can’t do this (because the missing styling options for the popover) I can still build the same look using the native f7-grid components.
Not a big deal - but some more work :wink:

got it, true. I ended up in just using custom widgets :-), but i any way wanted more control over backgrounds, content and highlight colors… as well as usable for iphones

image

image

I think, I’ll follow this too though…

Some hidden limits with the oh-* components may cost more time than it saves - finally … :wink:

Even though I’ve managed the above task meanwhile:

image

I’ve put a f7-button over the oh-label-card:

component: f7-card
config:
  outline: false
  noBorder: false
  padding: true
  noShadow: false
  style:
    --f7-card-margin-horizontal: 5px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 16px
    --f7-card-border-radius: 15px
    --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
    --f7-card-header-font-size: 14px
    --f7-card-header-font-weight: 600
slots:
  default:
    - component: oh-label-card
      config:
        title: =(props.titel) || (props.mainItem) || "Set properties.. "
        icon: =(props.icon || "f7:battery_25")
        label: = (items[props.mainItem].state + " " + props.delimiter + " " + items[props.secItem].state)
        footer: =props.footerText
        noBorder: true
        noShadow: true        
    - component: f7-button
      config:
        action: popover
        popoverOpen: .detailList
        style:
          position: absolute
          top: 0px
          width: 100%
          height: 100%
      slots:
        default:
          - component: f7-popover
            config:
              class: detailList
              closeByBackdropClick: true
              closeByOutsideClick: true
              backdrop: false
              closeOnEscape: true
              style:
                --f7-popover-width: 320px
                --f7-popover-border-radius: 4px
            slots:
              default:
                - component: oh-list
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: i
                          sourceType: itemsWithTags
                          itemTags: LowBattery
                          fetchMetadata: semantics,widgetOrder,uiSemantics
                          filter: loop.i.state != "OFF"
                        slots:
                          default:
                            - component: oh-label-item
                              config:
                                icon: f7:battery_25
                                iconColor: red
                                footer: =loop.i.label
                                title: =loop.i.metadata.uiSemantics.config.equipment + loop.i.metadata.uiSemantics.config.preposition + loop.i.metadata.uiSemantics.config.location
                                item: =loop.i.name
2 Likes

Can you please explain me how did you count the item state ( 0 von 17) ? :slight_smile:

Sure :wink:

That’s a good question, since the solution is not that obvious in openHAB3 :wink:

When checking the documentation for aggregation functions you may have noticed the COUNT() aggregation:

Unfortunately, the COUNT() aggregator is not selectable in the MainUI of openHAB3.

BUT: You can work around that limitation by importing group items with COUNT() aggregators from textual configuration:

This essentially adds two groups where one counts for empty and another count for good batteries.

A third group simply sums up the both which provides me the total number of batteries:

NumOfEmptyBatts + NumOfGoodBatts = TotalNumOfBatts

All BatteryLow-items belong to both count-groups - that’s it :wink:

3 Likes

Thanks that works great with your popup widget :wink:

Nice trick. But how do you dynamically put your items into either of these groups, based their battery level ?

This works out of the box only with devices that support a low battery channel.
if they don‘t, you need to create a virtual lowBat switch item and set it to on or off according to your defined treshold.

Edit : As COUNT supports a regular expression, it is worth to try

COUNT(<20)

Edit2: Hmmm, not working, as the validator does not like the „<„, but also does not like a string, even the docs list it as possible.

Edit3:
It should work with a virtual Item with the hysterese profile, linked to the batterylevel channel. This usage is noted in the profiles docu section…

Thanks Markus.
I’ve put the lowbat items in both groups by hand… no fancy dynamic here :wink:

Yes, even including UoM i.e. you can set “3.0 V” as a limit. But you must select it to have a switch type, and it’s not a virtual item, it’s still bound to the channel that has the physical measurement (of battery voltage).

Sorry, you are wright, it is not a virtual item.

https://dict.leo.org/englisch-deutsch/wright
:slight_smile:

:wink:

Let me come back to this post from you Rainer: What you are doing there is fine since you only have static text in the popover. As soon as you want to show some item related info or controls in the popup I can confirm now that this does not work reliably. I have the following scenario:

I have two instances of the same widget on the same page. Both widgets try to open a popover which in turn shows stepper controls for a number item (I’m talking about my light control widgets). Since the class of the popover is hard coded in the widget there is no way for the browser to determine which element in the DOM should be displayed when you click in the link that opens the popover. I just realised this today when I always saw the popover with the item that was configured in the other widget but not the one I was clicking on.

So the solution still has to be the separate widget then which should work in any case. However I don’t think that anyone has solved the positioning issue yet…

Oh and by the way I tried to work around that by using a dynamic classname by reusing your suggestion from here: New Stylesheet property - #5 by RGroll

Correction - It seems to work like this:

I use the name of the timer item as css class like shown in the code below:

          - component: oh-link
            config:
              text: Timer
              visible: "=props.shutdowntimer ? true : false"
              action: popover
              popoverOpen: '="."+props.shutdowntimer'
              style:
                position: absolute
                bottom: 10px
            slots:
              default:
                - component: f7-popover
                  config:
                    class: '=props.shutdowntimer'
                  slots:
                    default:
                      - component: oh-stepper-card
                        config:
                          item: =props.shutdowntimer
                          title: Ausschalten in Minuten

This way the class name may not necessarily be unique as you may use the same configuration in different widgets. However you would always open the control for the right item. This feels pretty hacky though since there may be problems when your item name is not a valid css class name or when you are using multiple items in your popover. In this case however you can always add a text property to the widget and leave the setting of a unique class name to the user. This is also not an excellent solution but should do in most setups.

Same workaround here:

I use a identifier to solve the task.

And for oh-repeater:

                                  - component: oh-link
                                    config:
                                      iconMaterial: opacity
                                      color: '=items[loop.item.name].state == "ON" ? "blue" : "gray"'
                                      iconSize: 25px
                                      action: popover
                                      popoverOpen: ='.m'+loop.item.name
                                    slots:
                                      default:
                                        - component: f7-popover
                                          config:
                                            class: ='m'+loop.item.name
                                          slots:
                                            default:
                                              - component: f7-block
                                                config:
                                                  style:
                                                    animate: true
                                                    align-self: center
                                                    justify-self: center
                                                    justify-content: center
                                                    text-align: center
                                                slots:
                                                  default:
                                                    - component: Label
                                                      config:
                                                        text: Запуск вручную
                                                    - component: oh-button
                                                      config:
                                                        text: =items[loop.item.name].state
                                                        color: green
                                                        action: toggle
                                                        actionCommand: ON
                                                        actionCommandAlt: OFF
                                                        actionItem: =loop.item.name