UI - f7-panel popout menu

Setup, Configuration and Use Beginners
, ,
1

Hi All,

I’m running OpenHab 3.4.4 on Windows 10.

I’m sure this is pretty simple, but I’ve been unable to get it working the last couple of days. I’m trying to set up a layout page that will open a side panel. That is, I click a button on the page, and a menu on the left side pops open with several menu items. Each menu item is a button that opens a larger popup.

I saw other posts on the forum suggesting to look at the f7 docs for UI design. I found what I was looking for in the f7-panel. I tried to spin up a quick example on a blank page, but when entering “run mode” instead of opening the side panel it just exits the page editor (like I pressed the back button). I saw some other posts saying some f7 functions work better inside widgets. So I tried the same thing inside a widget. It works in the widget preview, but putting the widget on a page and then pressing the “open panel” button also behaves as though I pressed the back button.

What is going on here? I had a thought that the OpenHab UI eats the two available f7-panel objects per-app, but I saw other users suggesting to use it.

Here is the code for my test page:

config:
  label: Test Side Panel
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-button
                      config:
                        panelOpen: .panel.test-panel-thing
                        text: ="Open Panel"
                    - component: f7-panel
                      config:
                        class: test-panel-thing
                        side: left
                      slots:
                        default:
                          - component: oh-button
                            config:
                              panelClose: .panel.test-panel-thing
                              text: ="Close Panel"
masonry: null
grid: []
canvas: []

Thank you in advance to anyone who gives this a look!

2

Welcome to the forums!

An f7 app will only display two panels at a time, one left and one right. However, you can define as many panels as you’d like. In your case, when you trigger your custom panel on the left side, instead of pushing the left sided oh menu panel further into the middle of the screen, your custom panel will simply override it until you close that custom panel.

As for why it’s not showing: it actually has to do with the oh grid setup. The oh-grid-col is only configured to hold a single direct child element, so your panel is not even being rendered, only the button is. Thus the f7 call to open an element with that class name fails. It’s not 100% clear why the failed panel-open-call triggers the f7 router back navigation, but that’s an f7 issue, not an oh issue.

The solution at any rate, is straightforward. The single direct child of the grid column must be a container which itself has the button and the panel as children. A simple div will even suffice:

config:
  label: Test Side Panel
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: div
                      config: {}
                      slots:
                        default:
                          - component: oh-button
                            config:
                              panelOpen: .panel.test-panel-thing
                              text: ="Open Panel"
                          - component: f7-panel
                            config:
                              class: test-panel-thing
                              side: left
                            slots:
                              default:
                                - component: oh-button
                                  config:
                                    panelClose: .panel.test-panel-thing
                                    text: ="Close Panel"
masonry: null
grid: []
canvas: []
1 Like
3

That was it. Thank you! These forums are great!