# 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