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

Add-ons UIs
4

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

5

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.

6

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

7

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!

8

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

9

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
10

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

11

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

12

in most cases the GUI provides you with error messages

13

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

14

yes

15

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.

16

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

17

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.

18

see my first post. Add this line to your popup

19

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!

20

@Nadalio
from Oliver’s examle

Did you create this Item?

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

21

Yes, item and rule are working well. I did test the example of the 1st post successfully.

But I want to combine it with my existing main page and the existing popup page as shown above.

How can I get this to work, so a click and rule works both on my main page to open the action popup?

1 Like
22

This will not work when you use the OH popup action. You must create the popup using the f7-popup component yourself such as in the example at the top of the thread or in the docs:

23

Thank you.

Can I hide this f7-popup element and only use as hidden trigger?

And can I open a dedicated page instead of the “Your popup content goes here” in the example? How could I do this?