Framework7 - Anyone know how to launch two pages into two separate views with one link?

This is not really related to Wappler, but hoping someone familiar with Framwork7 may have an idea.

I have a link in the left panel that launches a page in the left panel. At the same time I would like to launch another page in the main view. Is this possible? If so, how?

Here’s a video for reference. When I click on the first “inbox” link a new page displays in the left panel. At the same time I want to load another page with a list of items in the main view.

Hi Keith

Just open the sources of this template (using Chrome DevTools) and study the code, and you can easily do what you need:

https://framework7io.github.io/framework7-template-split-view/

@Mr.Rubi I don’t think anything in the example you provided helps with launching a page different page into each view at the same time. My guess is I need to use an event to load a page into the main view after launching the page in the left panel.

Hey Keith… some options for you:

A flow? Not how I do it, but perhaps possible.

Onclick event (static) and then use fw7 router ( viewname.router.navigate(path)

If that doesn’t help, are you on “core” or app connect integration?

1 Like

Sorry, I misunderstood the problem. I just noticed in the video that there are problems with several views. If there are no problems with this, and the only question is to load them simultaneously when clicking on one link, then I would use the method with the onclick event (which Ken specified). I use it in other, but similar situations and it works well.

PS this method is relevant if you use Fw7 core, because its native routing works.

@mebeingken, I'm using app connect. I think the onclick event seems like a good option, but I'm probably not setting it up correctly. I'm getting "mainView" is not defined. I added a static on click with the folllowing code. What am I missing?

mainView.router.navigate('/pages/inbox')

image

Thanks guys. I figured it out. :slight_smile:

I used Dynamic Events instead of Static Events.

This added the following code
dmx-on:click=“app.f7view.navigate(’/pages/inbox’,{})”

2 Likes

You have to select “Framework7 v5 with App Connect” - then all dynamic events will work. And the mainView error will disappear.

Otherwise you are on the old Framework7 and have to code everything yourself and use static events indeed.

1 Like