Create Variables

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

Note though that unlike variables, constants remain the same throughout their scope. You can't change the value of a constant once it has been initialized.

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:
   
   Description of the illustration webapp-variables-editor.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 the type in the Type drop-down list (default is string).
   
   Description of the illustration page-designer-variables-create.png
   
   The type can be one of the built-in types (string, boolean, number, and so on) or a custom type (object, array, enumeration, or one based on an endpoint). To use a custom type with your variable, make sure the type is already defined.

   Tip:

   You can quickly create a new type based on the structure of a variable, if the variable uses array or object as its type. Simply right-click the variable and select Create Type. This way, you can readily create a type based on a variable's existing structure and assign the variable (as well as other new ones) to that type.
   

   
   Description of the illustration var-createtype.png

   
   

   Conversely, to quickly create variables for a custom type, switch to the Types editor, select your type, right-click, and select Create Variable.

After you create a variable, you can select the variable in the list and edit its properties, for example, to identify it as an input, or to add attributes if its type is array or object. Here are some key properties:

Property	Description
Type	Identifies the 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.
Input Parameter	Marks 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 application. 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 application 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. You can also enter a Label and Description to show within a icon; page users can then click the icon in the Page Input Parameters dialog to get some context on how best to set the parameter's value. See Enable Variables as Input Parameters.
Default Value	Specifies the default value to initialize a variable. This property can be an expression or a static value. For string-type variables, you can use the Design Time tab in the Properties pane to display a custom component for setting the variable's Default Value. 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, Date, Date Time, Enum Values, or Time Zone 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.
Dirty Data Behavior	Tracks 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	Sets the lifespan of the variable to be longer than the page, for example, when you want to keep an authorization token 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 application 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 application navigated away from this page. None: Variable is not stored (default).
Rate Limit	Limits how often the onValueChanged event is triggered, which is whenever the 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 trigger an action chain when a variable's value changes by adding a listener for the onValueChanged event and selecting the action chain that the change will initiate. 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, switch to 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.

Now that the variable is defined, you can bind it to a component to display its data. See Bind a Component to Data.

Once a variable is used in an application, 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.