4.0 Adding a Collection With Multiple Variables

Adding a Collection With Multiple Variables

Adding multiple Variables in a Collection is the same journey as adding a single Variable, except that the syntax is slightly different, for example:

@fruit changes to @fruit.name @fruit.colour

👥 User Journey

User Journey – Adding a Collection With Multiple Variables

📋 Setup

Select a Task

Select Components from the side menu

In the header bar, click the expander arrow if the filter options are hidden

📘 Steps

1️⃣ Click the pencil icon on the Component to add a Collection to

2️⃣ Type HTML, including the Collection syntax, into the Component Editor

3️⃣ Click Configure variables

4️⃣ View – and optionally edit – the Variables that have been created for the Collection

5️⃣ Click the Return to editor button

6️⃣ Click Save

7️⃣ Click Close

Notes

Notice that the fruits, fruits.item.name, and fruits.item.colour Variables have been created for the Collection based on the value of the ctx-foreach attribute and the declared Variables within the Collection

💻 Examples

The example code in the video is shown below:

HTML

<ul ctx-foreach="fruit in Fruits">
  <li>@fruit.name @fruit.colour</li>
</ul>