Popup Close

Add-ons UIs
1

Hi all,
I am having a little difficulty and can’t really find a solution. In Main UI I have an element on a page which opens a popup of a widget. However, I am trying to close the popup when an item is pressed. I have followed everything I can find without any luck.

- component: oh-label-card
      config:
        action: command
        actionCommand: ON
        actionItem: S7Submit
        popupClose: true
        label: Submit

Am I unable to close a popup that is from another widget? Is there some way to correctly handle this?

2

The popupClose property comes directly from the F7 base element that the oh-label-card is built on top of. It is not a boolean value (true/false), but rather a string that holds a css selector which will uniquely identify the popup you want that element to close when it is interacted with.

If the popup you’re referring to is one that you’ve gotten the widget system to bring up (i.e., through the actionModal setting) then it will be difficult to uniquely identify the popup, but you can set a selector that should close just about any popup:

popupClose: .popup

or just about any modal that the UI brings up:

popupClose: .modal-in

If this is a popup that you’ve created yourself with the custom widget system, then just give your popup a unique class name and use that class name in the selector.

3

Thank you for the reply. I was going by what I could find on here but F7 is new to me so still trying to learn. I tried both of those options and neither seemed to have worked. I am currently opening them using this:

 - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    action: popup
                    actionModal: widget:S7_locks_widget
                    footer: Slot 7
                    label: =(items.LockCode7Label.state)

Is there a better way to call a widget for a popup? I was having a difficult time getting things to work properly when they were all in the same widget/page.

4

That is certainly one correct way to do it.

You’ll have to show more of what’s going on then, because that should work. Here’s a small example.

A simple widget:

uid: demo:close_ui_popup
tags: []
props:
  parameters: []
  parameterGroups: []
component: f7-card
config:
  title: Close this popup
slots:
  default:
    - component: oh-button
      config:
        text: close it now
        popupClose: .modal-in

If a card on a page uses this as it’s popup:

- component: oh-grid-col
  config: {}
  slots:
    default:
      - component: oh-label-card
        config:
          action: popup
          actionModal: widget:demo:close_ui_popup
          label: Open the close popup

Then clicking on the label card will open:
image
and clicking on the close it now button closes the popup again.

5

Okay, good news. So that demo worked so I tried it on another tab and was able to get it to work with oh-button. However, I think I have discovered the problem. It seems that the oh-label-card doesn’t seem to support the command. Which is odd you can open but not close a popup. Now I need to think of another option of a larger button :thinking:. Thank you so much, I was starting to pull my hair out :rofl:.