Navigation

Navigation for your app can be configured via the 'Navigation' section of the global toolbar at the top. You can use Built-in navigation, or create a custom navigation list for your app.

Built-in navigation

Navigation header bar

This section configures if the navigation header bar at the top of the app should be enabled or disabled for all pages. Additionally, you can decide if you want to show the current page's name in the header bar or a static text.

It is currently not possible to add buttons to the navigation bar, apart from the system native back button that appears.

Navigation menu

This section defines the native navigation menu for your app.

By default, the navigation menu is enabled. If you disable it, you need to define the single initial page for your app.

The navigation menu is different depending on the platform:

• Native iOS/Android – horizontal tabs at the bottom of the screen
• Web browser – vertical tabs on the left side of the screen

For each navigation menu item, you can configure icon, tab name and page the tab points to.

You can change the order of the menu items via drag-an

Styling the navigation elements

Navigation header bar and tab bar colors are determined by the theme variables under the Native theme group.

Navigating between pages

You can use the Open page flow function to navigate to a new page.

The Parameters property lets you pass data to the newly opened page – the values set in the flow function will be available as page parameters in the opened page.

Going back

To navigate to the previous view, you can use the native back button on mobile, or the browser back button in web.

Alternatively, you can call the Navigate back flow function.

To go back multiple pages, you can use the optional Number of pages input argument.

Navigation stack

Composer navigation operates on the concept of a navigation stack.

A navigation stack has a root page, on top of which additional pages can be opened. Calling Navigate back on the root page does nothing.

In a mobile app that has tab navigation, every tab has its own navigation stack. Thus, switching between tabs preserves the state of each tab.

On web, the navigation stack exists – if you switch to a new tab and try to use Navigate back it fails – but the native navigation history tracks across tabs. Thus, switching from tab A to tab B and clicking the browser native back button brings you back to tab A.

To go back to the root of the navigation stack, there's the Navigate back to root flow function.

Setting target page dynamically

In some cases, you might want to choose the target page dynamically. For example, you have a repeated list, but clicking an item in the list should navigate to a specific page depending on the item type.

However, since the selected page ID determines what parameters can be passed to the opened page, it's not possible to set a dynamic target page with a single Open page flow function – that would mean the schema of the parameters object would be completely dynamic, which is not something we want to encourage.

Instead, what you want to do is use an If condition flow function to split the logic into two paths depending on e.g. a field of the current object (in the case of a repeated iitem), and then have two separate Open page nodes that each open a different page.

Custom navigation

To use custom navigation instead of the built-in navigation in your app, you can create a navigation list that works with a navigation component in the app.

Creating a navigation list

Navigation lists can be created using the "Custom navigation" page of the Navigation tab.

Your app can have one or several navigation lists, where you can choose to include any pages from your app and pick icons for them. You will be able to use the defined lists with components that have a navigation type configuration property. They will not appear in the built-in navigation.

You can add items to a list using a button on the bottom right. Every item has an icon property, allowing you to choose an icon from a library; a 'Tab name' which defines a label name, and 'Page' that stores the page that will be used with that item. Here is an example of a list with three configured items in it:\

Creating a navigation component

Components with a navigation type property can be used together with your app's navigation lists to create custom navigation in the app.

The navigation property type is a list of objects with page_name, font_icon_name, page_uid and title properties. It can be bound to a navigation list defined on the Navigation tab. The property type only exists for components, not for variables.

How to create a custom navigation component for your app

First, create your custom navigation component's layout by placing a single Container on the view canvas. Choose the created container and follow the "Convert to new component" in the Properties bar to turn the container into a custom component.

While in the component editor, switch to 'Properties' view and add a navigation type property for the component:

Without exiting the component editor, drag a new container inside the navigation component and put an 'Icon' and 'Text' view components into it. Adjust the container layout to your preference.

Choose the created container and repeat it with the navigation property you just created. You can do so by selecting 'Repeat with', then choosing 'Component properties' -> 'Composite component internal property'. You should now see several copies of the container.
Use the "Open page" flow function on the "Component tap" event of the navigation item (2nd container) to make the component functional. "Page to open" property should automatically bound to current.page_uid. Bind the text's content and icon's name to current.title and current.font_icon_name respectively.
Lastly, exit the Component Template Editor and bind your app's custom navigation list to the component you just created to make it work.

NOTE: Remember to add your custom navigation component on each page of the app where you want it to be visible!