Skip to main content

⛓️ Canvas

The Workflow section is a visual editor that allows users to easily configure app business logic and automation. It simplifies the process of creating and managing actions that trigger specific behavior in your app. Users can visually organize actions such as navigation, data requests, and interactions within a flow to create a seamless user experience.

How It Works​

To use the Workflow editor, follow these steps:

  1. Choose an element (e.g., button, form, etc.) on which you would like to add an action.
  2. In the left settings bar, click on Add Action to assign functionality to the selected element.
  3. Select «More actions» from the list of available actions. This will open the Workflow Canvas, where you can define custom actions for the element.
  4. The Workflow Canvas will appear, displaying a visual flow where you can define the sequence of actions that occur when the user interacts with the element.
  5. Add Actions:
    • Click the plus (+) button to add actions to the workflow. A menu will appear with several action categories for you to choose from:
      • Navigation: Actions related to page transitions and navigation (e.g., navigate to another screen).
      • Data: Actions related to data manipulation, such as database requests or sending HTTP requests.
      • Interaction: Actions that control user interface elements, such as showing a message or updating a component's state.
      • Integrations: Actions to integrate with external services, APIs, or third-party tools.
Loading video...

Action Chaining & Flow Control​

Understanding Action Sequences​

Actions in AppStruct execute sequentially by default - each action waits for the previous one to complete before starting. This ensures predictable, reliable workflows.

Sequential Execution:

Button Click → HTTP Request → Show Toast → Navigate to Screen

Each action in this chain waits for the previous action to finish before executing.

Creating Action Chains​

1. Basic Chaining:

  • Click the plus (+) button after any action to add the next step
  • Actions connect automatically in the order you add them
  • Each subsequent action receives data from previous actions

2. Data Flow Between Actions:

  • Variables: Actions can store results in variables for later use
  • Response Data: HTTP requests and database operations return data that subsequent actions can use
  • Conditional Data: Use conditions to pass different data based on scenarios

Example Chain:

1. HTTP Request (Get user data) → Store in variable "userData"
2. Condition → Check if userData.status == "active"
3a. If True → Show Toast "Welcome back!"
3b. If False → Show Alert "Account inactive"
4. Navigate to appropriate screen

Advanced Flow Control​

1. Parallel Actions (Coming Soon): While current actions execute sequentially, you can simulate parallel execution:

  • Use multiple UI elements to trigger simultaneous workflows
  • Leverage local storage to coordinate between different action chains

2. Error Handling in Chains:

  • Try-Catch Pattern: Always plan for failure scenarios
  • Fallback Actions: Create alternative paths when primary actions fail
  • User Feedback: Inform users when something goes wrong

3. Complex Branching:

Start Action
    ↓
Condition 1
    ↓          ↓
  True       False
    ↓          ↓
Action A   Condition 2
    ↓      ↓      ↓
    ↓    True   False
    ↓      ↓      ↓
    ↓   Action B Action C
    ↓      ↓      ↓
    ↓←─────┴──────┘
    ↓
Final Action

Action Categories & Available Actions​

1. Navigation​

Use these actions to move the user around your app or open external resources:

  1. Go back
    • Navigates to the previous screen in your app's history.
  2. Open link
    • Opens a specified URL in the user's default browser or within the app (depending on your settings).
  3. Go to screen
    • Navigates the user to a different screen within your app. You can specify which screen to open.

2. Data​

These actions allow you to manage and manipulate data within your app or through external APIs:

  1. Add row
    • Inserts a new row into a specified database table or collection.
  2. Delete row
    • Removes an existing row from a database table or collection.
  3. Update row
    • Updates the data of a specific row in a database table or collection.
  4. HTTP request
    • Sends an HTTP request (GET, POST, PUT, DELETE, etc.) to an API endpoint. Configure request parameters, headers, and body as needed.
  5. Registration
    • Handles user sign-up or registration by sending the necessary data to your authentication or user management service.
  6. Authentication
    • Manages user authentication, such as logging in or logging out, or verifying user credentials.

3. Interaction​

Use these actions to create dynamic, interactive experiences within your app:

  1. Open alert
    • Displays an alert dialog with a custom message, often used for warnings or confirmations.
  2. Show toast
    • Shows a short, non-intrusive message (toast) at the bottom or top of the screen, typically used for notifications or quick feedback.
  3. Push notification
    • Triggers a push notification to the user's device, if configured and permitted by the user.
  4. Local storage
    • Reads from or writes data to local storage on the user's device or browser, allowing you to persist user settings or small bits of data.

4. Integrations​

These actions help you connect your app to third-party services and tools:

  1. Stripe
    • Integrates with Stripe's payment processing services (e.g., initiating a checkout session).
  2. Zapier
    • Connects your app to thousands of other web services through Zapier's automation platform.
  3. Google Sheets (coming soon)
    • Will allow reading from and writing to Google Sheets for data management.
  4. Airtable (coming soon)
    • Will enable integration with Airtable databases to manage and sync data in real-time.

Workflow Optimization & Performance​

1. Minimize Action Chains​

Best Practice: Keep workflows focused and efficient

  • Avoid Overcomplicated Chains: Break complex flows into multiple smaller workflows
  • Limit Chain Length: Aim for 5-7 actions maximum per chain
  • Use Conditions Wisely: Don't nest conditions too deeply

2. Handle Loading States​

User Experience Considerations:

Button Click →
  Show Toast (Loading...) →
  HTTP Request (Long operation) →
  Hide loading indicator →
  Show result toast

3. Cache Strategy​

Data Efficiency:

  • Local Storage: Cache frequently accessed data
  • Conditional Requests: Only fetch data when necessary
  • Update Strategies: Implement smart data refresh patterns

4. Error Recovery​

Resilient Workflows:

Primary Action →
  If Success: Continue normal flow
  If Error: 
    Local Storage (Log error) →
    Show user-friendly message →
    Offer retry option

Workflow Canvas

Testing & Debugging Workflows​

1. Systematic Testing​

Test Each Path in Preview Mode:

  • Happy Path: Test when everything works correctly
  • Error Scenarios: Test when things go wrong
  • Edge Cases: Test unusual but possible scenarios
  • Data Validation: Test with various input types

2. Debugging Techniques​

Troubleshooting Methods:

  • Add Test Toasts: Use temporary toast messages to track execution
  • Check Console: Monitor browser console for errors
  • Verify Data Flow: Ensure variables contain expected data
  • Test Conditions: Verify condition logic with known values

3. Common Issues & Solutions​

Frequent Problems:

  1. Action Not Executing

    • Check: Element is properly selected
    • Check: Action is saved correctly
    • Solution: Re-add action and save

  2. Data Not Passing Between Actions

    • Check: Variable names are correct
    • Check: Previous action completes successfully
    • Solution: Add validation steps

  3. Conditions Not Working

    • Check: Data types match (string vs number)
    • Check: Variable spelling and case
    • Solution: Use exact match operators

Best Practices​

Workflow Design​

  1. Plan Before Building

    • Map User Journey: Understand the complete user flow
    • Define Success Metrics: Know what constitutes successful completion
    • Identify Failure Points: Plan for error scenarios

  2. Keep It Simple

    • Single Responsibility: Each workflow should have one clear purpose
    • Avoid Deep Nesting: Use multiple simple workflows instead of one complex one
    • Clear Naming: Use descriptive names for variables and actions

  3. User Experience Focus

    • Provide Feedback: Always inform users about action status
    • Handle Errors Gracefully: Show helpful error messages
    • Maintain State: Use local storage to preserve user progress

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].