Daten Interator

📘 Developer Guide

With the Brick Data Iterator, you can repeat its nested child bricks dynamically.
From a programming perspective, it behaves like a for-loop that iterates over an array of data.

---

🔁 Example

Following Example will show How to Render Multiple Tables Based on an Array.

Designer

Example of a Data Iterator Brick that renders multiple tables with a headline.

Runtime

Example of how the Data Iterator Brick renders multiple tables.

---

⚙️ Configuration Properties

Key	Label	Description	Default Value
data	Array of elements	Accepts an array of objects to iterate over	[]
entryContextKey	Name of each item (usage see 2.2)	Variable name to access each object during iteration	entryContext

---

🛠️ Usage

1. Static Data

Use the configuration button to insert your static data in JSON format.

{
    "data": [
        { "firstName": "Max", "lastName": "Mustermann" },
        { "firstName": "Max", "lastName": "Mustermann" }
    ]
}

This static data example will make your brick render its children 2 times.

2. Programmatical Data

2.1 pre-execution script of the data-iterator brick

This will make your Data Iterator render all children two times. Each time your children can access the data of the x-th element (see 2.2).

// 📥 Import required Flyze Brick APIs
const { api: brickApi } = fyzBrick;

// ⚙️ Retrieve the current configuration of the Brick
const brickConfig = brickApi.getConfig();

// 📊 Define the data to be injected into the Brick
const data = [
    { firstName: "Max", lastName: "Mustermann" },
    { firstName: "Peter", lastName: "Woodfire" }
];

// 🧩 Assign the custom data to the Brick's config
brickConfig.data = data;

// ✅ Apply the updated configuration to the Brick
brickApi.setConfig(brickConfig);

2.2 how to access data in a child brick

This example shows how to access the runtime environment of a Brick, specifically retrieving the data of the current iteration context. To make this script work you need to create an pre-execution script on your child brick.

// 📥 Import the Brick environment API
const { env: brickEnv } = fyzBrick;

// 🔍 Access the current entry's context (i.e., the x-th element in iteration)
// 1. option: with entryContextKey is 'item'
const { value: item } = brickEnv.getProp('item');

// 2. option: with entryContextKey is unset
const { value: entryContext } = brickEnv.getProp('entryContext');

// 3. option: get all available data
const envData = brickEnv.get();