Routable Panels - open programmatically

Questions
1

To have a more structured setup, I would love to use componentUrl for my panel. It works when I trigger it by a DOM link, but I could not do it programmatically like app.router.navigate( … or even better on app initialization / startup. Is it possible somehow?

2

http://framework7.io/docs/panel.html#routable-panels

3

… I know how to set it up - but not how to load a componentUrl initially. As I have a split view app, I need to have the panel ready on startup, not just by clicking a link…

4

You have a view in the panel, right? then how about view’s url?

5

hmmm - maybe I do something wrong. I tried like

<div class="panel panel-left panel-reveal theme-dark view-init" data-url="/left-panel/">
      <div class="view view-left"  >
	      ...
      </div>
</div>

and my route looks like:

  {
    path: '/left-panel/',
    panel: {
      componentUrl: './pages/panelLeft.html',
    }
  },

but as the panel get initialized automatically already, I get an error:

Can’t create panel; app already has a left panel!

6

I think no need to set panel in route, just take it as a normal page. Then set url for view-left, not panel, not data-url

1 Like
7

I’ll check this out… you mean just an empty view only used to trigger this?

8

{
path: ‘/left-panel/’,
panel: {
componentUrl: ‘./pages/panelLeft.html’,
}
},

you can try add routes to the view where you have your panel, in that routes put the code above, and try if work.

Something like this:

var panelView = app.views.create(’.view-panel’, {
routes : [
{
path: ‘/left-panel/’,
panel: {
componentUrl: ‘./pages/panelLeft.html’,
}
},
]
});

finally you call this like a page on init event of app: panelView.router.navigate("/left-panel/");

9

That’s what I actually tried first… but somehow the view.router.navigate() does not work for Panels. However, it works if a manually click a link with the panel route…

10

ok… if I assign the panel to an extra view it actually works with myView.router.navigate(). But once I closed the panel I can’t reopen it again. Using myView.router.navigate() again creates an error: “Can’t create panel; app already has a left panel!”. And app.panel.open(‘left’) nor app.panel.left.open() has no effect.

Everything works fine with “traditional” panels, but not with routable ones.

btw… is there a way to route to other components (componentUrl) within a routable panel? Like navigating within the panel?

11

ok… seems to be a bug (maybe) with ‘panel-reveal’ only. ‘panel-cover’ works fine. But still… is it possible to navigate within a routable panel?

12

Hey… I still have issues here. I have now routable panels like:

routes: [
{
path: ‘/left-panel/’,
panel: {
componentUrl: ‘./pages/panelLeft.html’
}
},
{
path: ‘/left-panel/messenger’,
panel: {
componentUrl: ‘./pages/messenger/messenger.panelLeft.html’
}
},
…

it basically works, but every time I call a panel route it creates a new instance of <div class="panel panel-left… . How can I just replace an existing one like I would do with views? As a workaround for now I remove an existing panel instance before. But I guess I made something wrong. Is there a simple demo how to toggle routable panels?