Sequence variable

Data connection allows us dynamically change the number of elements on the page. If we have a variable with the array of data, we can use it in the section “Sequence variable” to displays a copy of a UI element for each item in the array.

Let’s go back to the Builder >  Settings of a UI element > Data.

Let’s take a UI object Card and assign to it a variable with an array [1,2,3,4]:

When I will launch a preview mode I will see the 4 copies of the card (for each element of the array):

Usage of sequence items

If there are other UI elements inside of a UI element with sequence variable. We can use instances of the sequence variable to change properties of “child“ elements.

Let’s take our previous example and set the title of each card to the element of the array [“James“, “Jone“, “Mary“, “Sara“]. To do so I need to do the following:

1. Open the property of the text field Config > Appearance > Text
2. Type in {{
3. The system will display a list of possible variables
4. Select the variable: Sequence item > “%variable name% item” (in our example “selector item”)

‍

 5. Run the Preview mode

1. As you can see now the header of each card contains the item of the array. Setting fields support the JavaScript syntax, so you can call objects and their parameters instead of arrays.

Usage of sequence items indexes

Maybe you noticed another additional variable that is available for us. It looks like this: “%variable name% item index”. With this variable you can access the number of an element in the array. If I will select it for the text field in our example, the final result will look like this:

You can use variable in for the following UI elements settings:

• properties
• styles