Create Variables in Artifacts

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. Select a variable or constant and to view its attributes in the Properties pane:
   
   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 (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.

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. 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. See Start an Action Chain When a Variable Changes.
• 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.

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.