Creating Interactive Components with Actions

Introduction

Actions are the key to making your Structor projects interactive. In this tutorial, you'll learn how to use Action Flows to add interactivity to your elements, handle user events, manage state, and integrate with APIs.

Step 1: Understanding Actions

Actions in Structor are triggered by events and can perform various operations. The main triggers are:

• On Click: When an element is clicked
• On Hover: When the mouse enters an element
• On Load: When a page or element loads

Step 2: Create App State Variables

1. Open Settings (gear icon in the top bar)
2. Go to the App State tab
3. Click + Add Variable
4. Create a variable named counter with type Number and default value 0
5. Create another variable named message with type String and default value ""

Step 3: Create a Simple Counter Button

3.1 Add Elements

1. Add a Button element to your canvas
2. Set the button text to: "Click Me"
3. Add a Text element below the button
4. Set the text content to: {{counter}} (this displays the counter value)

3.2 Add Action Flow

1. Select the button
2. Open the Actions tab in the right panel
3. Click + Add Action
4. Select On Click as the trigger
5. The Action Flow editor will open

3.3 Add Update State Action

1. Click + Add Node in the flow editor
2. Select Update State action
3. Configure it:
   • Variable: Select counter
   • Operation: Select Increment
   • Value: 1
4. Close the flow editor

3.4 Test It

1. Click Preview to test your counter
2. Click the button - the counter should increase by 1 each time

Step 4: Create a Form with Validation

4.1 Add Form Elements

1. Add an Input element (for name)
2. Add another Input element (for email)
3. Add a Button element (Submit button)
4. Add a Text element to display messages (below the button)
5. Style them as needed

4.2 Configure Input Bindings

1. Select the name input
2. In the right panel, find Input Binding
3. Set it to: name (this creates a binding to the input value)
4. Select the email input and set its binding to: email

4.3 Add Form Submission Action

1. Select the submit button
2. Open Actions tab
3. Add On Click action
4. In the flow editor, add a Conditional node:
   • Condition: {{name}} != ""
   • This checks if name is not empty
5. In the "true" branch, add a Show Toast action:
   • Message: "Form submitted successfully!"
   • Duration: 3000ms
6. In the "false" branch, add another Show Toast:
   • Message: "Please enter a name"
   • Type: Error

Step 5: Make an API Request

1. Create a button labeled "Fetch Data"
2. Add an On Click action
3. In the flow editor, add an HTTP Request node:
   • Method: GET
   • URL: https://api.example.com/data
   • Output Variable: apiData
4. Add a Show Toast after the HTTP request with message: "Data fetched!"
5. Add a Text element displaying: {{apiData}}

Step 6: Navigate Between Pages

1. Create a new page in your project (use the Pages panel in the left sidebar)
2. Add a button on your first page
3. Add an On Click action
4. Add a Navigate action:
   • Page: Select your new page from the dropdown
   • Open in new tab: Leave unchecked

Congratulations!

You've learned how to:

• Create and use App State variables
• Build Action Flows
• Handle user interactions
• Validate forms
• Make API requests
• Navigate between pages

Next Steps

• Explore animations to enhance interactions
• Learn about data integration with Supabase
• Check the Actions documentation for advanced features