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.
