[Solution] Open popup/popover by rule or item state

I have seen a few questions if it is possible to open a popup/popover triggered by rule or by a state of an item. As this still seems to be tricky I just wanted to share my solution for this as a post for further reference:

In a nutshell, it is all about controling the property opened of an f7-popup/f7-popover and make its value (true or false) dependent from an item state or from a virtual item state (in case of triggering by rule).

  • true opens a popup
  • false closes your popup.

Although the container element oh-button has no function at all in my example, it is still required (set it to transparent to make it invisible though).
I also added an optional button inside the popup so that you can click anywhere inside the popup to close the popup (of course this has to be replaced if you fill the popup with control elements (like player-item, toggle item, buttons, etc).

Please note:

  • if you want to test it, this does not work reliably within Run mode. Open your test page from your side bar
  • be aware when using a proxy item and you want to close your popup by click in the backdrop or via Navbar: you need to make sure that the virtual item gets a different state than the triggering state. otherwise your popup re-opens.
- component: oh-button
  config:
    text: Button without function
  slots:
    default:
      - component: f7-popup
        config:
          closeByBackdropClick: false
          tabletFullscreen: false
          opened: '=(items.virtualItem.state == "ON") ? true : false'
        slots:
          default:
            - component: Label
              config:
                 text: Your popup content goes here...
            - component: oh-button
              config:
                action: command
                actionItem: virtualItem
                actionCommand: OFF
                style:
                  --f7-button-bg-color: transparent
                  --f7-button-hover-bg-color: transparent
                  --f7-button-pressed-bg-color: transparent
                  height: 100%
                  width: 100%
                  position: absolute
                  left: 0px
                  top: 0px
                  z-index: 999
3 Likes

Thank you so much! I use this to popup my door camera feed when it detects a person - works like a charm!

glad it is of any help.
I wrote this for almost the same reason like you:
if the door bell rings, a camera popup appears on my wall mounted tablet.
:slightly_smiling_face:

Hi,
This is working for me on a test widget, but has to be manually closed.
Is there a way I can have it automatically close after X seconds?
I could, possibly, do it with rules, but would prefer something within the widget itself.
Does anyone know if this is possible?

Thanks,
Richie

Hi,

just use the expire meta for the item that decides if the popup is open or not.
My item reverts to OFF after 20 seconds using the expire function.

Hi,
Ok, makes sense.
I have a number of different items that will initiate the popup, so might not be an option for me.
After further thought I might just have a single dummy item to control the popup and use a rule (there are quite a few items that I need to popup) to define what has generated the “alert” and populate the widget accordingly.

Thanks,
Richie

Thanks @Oliver2! Fantastic solution! I’m using it for disarming the alarm system with a keypad inside the popup. Exactly what I was searching for!