1. Building Responsive Applications with Visual Builder Studio
  2. Develop Applications
  3. Work With Pages and Flows
  4. Navigate Between Pages and Flows

Navigate Between Pages and Flows

When you create multiple pages and flows, you can set up navigation to go from one page to another or from one flow to another.

Navigate Between Pages in the Same Flow

To navigate between pages in the same flow, you associate a page component with an event that sets off a navigation action chain.

Let's say you've defined two pages within a particular flow: main-start and main-other within the main flow. And you want users to click a button on the main-start page to get to the main-other page. To do this:

  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 button on a page:
  3. Select the page component, then click the Events tab in the Properties pane.
  4. Click the + Event Listener button and select On 'ojAction', the default action for a button click. You might see other options suggested for your particular component.
  5. When a new action chain is created, drag the Navigate to Page action from the Navigation section of the Actions palette and drop it onto the canvas.
  6. In the Navigate action's properties, select Page (if necessary), then select the page you want to navigate to from the Page drop-down list (for example, main-other).
  7. Optional: To enable users to navigate back to the original page, associate a page component with an event that sets off a Navigate Back action chain:
    1. Go to the page that you set up navigation to (for example, main-other).
    2. Drag and drop a component onto the page canvas (for example, a button with the label Back).
    3. Click the + Event Listener button and select On 'ojAction'.
    4. When a new action chain is created, drag the Navigate Back action from the Navigation section of the Actions palette onto the canvas.
  8. Preview your application to test navigation between the two pages.

Navigate Between Pages in Different Flows

Navigating between pages in different flows within an application 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 application (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:
  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).
  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).
  8. Preview your application to test navigation from one page to another in a different flow.