Collection input field

The Collection input field is a nested input field used to handle objects that need to be displayed a variable amount of times in the design, usually with editable content.

Here is an example: a "Meet our newest members" template, which displays between 1 and 6 portrait images, each with the individual's name above it. Sometimes there might be 4 new members to announce, sometimes 5, and sometimes 6. A Collection input field containing a Text and an Image input field would allow users to add or subtract copies of this object group to or from the design.

A collection field has entries (sometimes also called input groups). You can set up iterated objects, with exactly as many copies as the collection has entries, and each copy will display the content defined by its respective collection entry.

The Collection field only has a minimum and a maximum entries paramater.

However, the collection field itself will contain other input fields. You can add an input field to the collection by clicking the "Add field" button inside the collection card.

To define the default amount of entries and their individual default content, click the blue Edit button next to the Collection settings.

How to iterate and connect objects with a Collection field:

The Collection field must first be created without any connection to a property. To do this, you have to disable Easy Mode (switch to Advanced Mode) and then add a new Collection input field in the Input Fields view. In the example above, a Text input field and an Image input field were created directly inside the new Collection.

To display an object corresponding to each entry, you need to enable the Iteration property on your chosen object. For the Iteration Count, use the '.length' sub-property of the Collection, which returns the amount of entries in the Collection.

Each iterated copy of the object has a unique value for the Iteration key "i". The values start at 0 and increase by 1 for each copy. You can use this Iteration key as a variable to define the dynamic layout and also to connect content properties to the values of the input fields inside each entry.

In the example above, the dynamic layout is defined by the expressions used for the X and Y properties of the iterated image object. Both expressions use the variable "i", which leads to different X and Y positions for each copy of the object.

X = 120 + 480 * (i % 2) for example returns the value 120 for even numbered entries and 600 for odd numbered entries (remember that "i" starts at 0).

Y = 360 + 500 * FLOOR(i / 2) divides the number of copies into pairs of two and moves each consecutive pair down by 500 pixels.

The image source property is defined as Collection[i].ImageEdit. "Collection" is the variable name of the collection in the example, and "ImageEdit" is the variable name of the image input field inside the collection. The expression returns the value of the "i"-th image input field in the collection.