Using Flows to Create Single-Page Applications

You use the <oj-vb-content> component to nest flows into a page. By nesting a flow into a page, the page can display multiple pages within a single page in your application (single-page application). The <oj-vb-content> component has the same API as the JET <oj-module> element. The following example shows how to nest a flow in a page:

<oj-vb-content config="[[vbRouterFlow]]"></oj-vb-content>

The content of the current page of the current flow is displayed in the page at the location of this component tag in the view (HTML). The currentFlow and currentPage are managed by Visual Builder using a hierarchy of routers. When navigating in the application, the router changes the value of the currentPage of a flow, or the currentFlow of a page, and this determines the content of the oj-vb-content element. The router also manages the URL to reflect the currentFlow and the currentPage.

For example, when navigating using the path app/flow-a, the current flow for page app is flow-a, and the content of the default page of flow-a is inserted at the location of the oj-vb-content tag.

Nesting content at a specific locations in the page allows you to build page templates or shells.

Note:

A flow should only be nested in page. Nesting a flow in a dialog will not work properly.

Using the page routerFlow property

When the navigation does not specify which flow to use, the routerFlow property of the page descriptor is used to determine the default router flow.

In the following example, when navigating to page app, the flow main will be used as the current flow. It will be the flow displayed in page app when no flow is specified in the navigation. The following example shows the routerFlow property in a page descriptor:

{
  "pageModelVersion": "18.1.5",
  "description": "Application Page",
  "routerFlow": "main",
  "variables": {
  ...
}