[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
6 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!

Can you post your solution here? I have exactly the same problem to solve. Thats would be really great!

I have tried your solution but some how it doesn’t work for me.
I have a page with the universal toggle widget which can set my foscam motion state to ON. On the same page I have this widget. But when I toggle no popup shows up. Do I miss something?

uid: widget_popup_virtual_item
timestamp: Jan 11, 2022, 11:05:24 PM
component: oh-button
config:
  text: Button without function
  slots:
    default:
      - component: f7-popup
        config:
          closeByBackdropClick: false
          tabletFullscreen: false
          opened: '=(items.FoscamCamerawithAPI_MotionAlarm.state == "ON") ? true : false'
        slots:
          default:
            - component: Label
              config:
                text: Your popup content goes here...
            - component: oh-button
              config:
                action: command
                actionItem: FoscamCamerawithAPI_MotionAlarm
                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

your indentation is not correct. slot and the rest need to go one step to the left

@Oliver2 Thanks for the quick help!! That was the problem. Can you tell me how to avoid this mistakes?

in most cases the GUI provides you with error messages

I’ve got this working, thank you,

if I want the popup to appear on my tablet regardless of the page being viewed, do i need to add this widget to every page?

thanks

Stu

yes