Create Variables

You can create variables and constants in App UI, flow, and page artifacts as well as in dynamic layouts and fragments. Variables and constants are assigned a scope based on where they're created, and this scope determines where they can be used. When deciding where to create a variable or constant, consider where you want to use it.

To create a variable or constant in an artifact:

1. Click the Variables tab to open the Variables editor for your scope.

   If no variables or constants are defined, you'll see a message. Otherwise, you'll see a list of variables and constants defined for the artifact. Select a variable or constant to view its attributes in the Properties pane:
   
   Description of the illustration variables-editor-appui.png
   

2. Click + Variable to create a variable, or + Constant to create a constant.
3. Change the default name for the variable or constant in the ID field in the Properties pane.
   Default IDs are assigned as variable1 or constant1. If the ID already exists, the number is incremented, for example, variable2, variable3, and so on.
4. Select a type in the Type drop-down list (default is String). The Type drop-down list displays the built-in types as well as any custom types that can be applied to the variable. For example, the getallPublicWorkersResponse type shown here is based on an endpoint:
   
   
   Description of the illustration variable-create-id-type.png
   
   
   To use a custom type with your variable, make sure the type is already defined (see Create Types).

   Tip:

   To quickly create variables for a custom type, switch to the Types editor, select your type, then right-click and select Create Variable.
5. After the variable is created, select it to edit its properties in the Properties pane. Here are some key properties:

   Property	Description
   Type	Variable type which could be a specific primitive type (string, boolean, number, and so on); a structured type such as an array or object; a dynamic type (any); or a built-in type such as Service Data Provider or Array Data Provider.
   Access for Application Extensions	Used to make a variable or constant available to App UIs in another extension. See Make Variables and Types Available to Extensions.
   Input Parameter	Used to mark a variable as input, indicating that the variable is part of the contract for navigation. Can be set to Disabled (default), Enabled, or Required. Choosing Required implies that the variable must be set to allow navigation to that page, flow, or App UI. If you choose Enabled or Required, you can select Pass on URL to pass the input parameter on the URL of the page, flow, or App UI that you are invoking (by adding ?paramName=Value to the end of the URL). You can use this approach to bookmark pages that will show specific data based on the parameter.
   Default Value	Default value for a variable to be initialized and can be an expression or a static value.
   Dirty Data Behavior	Track changes in a variable's state, marking it as "dirty" when its current value differs from its initial value. See Track Variables to Detect Unsaved Changes.
   Persisted	Used when you want the lifespan of the variable to be longer than the page, for example, an authorization token that you want to keep for the duration of a session. This property ensures that even if the page is refreshed, the token will still be available throughout the session. Can be set to: Device: Stores the variable in the browser's local storage and persists it on the device where the App UI is running, even if the browser is closed. If you want to store a variable across sessions, use this setting. Session: Stores the variable but only during the current browser session. History: Stores the variable on the browser history. When navigating back to a page in the browser history using the browser back button, the value of the variable is restored to its value at the time the App UI navigated away from this page. None: Variable is not stored (default).
   Rate Limit	Used when you want to limit how often the onValueChanged event is triggered, which happens whenever a variable's value changes. By default, the event listener that "listens" for this event waits for the value (specified here in milliseconds) to expire after all changes stop to fire the event. You can use the onValueChanged event to trigger an action chain. 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. To do this, open the Events tab in the variable's Properties pane, then specify the action chain that the variable's change will initiate. See Start an Action Chain When a Variable Changes.

   You can also:

   • Use the Events tab in the Properties pane to trigger an action chain when the variable's value changes, by adding a listener for the onValueChanged event and selecting the action chain that the change will initiate.
   • Use the Design Time tab in the Properties pane to display a custom component for setting the variable's Default Value in the General tab. For example, if you want to use a color picker component instead of the default text field to select a color, select Color as the Subtype in the Design Time tab. If you want to use an enumerated list, select Enum Values as the Subtype and add your enumerated list, which then appears as a drop-down menu for the Default Value:
     
     
     Description of the illustration var-defaultvalue-enum.png
     
     

     The properties you see in the Design Time tab will depend upon the variable's type, and the Subtype property you select. For example, if Date is selected as the Subtype, you'll also see fields for setting Minimum and Maximum limits.

     Selecting Color, Time Zone, Date Time, Date, or Enum Values as the subtype will display custom components for the Default Value. If you select any of the other subtypes, you'll see a text field for entering the Default Value.

Now that the variable is defined, you can bind it to a component to display its data. Here's a simple example: Let's say you have an Input Text component on a page to display an employee's name. If the data for this component comes from a string-type name variable, you bind the component to this variable.

To do this, open the page containing the Input Text component in the Page Designer and select the component. In the component's Properties pane, open the Data tab. Hover over the Value field and click to open the Variables picker, then select name under Page to populate the data value:

Description of the illustration var-bind-component.png

The {{$variables.name}} value is shorthand for saying your heading is now bound to the page-level variable name. The double curly braces around the value {{ }} indicate that the variable can be updated or read. Double square brackets [[ ]] mean that the variable's data can only be read.

Once a variable is used in an App UI, you can view its usage information under Usages in the variable's Properties pane. You can see which pages access the variable and click links to readily navigate to those pages.