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).
trueopens a popup
falsecloses 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).
- 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