Navigation
You can configure navigation for your app via the Navigation section of the global toolbar at the top.
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.
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
Mobile web browser – hamburger menu opened via the navigation header bar
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
Navigation header bar and tab bar colors are determined by the theme variables under the Native theme group.
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.
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.
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.
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.
To do this, you'd want to include e.g. a pageId property in your data. Currently, this requires a bit of manual work: the page ID expected by the Open page node is in the format page.PageN, where N is the page ID number visible in the browser address bar when the page is open in.
For example, if the target page URL ends in pages/3, setting the Open page node's Page property to the formula page.Page3 would navigate to it.
Thus, if my "Orange details" page has ID 3 and my "Apple details" page has ID 4, I would repeat my list with data like
[{id: 0, pageId: 3, name: "Orange"}, {id:1, pageId: 4, name: "Apple"}]
and then bind the repeated list item's Open page node's Page property to the formula
"page.Page" + current.pageId
Since Composer cannot know the page ID beforehand, you have to manually make sure the parameters passed to any of the possible target pages work as intended.
Of course, for most cases, this is not a good architecture – you'd rather want to have a single "Fruit details" page that takes the necessary parameters to render itself dynamically, instead of targeting separate pages individually.
