Data variables

A data variable is essentially the same thing as a page variable in that it exists in the context of the current page, i.e. it's not accessible from other pages, and disappears if the page is removed from the navigation stack.

The difference is that it gets its schema from the data resource it points to, and it comes with included default logic.

Using data variables

After you have configured a data resource via the Data section in the global toolbar, you can add a new data variable via the Variables configurator, accessible via the switch at the top of the view canvas, and then selecting Data variables from the menu on the left.

You can add a new data variable onto the current page by clicking the Add data variable button and choosing a data resource from the dropdown.

Data variable name

Name used to reference the data variable in the Composer UI and elsewhere. For example, a data variable with the name RestCountries would be referenced by data.RestCountries in formulas.

It is good practice to name your data variables so that their type can be inferred, e.g. CurrentRestCountry for a single data record type variable.

Data variable type

There are three types of data variables:

  • Collection of data records – matches the GET (ALL) route of a REST API direct integration, and gives you a collection of data records, represented as an array of objects

  • Single data record – matches the GET (ONE) route of a REST API direct integration, and gives you a single data record, represented as an object

  • New data record – initializes an empty data variable, useful when creating e.g. a form to create records into the backend

Do not change the data variable type after you start using it, as that can lead to issues.

Data variable properties

A data resource can also define some dynamic properties that can be configured when using a data variable. Some of them are required (cannot be left empty) and some are optional.

For example, a Single data record type data variable would typically require some kind of ID property, so that the backend knows which record to fetch. This would be a required property.

Similarly, a Collection of data records type might give you an option to define a search query, or limit/skip parameters for pagination – it all depends on the connected data resource.

Data variable logic

A data variable comes with default logic that determines how it populates itself with data from the backend.

You can view this logic by selecting the data variable and clicking the Add logic button at the bottom of the screen.

Default logic for a Collection of data records type data variable

Here we can see the relationship between the data variable and the data in the backend.

We first fetch the data from the backend via the Get record collection flow, at which point the data exists just as an output argument of the node. If we didn't have any subsequent nodes, the flow execution would terminate and the data would just be thrown away.

However, we then use the Set data variable flow function to set the data to the app state. This makes it available to be used in view component bindings or as inputs of other logic nodes.

As we can see above, the Set data variable node uses the Output of another node binding type to utilize the data fetched by the previous node.

For a Single data record type data variable, the logic is similar, but instead a single record is fetched with the Get record flow function.

For a New data record type data variable, the logic simply initializes the data variable to an empty object when the page mounts.

Data variable properties in the logic canvas

The same properties that can be configured for a data variable via the sidebar are available in the Get record collection or Get record nodes – in fact, changing properties in the sidebar for the data variable itself sets them for the flow function nodes under the hood.

Changing the logic

The data variable's logic canvas is just a contextual place to handle data loading logic. If you wanted to, you could remove all the nodes here and reimplement the logic in your page's root canvas, and the effect would be the same.

This also means that all flow functions can be used here, and you can construct as complex logic as you like.

For example, you could sort your data before setting it to the data variable by using a formula instead of the direct Output of another node binding.

Or if your Get record node's output would be an object with two properties that each contain an array, you could define two page variables with the correct schema and set them separately of one another.

You can always reset back to the default logic with the Reset data variable logic button, available in the properties panel when the data variable itself is selected.