Mobile Apps: Routing with Bootstrap

Intro

Thanks to the App Connect Client Side Routing it’s possible to use routing for your mobile apps built with Bootstrap. Now you can define a single index.html file and load all your content pages inside it.

Project Set Up

We start with creating a new project. Open the Project Manager and select New Project:

We select Mobile - Bootstrap Blank:

Enter the project name, select the project folder and click Save:

You can see that an index.html file has been created and the View Component has been added on it. This is where all your content pages will load:

You can add any content on your main (index.html) page - such header, footer, navbar etc. content that is required for your app. In our example we add a header with a navbar:

Content Pages

Now let’s create a content page, which will be loaded in the main page.
Open the Pages Manager and add new page:

Add a name for your page:

Make sure the type is set to Content and that your Main Page is selected:

Click Save:

Your content page has been created. Also a route is automatically generated in the Routing Panel for each of the content pages you create.

You can add any content here:

We add some text content here:

Loading Content Pages

You can create as many content pages as you need. They will be loaded in the view component when their route is called.
We select a nav item in the navbar and select the route picker for the Link:

Then we pick our About page route and click Select:

And you are done. Now your content page will be loaded in the main page, when its route is called.

3 Likes

This is great!

One question: Is there a way to convert already created pages to content pages? Or do I have to start my app from scratch again?

There is always copy and paste :slight_smile:

1 Like

Seems to be something missing. How would you create a content page route that needs a URL Parameter? Can you add it in the routes panel?

Thanks for this update!

I was able to recreate my app to the same point it was at in five hours. Has taken me about five weeks to get it to that point before. It is working seemingly so much smoother. I have much more confidence submitting this to the app stores now.

:beers:

2 Likes

8 posts were split to a new topic: Desktop apps with bootstrap routing

A post was merged into an existing topic: Desktop apps with bootstrap routing

Brad, do you mean you dropped fw7 and recreated your app using the bootstrap template?

I didn’t use any templates. But yes, I built it with Bootstrap 5 not FW7.

Yesterday even I was reading this post of bootstrap vs fw7 and Teodor said tat fw7 was the better option. So today I started with a new mobile fw7 project. things seem to change rapidly cause now with BS5 which might now the better option… Probably I should take a look at the blank BS5 and perhaps start over.
this is the post I was taking about:

I would go with which ever one you feel more comfortable with. To me, FW7 in Wappler seems incomplete and clunky to work with. With Bootstrap 5 I also had the luxury of having the Theme Manager to set all my colours and fonts. This is not available in FW7. Also my app uses a lot of data tables. Tables are also not available in FW7. So for me, being more familiar with Bootstrap, it was the natural way to go.

Exactly the challenges I already encountered. Very limited in designing the pages.
Today I at least learned a lot about routing and dynamic content. Let’s see if that works the same way with BS5 as with FW7

It’s even easier with Bootstrap … the team has done a great job on integrating Bootstrap for Mobile Apps.

Teodor, do you have a tip on how to load a homepage into the index page on startup? That is something I haven’t been able to figure out.

Hi Menno, what is coming up on start up? If your route is just / for your home page that should come up first.

Ah yes, changing the route to / fixed it :slight_smile: I was looking in the wrong places.
Thanks!

1 Like