Skip to main content

💽 Data

The Data category encompasses actions that help you create, update, and manage data in your application. By attaching these actions to UI elements (e.g., buttons), you can perform tasks such as adding a new database row, deleting existing data, or authenticating users.

1. Add Row​

The Add Row action inserts a new record into a specified database table (e.g., Supabase). This is commonly used for forms that create new items, user entries, or records.

How to Use

  1. Select the element on your canvas (e.g., a “Submit” button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions...

  2. In the canvas, click plus (+) and select Data → Add row.

  3. Configure:

    • Backend/Platform: Choose your connected backend (e.g., Supabase).
    • Table Name: Select the table where you want to add a new row.
    • Method: Typically set to Insert for adding new records.
    • DB Column → Element: Map each database column to an input field or static value. For example, if your table has a name column, map it to the “Name” input in your form.

  4. Click Save. In Preview, filling out the form and clicking the button should add a new row to your database table.

Use Cases:

  • User Submissions: Collect feedback, sign-ups, or contact form data.
  • Inventory Management: Add new items to a product list.
  • Task Creation: Insert new tasks into a to-do list.

2. Delete Row​

The Delete Row action removes an existing record from your database. This is useful for creating a “delete” button to remove items, posts, or other entries.

How to Use

  1. Ensure you have a valid database connection (e.g., Supabase) configured in Project Backend Settings.

  2. Select the element on your canvas (e.g., a “Delete” button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions...

  3. In the workflow canvas, click plus (+) and choose Data → Delete row.

  4. Configure:

    • Backend/Platform: Select your backend (e.g., Supabase).
    • Table Name: Specify which table to delete from.
    • Identify the Row: Provide the unique identifier (e.g., id) that matches the record you want to delete. This can be mapped from a selected item or an input field.

  5. Click Save. In Preview, clicking the button should remove the specified row from the database.

Use Cases:

  • Remove Items: Deleting products from an inventory or removing tasks from a to-do list.

3. Update Row​

The Update Row action modifies an existing record in your connected database (e.g., Supabase). This is commonly used in “edit” forms where users can update details of an existing entry.

How to Use

  1. Select the element on your canvas (e.g., a “Save Changes” button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions...

  2. In the workflow canvas, click plus (+) and select Data → Update row.

  3. Configure:

    • Backend Platform: Choose your backend (e.g., Supabase).
    • Table Name: Select the table that contains the record you want to update.
    • Method: Set this to Update (the dropdown also includes Select, Insert, and Delete, but you’ll choose Update for modifying records).
    • DB Column → Element: Map each database column to the corresponding input or static value. For instance, if your table has a username column, map it to the user input field capturing the new username value.

  4. Click Save. In Preview, make changes in the relevant fields, click your button, and verify that the row in the database is updated accordingly.

Use Cases:

  • Profile Editing: Let users update their profile information (e.g., name, email, avatar).
  • Task Management: Edit the details of an existing task (e.g., status, description).
  • Product Catalog: Update item prices or descriptions in an e-commerce store.

4. HTTP Request​

The HTTP Request action sends an HTTP request (GET, POST, PUT, DELETE, etc.) to an API endpoint. It’s perfect for interacting with external APIs or custom backend services.

How to Use

  1. Select the element on your canvas (e.g., a button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions...

  2. In the workflow canvas, click plus (+) and choose Data → HTTP Request.

  3. Configure

    • Request Method: Choose GET, POST, PUT, PATCH, or DELETE based on your API needs.
    • URL: Enter the endpoint URL (e.g., https://example.com/api/users).
    • HTTP Headers (optional): Add headers like Content-Type or authorization tokens if required.
    • Request Body (optional): For POST or PUT requests, include the data you want to send in JSON format.
    • Variable Name / Response: Optionally store the response in a variable for later use in your workflow or UI.

  4. Click Save. In Preview, clicking the button sends the request. Check the console or your API logs to confirm the request.

Use Cases:

  • External APIs: Fetch data from third-party services (e.g., weather, stock prices).
  • Custom Backends: Interact with your own REST or GraphQL APIs.
  • Integration: Connect with services that aren’t directly supported by built-in integrations.

5. Registration​

Use Registration to sign up new users within your app. This typically involves collecting user data (email, password, etc.) and creating a new account in your authentication system.

How to Use

  1. Select the element on your canvas (e.g., a “Sign up” button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions...

  2. In the canvas, click plus (+) and select Data → Registration.

  3. Configure:

    • Auth Provider: Choose the authentication provider (e.g., appstruct or Supabase).
    • Email Field: Map the user’s email input field.
    • Password Field: Map the user’s password input field.
    • Other Fields (optional): Some providers allow you to add additional data (e.g., username, profile info).

  4. Click Save. In Preview, submitting the form triggers a registration request to create a new user.

Use Cases:

  • Onboarding: Create a sign-up flow for new users..
  • Multi-Step Registration: Combine with other actions (e.g., local storage or custom forms) for advanced sign-up flows.

6. Authentication​

The Authentication action handles user login, logout, or session validation. This ensures users can securely access their accounts.

How to Use

  1. Select the element on your canvas (e.g., a “Log in” button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions…

  2. In the canvas, click plus (+) and choose Data → Authentication.

  3. Configure:

    • Auth Provider: Select your authentication provider (e.g., appstruct or Supabase).
    • Type: Choose the authentication type (e.g., Sign In or Sign Out).
    • Email Field / Password Field: Map the fields for user credentials when signing in.

  4. Click Save. In Preview, entering valid credentials should log the user in, while logging out will end the user session.

Use Cases:

  • User Login: Allow returning users to access their accounts.
  • Logout Button: Provide a way to securely end a user’s session.
  • Session-Based Apps: Restrict certain screens or data to authenticated users only.

Best Practices​

  • Validate User Input: Use form validation or checks before sending data to avoid database errors or malformed requests.
  • Handle Errors: Add fallback logic (e.g., show an alert on failed HTTP requests or unsuccessful logins) to improve user experience.
  • Security First: Be cautious when handling sensitive data (e.g., passwords). Always use secure connections (HTTPS) and store tokens or credentials safely.

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