Variables as Input Parameters

You can use a variable to pass a parameter between pages by marking it as input. When you mark a page variable as an input parameter, you specify how it becomes part of the contract to navigate to that page. You can further mark it as required, implying that it must be set in order to navigate to that page.

Parameters can also be passed on the URL of the pages or flows that you're invoking. This approach makes it possible to bookmark pages that show specific data based on the parameter.

Default Value and Expressions

The initial value of a variable is determined by its default value. If a default value isn't provided, the value is "not set" or undefined and its initial value is determined based on its type. If provided, the default value can be a static value or an expression, which in turn can refer to other variables including constants, system properties, static values, and the like via implicit objects (such as $variables and $page, used to extract the value of a variable).

When defining the default value as an expression, the variable updates when any reference in the expression changes value. For example, a fullName variable might have the default value set as {{ $variables.firstName + ' ' + $variables.lastName }}. Any time firstName or lastName is updated, the fullName variable will be updated.

"configuration": {
  "initParams": {
    "myServicePath": "some/path/",
    "anotherPath": "http://somehost/foo"
  }
},
"services": {
  "myservice": "{{ $application.initParams.myServicePath + 'myservice.json' }}"
},
"requirejs": {
  "paths": {
    "myPrefix": "{{ $initParams.anotherPath }}"
  }
}

These variable definitions can be used much the same as any other variable in Visual Builder, meaning, you can use them in component attributes, as parameters for JS functions, in actions (such as if), and so on.

Variable Events

When its value changes, a variable emits an onValueChanged event. (You can also add an onValueChanged event to constants if its default value is an expression containing a variable.) For example, if you changed the name property of an Employee and then reset the Employee, the framework would send an event that the Employee changed, and as part of the payload indicate that the name has changed.

Note that the onValueChanged event is triggered only when the value is actually changed; setting a variable value to the same value does not trigger this event.

It's possible to trigger an action chain whenever a variable raises this event. For example, when a user clicks a row on a employee's table, you can set up an action chain to retrieve employee information whenever the employee's ID changes.

Data Binding

Variables are principally bound to components to display data, but these variables don't know where the data is derived from or what it is used for. To populate a variable from a REST call, you assemble an action chain using an action making that REST call and an action assigning the result to that variable. For common cases, Visual Builder provides quick starts to automate the creation of that variable to match the payload of the REST call, enabling you to quickly bind the REST call's payload in your pages. Typically, the variable's type matches the structure of the REST payload, though you have the option of defining your own type that matches your use case more closely, and then mapping the REST payload to a variable that uses that type.

Built-in Variables

Visual Builder provides several built-in variables that allow you to access application metadata.

currentPage

Use the currentPage variable on the application object to access some of the current page's metadata, such as ID and title. This variable automatically updates as the current page changes during navigation and can be used to update a navigation component with the currently selected page.

Name	Description
$application.currentPage.id	Path of the current page. The path describes the location of the page in the flow hierarchy.
$application.currentPage.path	Path of the current page for the application. The path describes the location of the page in the flow hierarchy.
$application.currentPage.title	Title of the current page.
$flow.currentPage	ID of the current page for this flow.

currentFlow

If there is a routerFlow in the page, use the $page.currentFlow variable to retrieve the ID of the current flow.

path

Use the path variable to build the path to a resource, such as an image located in a folder.

Name	Description
$application.path	Path needed to retrieve a resource located in the application folder.
$flow.path	Path needed to retrieve a resource in the flow folder.

user

Use the user variable to access information about the current user, based on the information returned by the security provider.

Name	Description
$application.user.userId	User ID (string).
$application.user.fullName	Full name of the user (string).
$application.user.email	User email (string).
$application.user.username	User name (string).
$application.user.roles	One or more user roles (array of strings)
$application.user.roles.roleName	Returns true if roleName is a role of this user.
$application.user.permissions	One or more user permissions (array of strings).
$application.user.permissions.permName	Returns true if permName is a permission of this user.
$application.user.isAuthenticated	Returns true if the user is authenticated.

info

Use the info variable to retrieve some information about the application and page descriptor.

Name	Description
$application.info.id	Application ID as defined in app-flow.json.
$application.info.description	Application description as defined in app-flow.json.
$flow.info.id	Flow ID as defined in flow-id-flow.json.
$flow.info.description	Flow description as defined in flow-id-flow.json.
$page.info.title	Page title as defined in page-id-page.json
$page.info.description	Page description as defined in page-id-page.json

See also Built-in Variables in the Oracle Visual Builder Page Model Reference.