4.0 Adding a Component Collection

Adding a Component Collection

👥 User Journey

User Journey – Adding a Component Collection

📋 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

Note the fruits and fruits.item Variables have been created for the Collection based on the value of the ctx-foreach attribute and the declared Variable within the Collection

Warnings

Deleting a Variable deletes its Content Items, which can result in data loss if the Task is completed.

Be careful not to accidentally delete Variables in the following ways:

By changing a Variable’s name or type
By cutting and pasting a Variable in the Component Editor
- Work around this by using copy and paste instead

💻 Examples

The example code in the video is shown below:

HTML

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