Variables tab

The Variables tab enables you to define global variables to use throughout your app. This page outlines how to:

Create a variable

To create a variable:
  1. 1.
    Navigate to the Variables tab.
  2. 2.
    Click Add Variable to create a new variable.
    Note: The Add Variable button disappears after you add a variable. To add additional variables, click the plus sign in the Variables List section.
  3. 3.
    Configure the variable's:
    • Name: Name of the variable.
    • Data Type: Type of the variable (e.g., string, object, boolean, etc.).
    • Schema and Default Values: Default value of the variable.
    Note: Configured variables appear in the Variables List on the left side of the Variables tab.
Once you create a variable, you can use it throughout your app.

Use a variable

You can use a global variable in component style, state, and action configurations by referencing it with the following notation: {{vars.<yourVariablename>}}.
For example: {{vars.myVar}}.
The following subsections describe a few ways to integrate global variables into your application:

Embed a variable in a style

The following example shows a variable named myVar embedded into a Button component's label state.
When the app is previewed, the Button's text label displays the variable's default value.

Set a state to a variable

After you define a variable, it appears as a component in the Logic view's Libraries panel.
In this example, the myVar variable is integrated into the app as a component. When the Button is clicked, the myVar component's value is pulled by the Text component, which displays the variable's default value (hello world).

Use a variable in an action

Some components enable you to use variables in their actions. For example, the Get Data Type component enables you to embed a variable in its Data action.
To add a variable to a component action, manually enter the variable in the action's input field or use the Model Explorer. To select a variable in the Model Explorer:
  1. 1.
    Click the link icon to open the Model Explorer.
  2. 2.
    Click the vars tab.
  3. 3.
    Select a variable.
  4. 4.
    Click Insert to embed it into the action.
In this example, the Get Data Type's data field is set to a variable named myVar with a value of hello world. When the Button is clicked, the Text component pulls the variable's data type from the Get Data Type component and displays it in the application.