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):
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:
5. Run the Preview mode
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:
Didn't find something here? Drop us a line at contact@uibakery.io