3.3 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

3.3 Excerpts: User Journey Setups

📋 Setup

Select a Task

Select Components from the side menu

In the title bar, click the expander arrow button to expand filter options

3.3 Adding a Component Collection

📘 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>

3.3 Excerpts: User Journey References