4. Navigation

As there can be many view and forms within an app, the user will need a way to pick what they would like to see or do, that is the function of Navigation. It displays as a vertical menu of options on the left side of the app. The use can then simply click on the option they need.

Example of Navigation: An Expense Reports App

If the user is on a smartphone or simply has the apps displayed in a small browser window, the Navigation will automatically hide itself to leave more room for working with the app. Clicking on the three bar menu icon in the top left corner will display the Navigation.

Example of Navigation on a Small Screen

Editing Navigation

An App Designer can access Navigation, where they can define what appears in the left side menu, by clicking on the Navigation button from the left side design navigator.

Navigation Editor

To create a new form, click on the + New Form button on the action bar at the top of the screen. You will be presented with the Create Form dialog:

New Form Dialog
Item Description
A – Clicking on this button will display the Add Navigation Item dialog shown below, and allow the user to add a new navigation element.
B – Save, clicking on this will save the current navigation settings. If you leave the navigation without saving your updates, they will be lost.
Section Header C – A section header allows you to group related items together. Often this is done to group view and create buttons related to the same form. (In the example above, Expense Report is a form in the application.)
Section Expand/Collapse D – The up/down arrow controls allow you to expand and collapse a section. These only work when using the application and not is design mode.
Form Entry E – This kind of entry will create a new record from the named form. (In the example above, it would create a new Expense Report record.)
Default Entry F – The default entry is the one that will be selected when a user opens the app. (In the example above, the user would see the Expenses by Employee view in the main area to the right of the navigation.)
View Entry G – This kind of entry will open the related view. (In the example above, the user would then see the By Department view in the main area to the right of the navigation.)

New Navigation Item

Clicking on the + Add Navigation Item button on the action bar at the top of the screen will display the following dialog:

New Navigation Item Dialog
Item Description
Section Header Adds a Section Header to allow the navigation to be logically grouped by form type or other category.
External Link Adds an item that will allow users to click and be redirected to any valid URL, just like any normal web link.
Line Divider Adds a horizontal ruled line, to help organize the navigation.
Form Adds an item that will compose a new record with the selected form.
View Adds an item that open the selected view.
Page Adds an item that open the selected page.

Editing Existing Items

To create a new form, click on the + New Form button on the action bar at the top of the screen. You will be presented with the Create Form dialog:

Section Header Options
Other Item Options
Last Item in a Section Options
Item Description
Show Details: Clicking on this icon will open the right-side Information panel, where item properties can be view and edited.
Remove: Clicking on this icon will remove the associated navigation item from the navigator. If you remove a form, page or view it will not delete the actual form, page or view, just remove it from the navigation.
Default: Clicking on this icon will select it and make this navigation item the default one that is displayed to users when they first open the app.
Remove from Section: Clicking on this icon will

Next Steps

Below is the link to the navigation part of the Building an Expense Reports App tutorial series:
Part 9 – Navigation
Updated on June 12, 2019

Was this article helpful?

Related Articles