Visual Scripting

Visual Scripting

Express Summary: Implement interactive logic with visual scripting: click events, store management, and dynamic creation of cards and tasks.

Introduction to Visual Scripting

We now have a nice interface, but it's not interactive. It's time to add logic to be able to create cards and tasks using visual scripting.

1. Create a click event

Add event to "Add a task" button

1. Go to the Card component
2. Select the add task button div
3. In the right panel, click Events then "+"
4. Choose the Click event
5. Rename the div to "add card" for clarity

Access the logic

1. Click on the event or go to the Logic tab
2. The event appears as "onclick (add card)"

2. Understand the visual scripting system

Block types and connections

• Execution blocks: white wire that defines execution order
• Data blocks: colored wires by type
  • Yellow: string
  • Green: number
  • Red: boolean
  • Blue: object
  • Square: array of corresponding type

Test example

1. Create a Log block
2. Connect it to the onclick event with the white wire
3. Add text: "hello"
4. Test with right-click � Execute to see animation
5. Preview: clicking "add card" displays "hello" in console

3. Retrieve and manipulate properties

Access component properties

1. Right-click � type "get"
2. Select "get tasks" or "get title"
3. These blocks retrieve properties defined in the component

Add a task with Push

1. Use the Push block to add an element to an array
2. Connect get tasks to the array input of Push block
3. In "value", write "new task"
4. Connect onclick to the Push block
5. Test: each click adds a new task

4. Create the card addition system

Modify CreateButton component

The button should have two states:

• Normal state: "Add a card" button
• Edit state: text input + validation/cancel buttons

Create state variable

1. Add an isEditing variable (boolean) in CreateButton
2. Wrap the button in a Template
3. Condition: display if isEditing = false

Create edit interface

1. Add a second Template with condition isEditing = true
2. Insert a Text Input from UI Library
3. Add two icons: validation (check) and cancel (cross)
4. Style with display flex and align-items center

5. State switching logic

Switch to edit mode

1. Add a click event on the "Add a card" button
2. In Logic, use Set isEditing to true

Handle text input

1. Create a title variable (string) in CreateButton
2. On Text Input, set v-model = title
3. Display icons only if title empty` (Template with condition)

6. Validation and cancellation

Validation event (check)

1. Add a click on the validation icon
2. Retrieve value with get title
3. Test with a Log to verify retrieval

Cancel event (cross)

1. Add a click on the cancel icon
2. Use Set title with empty string
3. Field empties automatically thanks to v-model

7. Create a card in the store

Understand data structure

A card contains:

• title: string
• tasks: array of strings

Retrieve store data

1. Use get store to access global data
2. Use spread to decompose the object and retrieve the card list
3. Spread allows extracting object properties

Add the new card

1. Use Push on the store's card list
2. Create a Create Object of type CardType
3. Connect get title to the object's title field
4. Leave tasks as empty array
5. Connect everything to the validation event

Reset interface

After card creation:

1. Set title to empty
2. Set isEditing to false

Advanced concepts

The spread operator

• Allows decomposing an object to access its properties
• Example: store.cards becomes accessible via store spread
• Can be chained to access nested properties

Useful shortcuts

• Ctrl + Space: see the value of each element
• Ctrl + Alt: see the expected type for each connection
• Right-click + Execute: test execution with animation

Final result

The application now allows:

• Adding tasks to existing cards
• Creating new cards with custom titles
• All data is saved in the store

Coming next: Computed variables for a smooth and pleasant user experience.