Page linking in mobile app

Mobile Apps
1

Looking for some help on a basic page link using Framework 7. I feel like I’m using the same thing as the kitchen-sink template (which I can navigate through fine within the editor) but I can’ replicate this using routes or not.

Are these not valid? Nothing happens if tapping on LINK 1.

Screen Shot 2020-01-16 at 11.16.00 AM
Screen Shot 2020-01-16 at 11.16.00 AM1263×468 42.7 KB

Screen Shot 2020-01-16 at 11.17.06 AM
Screen Shot 2020-01-16 at 11.17.06 AM1931×438 62.2 KB

2

Linking in Framework 7 is done exclusively with routing. So you have to define a route first and then choose it as link

1 Like
3

Isn’t that what I did in the 2nd screenshot?

4

I see yes that should do it. Is page2 a content page?

5

I think so yes…

Screen Shot 2020-01-16 at 12.35.36 PM
Screen Shot 2020-01-16 at 12.35.36 PM1441×343 51.3 KB

6

framework7 require a lot of coding to work fully. you need to study the framework7 docs. i suggest you to use bootstrap if you want a better integration with wappler

or you can use framework7 routing in the file app.js manually and define your routes there like this:

  routes: [
    {
      name: 'about',
      path: '/about/',
      url: './pages/about.html',
    },
7

Thanks Mohammad. I’m trying to balance learning framework 7, getting projects done, and improving Wappler. :slight_smile: You’re absolutely correct that adding routes to app.js works, but I’m hoping to point out where this can be improved in the GUI.

Thanks for the pointer!

1 Like
8

I wonder what is the difference as the generated code should be the same…

9

app.js starts like this:

routes: window.routes ? window.routes : routes = []

but the kitchen-sink app.js has this:

routes: routes,

along with a routes.js file in the same folder which contains all the predefine link routes for the demo.

10

Oh but did you select the right routes file path in the project settings? It should be included and then the routes will be added to the window object.

11

You mean this?

Screen Shot 2020-01-16 at 1.23.26 PM

Or the contents of routes.js?

var routes = [
  {
    "path": "/page2",
    "url": "/page2.html",
    "master": false,
    "pageName": "page2",
    "name": "page2"
  }
]
12

I’m not seeing where app.js includes routes.js

13

Yes this option indeed.

The file should be included in your index html as well.

1 Like
14

I’ll add another bug report. routes.js is not included in index.html. When added, everything works. Thanks George.

2 Likes
15

You are on a roll Ken :slight_smile:

16

I’ve got a couple projects starting, so I’m digging into mobile!

1 Like
17

Great - keep on reporting so we can now iron those small mobile glitches

Now that we have perfected the web projects, we can give mobile some more love :slight_smile:

18

Great to hear! I’ll keep pushing ahead and let you know of any tough spots.