Adding Pages to an App

 

You use pages for displaying information (sections) that you do not want to always be displayed when the app is running.

In this example, I am going to go through the steps of adding a contact form that is displayed when someone presses a button.

All apps that use pages, need at least 2 pages, a home page and then other pages to contain the content that you want to conditionally display.

First add a page and label it Home.   This is the home page that is displayed when the app is first loaded up.   In many cases, you may choose to not add any sections into the Home page and leave it empty as you don’t have anything special you want displayed when the app has started and you don’t want displayed when another page is active.

Next add another page and give it an appropriate label, like Contact.   I chose contact because I will be using that page to display a contact form.   In the contact page, add a contact form by clicking on Add Section and selecting contact form.   This will add a rudimentary contact form to your app. You can add many sections in the page if you like.

Move the contact page in the LAYOUT SECTIONS area of the builder to adjust where in the app you want the contact page to appear.    Move the home page right above the contact page.   The home page must be the first page section in your app in that list.  So move it right above the contact page section so it is the first page in your app.  

In this example, it is between the button sections, but it can be anywhere that makes sense for your application.

Before we continue, let’s discuss when sections/pages are visible in your app: 

• Sections that are not inside a page,on the home screen (root) are always visible by default.
• Sections that are in the home page are only displayed when the home page is visible. The home page is visible by default when the app starts.
• Sections that are on other pages are only displayed when the other pages (like contact) are displayed. 

Only one page is visible at a time.   When a page is made visible, other pages in the app are automatically hidden.

Ok, now that you have your pages added to the app, you need to add a way to make it visible.   There are two ways:

1. Add a menu section
2. Add a button or some text with a link to navigate to the page

Adding a menu section is easy, just add the section and then people will be able to navigate to the contact page through the menu.  Put the menu section as the first section in your app.

Using a button, or a title section (with a link) or any text that you specify as a link can be used to navigate to the page.   In the place where you specify the link text, instead of putting in a link like http://cnn.com or some other link, put in page:labelofpage or show:labelofpage .   In the example we are doing, we would put show:contact   .   You can use page: or show: interchangeably.

It may be useful to add another section to the contact page that is a button that is used to return to the home page (effectively hiding the contact page) by having a link with show:Home on it.