Navigate Between Pages in Different Flows

Navigating between pages in different flows within an App UI is similar to how you'd navigate pages within the same flow, but instead of selecting the page to navigate to, you select the flow containing the page.

To navigate between pages in different flows within an App UI (for example, to navigate from myApp/main/main-start to myApp/otherflow/otherflow-newpage):

1. Open the page you want to navigate from (main-start, for example).
2. In the Page Designer, drag a component that you want to set off navigation and drop it onto the page canvas. Here's an example of a tab bar, with each tab meant to navigate to a different flow:
   
   

   
   Description of the illustration navigation-flow-tabbar1.png

   
   
3. Select the page component, then click the Events tab in the Properties pane. In the tab example, you select the hyperlink nested within the tab bar component.
4. Click the + Event Listener button and select On 'click'.
5. When a new action chain is created, drag the Navigate to Flow action from the Navigation section of the Actions palette and drop it onto the canvas.
6. In the Navigate to Flow action's properties, select Flow in Parent Page, then select the flow containing the page you want to navigate to from the Flow drop-down list (for example, otherflow).
   
   

   
   Description of the illustration navigation-flow-navigateaction.png

   
   
7. By default, navigation to a flow navigates to the flow's default page. If you want to navigate to a page other than the default, select the page from the Page in Flow list (for example, otherflow-newpage).
   
   

   
   Description of the illustration navigation-flow-navigateaction-notdefaultpage.png

   
   
8. Preview your App UI to test navigation from one page to another in a different flow.