Variables tab

The Variables tab enables you to define global variables to use throughout your app. This page outlines how to:
​Create a variable: Configure a global variable.
​Use a variable: Integrate a variable into component styles, states, and actions.
Create a variable
To create a variable:
1.Navigate to the Variables tab.
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.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​
​Set a state to a variable​
​Use a variable in an action​
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.Click the link icon to open the Model Explorer.
2.Click the vars tab.
3.Select a variable.
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.

Last modified 27d ago