Understand Page Flows and Lifecycles

The page flow governs how information is transferred between pages. The page lifecycle governs the state of an individual page.

A page has a defined lifecycle that permits you to listen to certain events that are triggered as part of the lifecycle. Examples of page lifecycle events are enter and beforeExit.

One or more pages form a page flow. Within a flow, you can set up navigation from page to page.

Navigation actions can be internal or external. An internal navigation action is composed of the ID of the page to navigate to along with any parameters that are specified for that page. An external navigation action is defined by an external URL. These actions are defined in the page model.

An application also has a lifecycle and flow. An application can contain multiple page flows.

The Lifecycle of a Page

An individual page has defined lifecycle states upon entering and leaving, and each state has a trigger. For some states, you can provide action chains in response to the triggers. Other states are internal, but help illustrate what happens and when in the system.

Event Applies To Can Cancel Navigation Returns Description
vbBeforeEnter Page Yes None or { cancelled: true } to cancel navigation Dispatched to a page before navigating to it. Visual Builder will navigate to this page, but has not yet started the navigation and has not torn down the previous page's state.

A developer can cancel navigation for this event (for example, if the user does not have permission to enter this page) by returning an object with the property cancelled set to true. A developer can also redirect the user to another page instead (for example, it can take the user to a login screen).

After this state is exited, the previous page’s state can be torn down.

Page state is not available.

The following variable scopes are available:

  • $application: All application variables
  • $flow: All parent flow variables
  • $parameters: All page input parameters from the URL
vbEnter Page or flow No None Dispatched after all container-scoped variables have been added and initialized to their default values, values from URL parameters, or persisted values.

The following variable scopes are available:

  • $application: All application variables
  • $flow: All parent flow variables
  • $page: All page variables

This state is generally used to trigger data fetches, which may occur concurrently.

vbBeforeExit Page Yes None or { cancelled: true } to cancel navigation Dispatched to a page before exiting it.

A developer can cancel navigation for this event by returning to the listener chain an object with the property cancelled set to true. This can be useful if the page has to be saved before the user exits it.

vbExit Page or flow No None Dispatched when exiting the page. This event can be used to clean up resources before leaving the page.

Page Navigation

Every page in the application has a name, which you can specify and change. You use the page name to navigate from one page to another within a page flow.

To configure a Navigate action, specify the following parameters:

  • The page to navigate to, or an expression that resolves to that value

  • Values for required input parameters and for any optional input parameters that you use. (You can only set the value of page input parameters.)

There are two possible results:

  • Navigation was successful

  • Navigation was canceled from the page we are navigating to