Variables

Variables are a way to store temporary data that can change rapidly. Data stored in variables are only persisted while the page is visible. For example, if you reload the window then all variables will be reset. Variables are the fastest way to store and retrieve data. This makes variables an ideal choice when you need high performance but you don't care about the data being persisted between uses.

Creating variables

You can create a new variable by clicking the "+" button next to Variables in the data panel.

You can then give your variable a Name and an Initial value for the variable. The initial value can either be specified as a static value or as a formula. By using a formula you can specify the initial value of a variable to be based on an attribute.

You cannot specify the initial value of a variable based on data from an API since the value data from the API will not be ready at the time the variable is initialized. Instead, set an initial value such as Null and the update the variable when the data is fetched from the API.

Your new variable is now available inside any formula in the component.

Updating variables

Once you have created a variable you will see a new action inside the action selector of any workflow inside the component.

Variable scope

We say that a variable is Scoped to the component it is defined in. This means that a variable can only be accessed or updated inside that component.

Initially this may seem rather limiting, but as your application grows and your are adding more and more components, it drastically simplifies reasoning about your applications data. Without this restraint it can sometimes be difficult to know which parts of our application is using a specific variable, or if it is even still relevant.

Binding input fields

A common use of variables is to represent the value of an input field. This can be done by selecting an input field and choosing "Bind to variable" in the Attributes tab.

Now every time the variable changes, the input fields value will change. Likewise every time a user inputs a new value in the input field, the value of the variable will change.

Binding an input to a variable is just a shortcut for: 1. Setting the inputs value attribute to match the variable. 2. Updating the variable when an input event happens on the input. To understand how this works, inspect the value attribute and input event of an input after you have bound it to a variable.

Learn more: