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": {
...
}