User interactions

Events
Actions
Add interactivity to your applications with events and actions.
Feature Tour (Episode 5)
Back to the Academy

User interactions

Quick summary: Create interactive components with variables, computed values and events for a dynamic experience.

Introduction to reactive components

This tutorial demonstrates how to use Visual Scripting to build components that respond to user interactions and perform dynamic calculations.

1. Basic variables

What are variables?

Variables are storage containers for values that can be changed and accessed from anywhere within your component.

Creating your first variable

  1. Create a new component
  2. Add a new variable called "name"
  3. Set Type: String
  4. Default value: Leave this empty for now

2. Input with data binding

Adding a Text Input widget

  1. Click + → Widget → Form → Text Input
  2. Set the model property to your "name" variable
  3. Now typing in the input field automatically updates the variable

Testing reactivity

  1. Add a second Text Input and connect it to the same "name" variable
  2. Switch to Preview mode: typing in one field updates the other instantly
  3. Amazing result: Both fields stay synchronized in real-time!

3. Interface improvement

Improving the user interface

  1. Set the Text Input's label property to "name"
  2. Notice the smooth label animation when you click in the field
  3. This creates a more polished, professional look

Displaying dynamic messages

  1. Add Custom Text with: "Hello Mister"
  2. Create a placeholder using braces: {name}
  3. Click the lightning icon and link it to your "name" variable
  4. Result: When you type "Hugo", it shows "Hello Mister Hugo"

4. Computed variables

The challenge

When someone types "Hugo Attal", we want to display "Mr. Attal" (just the last name) instead of "Mr. Hugo Attal".

Creating a computed variable

  1. Click + → Computed
  2. Name it: "LastName"
  3. Key benefit: Computed variables automatically recalculate when their source data changes
  4. Perfect for derived values like extracting last names from full names

Building the extraction logic

  1. Switch to the Logic tab
  2. Add a GetName node to retrieve your "name" variable
  3. Press Ctrl + Space to verify it shows "Hugo Attal"

Extracting the last name

  1. Add a Split node with " " (space character) as the separator
  2. This converts "Hugo Attal" into an array: ["Hugo", "Attal"]
  3. Add a Last node to get the final element from the array
  4. Connect the result to your computed variable's output

Best practices for Visual Scripting

  • Data nodes don't need execution wires - they run automatically when needed
  • Keep your nodes neatly aligned for better readability
  • Logical flow: Arrange nodes left-to-right to show the data transformation process

5. Using the computed

Using the computed value

  1. Update your Custom Text element
  2. Change the variable reference from "name" to "LastName"
  3. Result: Now displays "Hello Mr. Attal"
  4. Test it: Type "Jean Dupont" and watch it automatically show "Mr. Dupont"

Complete reactivity

The computed updates automatically with each input modification.

6. User events

Adding interactivity with click events

  1. Select any element (like a div or button)
  2. Go to Events → click + → Click
  3. Click Edit Logic to define what happens when clicked

Building the click logic

  1. Add a Log node to display output in the console
  2. Add a Template node with text: "Hello, Mr. {LastName}"
  3. Connect: GetLastName → Template → Log
  4. Result: Clicking shows "Hello, Mr. Attal" in the console

Testing your interactive component

  • Builder mode: Click events are disabled for design work
  • Preview mode: Click events work - check the console for output
  • Try this: Change the name, then click to see the updated message

Key concepts

Variables vs Computed

  • Variables: storage of modifiable values
  • Computed: automatic calculations based on other values

Reactivity

  • Automatic update of all linked elements
  • Real-time synchronization
  • No manual code required

Visual Scripting node types

  • Get/Set: variable retrieval and modification
  • Split: string division
  • Last: last element of an array
  • Template: text formatting with variables

Events

  • Click: user interaction
  • Logic editing: define actions
  • Preview mode required for testing

Best practices

Visual code organization

  • Node alignment for readability
  • Logical and clear connections
  • Separation of responsibilities

Variables and computed

  • Variables for user data
  • Computed for transformations
  • Explicit and descriptive names

Testing and debugging

  • Ctrl + Space: check values
  • Console for logs
  • Preview mode to test interactions