Iterated elements

How to create and control duplicates:

In the image above, three white rectangles are clearly visible (one behind each line of text). However, only one rectangle element ("rectangle2") is used to display all three background rectangles:

This is because the rectangle is being iterated to create copies of itself: One copy for each line of text.

You can iterate almost all elements by going to the element's Visibility and Iterations tab and clicking on the Iteration checkbox:

As you can see, there is no immediate effect. This is because you also need to set up the Count property, which controls the number of duplicates displayed.

In most cases, the number of duplicates will depend on some reactive sub-property (for example, the number of lines in a text or the number of input group duplicates in a collection module).

In this example, the iteration count is set to the number of lines in the text element:

Still no immediate effect. Stay with me! Hovering over the Count property shows that there are currently 3 duplicates displayed. Since they all have exactly the same properties (with one exception), they are layered on top of each other and no difference from before is visible.

The only property that is unique and inherently different for each duplicate is its index. The index is simply a way to number each duplicate, starting at 0. You can access each duplicate index with the key, which is named "i" by default.

In the example above, the three duplicates have the following indexes:

First duplicate: i = 0,

Second duplicate: i = 1,

Third duplicate: i = 2.

Now, to make other properties like X, Y, width or height different for each duplicate, you simply need to compute these properties as expressions containing the key "i".

Here is an example of how to do that (so that the duplicates match the position and size of each line of text):

Text elements make it easy for you to access the position, width and height of each line. In the above example, text1.lines[] is essentially a list (array) of all text lines and their corresponding sub-properties. If you insert "i", you get text1.lines[i], which returns the "i "th line of text. Since "i" is different for each rectangle duplicate, text1.lines[i] will be a different text line for each duplicate.

You may also simply use "i" directly in a mathematical expression:

On the following subpage, we will explore how to iterate text elements using a collection module.

Last updated