Dynamic display

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.