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

[Oliver2 (Oliver)]

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

[BobMiles]

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

[Oliver2 (Oliver)]

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.

[Richie1972 (Richard Rogers)]

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

[BobMiles]

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.

[Richie1972 (Richard Rogers)]

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

[Integer (Mike P)]

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!

[helipus]

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

[shakyboy (Ritchy)]

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

[Oliver2 (Oliver)]

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

[shakyboy (Ritchy)]

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

[Oliver2 (Oliver)]

in most cases the GUI provides you with error messages

[surfstu (stu)]

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

[Oliver2 (Oliver)]

yes

[Nadalio (Nada)]

Hi,
does this also work with other components and popup pages instead of component: f7-popup?

slots:
  default:
    - component: oh-label-item
      config:
        action: popup
        actionModal: page:mypageforpopup

How could I do this then?

Thanks.

[Oliver2 (Oliver)]

Not sure what you mean. You want to hide/unhide list-items?

[Nadalio (Nada)]

I have a popup page already linked to the oh-label-item and want it to be opened automatically in addition to manual popup.

When I click on the oh-label-item, the popup page “mypageforpopup” is shown. But I also want to show this same popup page automatically by a rule.

Is this possible? Thanks.

[Oliver2 (Oliver)]

see my first post. Add this line to your popup

@Oliver2

opened: '=(items.virtualItem.state == "ON") ? true : false'

[Nadalio (Nada)]

I tried it, but it did not work. When using your example I got it to work, but not with my popup page.

This also does not work:

slots:
  default:
    - component: oh-label-item
      config:
        opened: '=(items.virtualItem.state == "ON") ? true : false'
        action: popup
        actionModal: page:mypageforpopup

Or what did you mean with “Add this line to your popup”? Adding it to the popup page itself? This also did not work for me.

Here is the start of my homepage. On clicking “oh-label-item” the popup page shows up (and this page should popup now also by using “opened”):

config:
   label: Overview
   visibleTo:
     - role:administrator
 blocks:
   - component: oh-block
     config: {}
     slots:
       default:
         - component: oh-grid-row
           config: {}
           slots:
             default:
               - component: oh-grid-col
                 config:
                   width: "15"
                 slots:
                   default:
                     - component: oh-list-card
                       config:
                         noBorder: false
                         noHairlinesBetween: true
                         noShadow: true
                         outline: false
                         title: Data
                       slots:
                         default:
                           - component: oh-label-item
                             config:
                               action: popup
                               actionModal: page:mypageforpopup
...

Where should I add your line to?

Thanks!

[Andrew_Rowe]

@Nadalio
from Oliver’s examle

@Oliver2

opened: ‘=(items.virtualItem.state == “ON”) ? true : false’

Did you create this Item?

@Oliver2

virtualItem

Maybe show us the rule you are using to make the popup. Sorry if you already posted it and I missed it