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.

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.

Best Practices​

  1. Test Frequently
    • Use the preview feature to test your workflow at each step, ensuring all actions trigger as expected.
  2. Leverage Integrations
    • Integrate external services (e.g., Stripe, Zapier) for more advanced use cases without writing custom code.
  3. Handle Errors
    • Include fallback or error-handling steps (e.g., showing an alert if a data request fails).

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].