1. Developing Applications with Oracle Visual Builder in Oracle Integration Generation 2
  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.

Navigate Between Flows in the Root Page

You can use the navigateToItem event in an action chain to open the start page of a flow in your application's root page. You typically invoke the action chain from the drawer or tab elements used to navigate the app.

To use the navigateToItem event in an action chain, you add the Fire Event action to the chain and then select the event and assign the name of the target flow to the event's payload. To use the navigateToItem event, the current page needs to have a flow container that is configured to hold the target flow. Firing the event loads the start page of the target flow into the flow container of the root page.

For example, when you create an app from a template that uses navigation elements such as a tabs or a drawer, the app will contain separate flows that can be loaded into the app's root page. If you create a web app with two flows (for example, "item-1" and "item-2"), and you want to use tabs in your root page to select the flow that is displayed in the flow container, you can create an action chain that fires the navigateToItem custom event. You would create an action chain for each of the flows, and add a click event listener to each tab to trigger the action chain.

First, for the UI component that's to open the start page of the flow, you need to create an event that starts an action chain to handle the navigation:

  1. In the Designer, open the root page containing the flow container and select the component on the canvas that will open the flow.

    For example, to navigate between flows displayed in the main flow container of a web app, you'll need to open the root page and select one of the navigation tabs.
    Description of flow-navigate-newevent.png follows
    Description of the illustration flow-navigate-newevent.png

  2. In the Events tab of the Properties pane, click + Event Listener and select the suggested option (for example, On 'selection').

    A new action chain is created and associated to the event, and you're taken to the Action Chain editor to implement the action chain.

  3. Now create the action chain:
    1. Enter a name for the action chain in the Properties pane's Id field.
    2. Add the Fire Event action to the canvas.

    3. In the Properties pane, select navigateToItem in the Event Name drop-down list.

      The drop-down list contains a list of custom events that can be invoked by the action. The navigateToItem event is prepended with "application:" in the drop-down list and can be used in any page in your app because it is application-scoped.
      Description of rootpage-flow-navigation-firevent.png follows
      Description of the illustration rootpage-flow-navigation-firevent.png

    4. Under Parameters, hover over the far-right side of the item property and click the down arrow that appears. In the Variables dialog, select the target flow (for example, ojTabBar3010995061SelectedItem).