# Dynamic display

**Express Summary:** Create data types, configure the global store, and use loops to dynamically display cards and tasks.

---

## Problem: Component scalability

Currently, we only have two cards in our application. If we had 10, it wouldn't be practical to manually place 10 components. We need to create a list of cards accessible throughout the application.

## 1. Define data types

### Create the CardType
1. Right-click � **New** � **Type**
2. Name the type **CardType**
3. Define the structure:
    - **Type**: Card
    - **Structure**: Object (since a card has multiple properties)

### CardType properties
- **title**: string (the card title)
- **tasks**: array of strings (list of tasks)

This structure defines the "schema" that each card will have in our application.

## 2. Configure the global store

### Create the data structure
1. Go to the **Store**
2. Redefine the schema:
    - **Name**: cards (with an S for plural)
    - **Type**: Array of CardType

### Initialize default data
Fill the store with example data:

**Card 1 - "To Do":**
- title: "To Do"
- tasks: ["task 1", "task 2"]

**Card 2 - "In Progress":**
- title: "In Progress"
- tasks: [] (no tasks)

**Card 3 - "Done":**
- title: "Done"
- tasks: ["task 3", "task 4", "task 5"]

### Test the store
1. Click **Reset to Store** in the Preview tab
2. The preview now displays the default store data

## 3. Dynamic card display

### Transform static display into loop
1. Return to the **Main** page
2. Right-click on a card � **Wrap in component**
3. Choose **Template**

### Configure the loop
1. In the Template, select **For** (for a loop)
2. Define iteration over **cards** (store data)
3. Change Preview from **Once** to **All** to see all cards

### Connect dynamic data
1. Select the Card component
2. Modify the **title** property: `template.value.title`
3. Titles update automatically

## 4. Dynamic task display

### Add tasks property to Card component
1. Go to the **Card** component
2. Add a new property:
    - **Name**: tasks
    - **Type**: array of strings
    - **Default values**: ["task 1", "task 2"]

### Create a loop for tasks
1. In the Card component, select the task area
2. **Wrap in component** � **Template**
3. Configure a **For** loop on the **tasks** property
4. Switch Preview to **All** mode

### Make task content dynamic
1. Select the text of a task
2. Replace fixed text with a variable: `{taskName}`
3. Create the **taskName** property linked to `template.value`
4. Tasks now display dynamically

## 5. Connect everything together

### Link cards to store data
1. Return to the **Main** page
2. Select the Card component in the loop
3. Modify the **tasks** property: `template.value.tasks`
4. Each card now displays its own tasks

### Test complete display
1. **Reset to Store** to load data
2. All three cards display with their respective titles and tasks
3. Add a card to the store to test reactivity

## Key concepts

### Types
- Define data structure
- Ensure consistency throughout the application
- Enable automatic validation

### Store
- Global data storage for the application
- Single source of truth
- Enables synchronization between components

### Templates with loops
- **For**: iterates over arrays or objects
- `template.value`: accesses the current loop element
- Dynamic display based on data

### Preview modes
- **Once**: displays one element (for design)
- **All**: displays all elements (for testing loops)

## Advantages of this approach

- **Scalability**: adding cards only requires modifying the store
- **Maintenance**: single card definition for the entire app
- **Consistency**: types guarantee data structure
- **Reactivity**: store changes automatically reflect

---

*Coming next: Implementing interactive logic to add and manipulate cards and tasks.*