1. Extending Oracle Cloud Applications with Visual Builder Studio
  2. Build an App UI or Fragment
  3. Work With Pages and Flows
  4. Navigate Between Pages and Flows
  5. Navigate From Fragments and Layouts to App UIs

Navigate From Fragments and Layouts to App UIs

When you use fragments or layouts in an App UI's pages, you can navigate from those fragments or layouts to other App UIs.

Navigation from a fragment or layout can only be to other App UIs. That's because the fragment or layout is unaware of the structure of the application where it is used. As a result, you need to raise custom events to allow the page that consumes the fragment or layout to navigate to the fragment or layout. See Raise Fragment or Layout Events that Emit to the Parent Container.

Note:

If you want to allow navigation to a page in an App UI that isn't the default page of the default flow, navigation to that page and its flow must be enabled in the page- and flow-level Settings editors. To do this:
  1. Open the page in the App UI that you want to allow other App UIs to navigate to.
  2. Click Settings to open the page-level Settings editor.
  3. Select Let other App UIs navigate to this page.
  4. Open the flow that this page belongs to.
  5. Click Settings to open the flow-level Settings editor.
  6. Select Let other App UIs navigate to this flow.
  • To navigate from a fragment consumed by your App UI's page to a page in another App UI:
    1. Open the fragment you want to navigate from in your App UI (for example, employee-details).
    2. In the Fragment Designer, drag a component that you want to set off navigation and drop it onto the canvas. Here's an example of a button added to a fragment:
    3. Select the component (for example, the button), 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 Application action from the Navigation section of the Actions palette and drop it onto the canvas.
    6. In the Navigate to Application action's properties, select the App UI you want to navigate to in the App UI list. Start to enter the name of the App UI you want (for example, demoappui) to filter the results.

      Description of fragment-nav-button-default.png follows
      Description of the illustration fragment-nav-button-default.png

      If you want to navigate to the default page in the default flow of the App UI, you can stop here, but if you want to navigate to a non-default page, you'll need to drill down further to select a flow, then a page in the flow. Remember that only pages and flows marked as navigable in the page- and flow-level settings will be available for selection.

  • To navigate from a layout in your App UI's page to a page in another App UI:
    1. Open the page you want to navigate from in your App UI (for example, main-start).
    2. In the Page Designer, drag a dynamic component onto the canvas and create your layout. Here's an example of a dynamic form that uses a template to show employee fields:
    3. Because our example uses a dynamic form template, the component that set off navigation must be defined in the template. To do that, go to your Layout, select the dynamic form template in the Templates tab, then drag and drop the navigation component onto the template canvas. Here's an example of a button added to the empDetailsTemplate in the PublicWorkers layout:
    4. Select the component (for example, the button), then click the Events tab in the Properties pane.
    5. 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.
    6. When a new action chain is created, drag the Navigate to Application action from the Navigation section of the Actions palette and drop it onto the canvas.
    7. In the Navigate to Application action's properties, select the App UI you want to navigate to in the App UI list. Start to enter the name of the App UI you want (for example, demoappui) to filter the results.

      Description of layout-nav-dynamicform-buttonintemplate-default.png follows
      Description of the illustration layout-nav-dynamicform-buttonintemplate-default.png

      If you want to navigate to the default page in the default flow of the App UI, you can stop here, but if you want to navigate to a non-default page, you'll need to drill down further to select a flow, then a page in the flow. Remember that only pages and flows marked as navigable in the page- and flow-level settings will be available for selection.