Hi,
I was exploring the tabbed pages for a hierachical control setup, and tried to have a tabbed page in a tabbed page. This did not work from the usage side.
You can set it up, but the page remains empty.
Is that by design, technical limitation or a bug?
Cheers,
Christian
I’ve not tried to do this, so I cannot say off the top of my head. Can you share the code you tried?
Primary level (House)
tabs:
- component: oh-tab
config:
title: Keller
icon: f7:squares_below_rectangle
page: page:Tabbed_Keller
slots:
default: []
- component: oh-tab
config:
title: Erdgeschoß
icon: f7:squares_below_rectangle
page: page:Tabbed_Erdgeschoss
slots:
default: []
Secondary level: basement [Tabbed_Keller]
tabs:
- component: oh-tab
config:
title: Keller_Raum1
icon: f7:squares_below_rectangle
pageConfig: {}
page: page:Keller_Raum1
slots:
default: []
- component: oh-tab
config:
title: Keller_Raum 2
icon: f7:squares_below_rectangle
page: page:Keller_Raum2
slots:
default: []
- component: oh-tab
config:
title: Keller_Raum 3
icon: f7:squares_below_rectangle
page: page:Keller_Raum3
slots:
default: []
- component: oh-tab
config:
title: Keller_Raum 4
icon: f7:squares_below_rectangle
page: page:Keller_Raum4
slots:
default: []
Secondary level: ground floor [Tabbed_Erdgeschoss]
tabs:
- component: oh-tab
config:
title: Erdgeschoss_Raum1
icon: f7:squares_below_rectangle
pageConfig: {}
page: page:Erdgeschoss_Raum1
slots:
default: []
- component: oh-tab
config:
title: Erdgeschoss_Raum 2
icon: f7:squares_below_rectangle
page: page:Erdgeschoss_Raum2
slots:
default: []
- component: oh-tab
config:
title: Erdgeschoss_Raum 3
icon: f7:squares_below_rectangle
page: page:Erdgeschoss_Raum3
slots:
default: []
- component: oh-tab
config:
title: Erdgeschoss_Raum 4
icon: f7:squares_below_rectangle
page: page:Erdgeschoss_Raum4
slots:
default: []
OK, I’m not too surprised that trying to put a tabbed page in another doesn’t work. As I understand it, the f7 tab bar isn’t at the bottom of a container like a page, it’s defined as being either at the top or the bottom of the app. This means that if you try to define a page with a tab bar at the bottom and then put another page that defines a tab bar at the bottom you run into a conflict instead of the tab bars just stacking on top of each other.
It is possible to define a tab bar as being at the top of the app as well, and you can have both a top and a bottom tab bar simultaneously, but the tab-page tab bar is hard coded to be at the bottom so there’s just no way to achieve this using basic pages alone.
If you really have your heart set on using this style of navigation, then you will probably have to build most of this from scratch as a custom widget and set one of the tab bars at the top and the second at the bottom of the widget.
If you are interested, you can have modal dialogs popup with their own tab bar even on a page that already has a tab bar (I guess the modal window counts as a new app space), but again, the popup is a custom built widget.
OK, thanks for the update.
And no - I am not overly committet in having this hierarchy. Would have been nice to structure the pages that ways, but it it - at the moment - in no way essential.
One question though: If I had a particular idea for a vidualisation, how would I learn how to implement it. My current assessment of the existing pages, does not seem to provide what I would want to have: A visual building, where you could select floors that would open a floor plan, where you in turn could select rooms and markers for adjusting items.
You threw in a couple of terms, indicating that you are at least versed somewhat in that direction within openhab.
Cheers,
Christian
Truly customized implementations will rely heavily not just on pages but on custom widgets. The basics of custom widgets are pretty straightforward, particularly if you already understand a little pit about the pages.
Step one is read through the custom widgets sections of the getting started tutorial (or the entire getting started tutorial if it’s been a while since you have done so, you never know what you’ll rediscover on a read through). That will give you the fundamental mechanics of building and testing the widgets.
Step two is to skim through the help files on the various components available to you so you know just what kind of things you can do (which is a lot, even right out of the box). Some basic help files are listed in the Component Reference sections of the docs.
Step three is these forums. There are now hundreds of different widget examples posted. Even if you don’t find exactly what you’re looking for you might find something that you can adapt to your needs or at the very least inspires you. And anytime you get stuck with a specific problem during your development post a question here and there’s a very good chance that someone can help you fix it fairly quickly.
This custom UI system is extraordinarily powerful and this is very achievable. If I were to do something like this, I would even start with tabbed pages as was your instinct. One tab for each floor of the building sounds very intuitive. We’ve established that you can’t stack another set of tabs in now, but I don’t think that’s necessary. The floor plan for each floor can simply have a link in each room (see the oh-link section in the components reference) and that link can easily be configured to open either a small popup containing the controls for that room or populate a side panel for the controls or even navigate to a whole new page for that room.