Supabase Database Actions

The Supabase Database Actions allow you to Insert, Update, or Delete a Row from a Supabase table.

Note that beyond actions, you can also setup Backend Queries for Supabase. This includes realtime streaming queries.

Prerequisites

Before getting started with this section, ensure you have,

1. Completed all steps in the Supabase setup
2. Ensure you have a table created for adding, updating, and deleting data.

Types of Supabase Database Actions

Following are the types of actions you can perform on a Supabase table.

• Insert Row: Adds a new row in a table.
• Update Row: Updates a row with the specified values.
• Delete Row: Deletes a row from a table.
• Query Rows: Retrieves rows from a table based on specific criteria or conditions.

Insert Row [Action]

1. Select the Widget (e.g., Button) on which you want to define the action.

2. Select Actions from the Properties Panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.

   1. Click on + Add Action.

   2. On the right side, search and select the Supabase > Insert Row action.

   3. Set the Table to your table name (e.g., assignments).

   4. Under the Set Fields section, click on the + Add Field button.

   5. Click on the Field name.

      1. Scroll down to find the Value Source dropdown and change it to From Variable.
      2. Click on UNSET and select Widget State > Name of the TextField.

   6. Similarly, add the field for the other UI elements.

Pro Tip

While adding this action, you can leave the id (if marked as Primary) and created_at (if default value is now()) fields. Supabase will automatically add values for these fields.

Update Row [Action]

1. Select the Widget (e.g., Button) on which you want to define the action.

2. Select Actions from the Properties Panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.

   1. Click on + Add Action.

   2. On the right side, search and select the Supabase > Update Row action.

   3. Set the Table to your table name (e.g., assignments).

   4. Optional: If you want to get the rows after the update is finished, enable the Return Matching Rows option.

   5. Now, you must set the row you want to update. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.

      1. Set the Field Name to the field that contains the IDs. Typically, this is the id column.
      2. Set the Relation to Equal To because you want to find a row with the exact id.
      3. Into the Value Source, you can select the From Variable and provide the id of the row for which you just updated values in the UI.

   6. Under the Set Fields section, click on the + Add Field button.

   7. Click on the Field Name.

      1. Scroll down to find the Value Source dropdown and change it to From Variable.
      2. Click on UNSET and select Widget State > Name of the TextField.

   8. Similarly, add the field for the other UI elements.

How to & Tips

If you have a flow like this, HomePage -> AssignmentDetailsPage -> UpdateAssignmentPage, you can enable the Replace Route option (see point no. 5 here) when you navigate from AssignmentDetailsPage to UpdateAssignmentPage. And then chain the Navigate Back action after the update action. This will directly open the HomePage after the row is updated.

Delete Row [Action]

Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.

1. Select the Widget (e.g., Button) on which you want to define the action.

2. Select Actions from the Properties Panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.

   1. Click on + Add Action.

   2. On the right side, search and select the Supabase -> Delete Row action.

   3. Set the Table to your table name (e.g., assignments).

   4. Optional: If you want to know which rows were deleted from a table, enable the Return Matching Rows option.

   5. Now, you must set the row you want to delete. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.

      1. Set the Field Name to the field that contains the IDs. Typically, this is the id column.
      2. Set the Relation to Equal To because you want to find a row with the exact id.
      3. Into the Value Source, you can select the From Variable and provide the id of the row you want to delete.

tip

You can chain the Refresh Database Request action after this action to remove the deleted items from the list.

Query Rows [Action]

There are certain scenarios where you may want to query a Supabase table manually. For example, you might want to only fetch data in response to a specific user action, such as clicking on a button.

Additionally, if your app fetches different data under different conditions, you might find it more convenient to manually call queries. For example, you might fetch different tasks for admin and team members.

To manually query a Supabase table, follow the steps below to define this action to any widget:

1. Select the Widget (e.g., Button) on which you want to define the action.

2. Select Actions from the Properties Panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.

3. Click on + Add Action.

4. On the right side, search and select the Supabase > Query Rows action.

5. Select the Table you want to query.

6. You can also Filter and Order the query results.

7. Provide the Action Output Variable Name. This will be used to store the query result.

8. Now, you can use the Action Output Variable Name provided in the previous step to generate children from a variable on ListView.
9. Finally, you can display data in a Text widget. To do so, select the Text widget > Properties Panel > Text > Set from Variable menu > [children_from_variable_name] item > Get Row Field > select the row field you want to display.

Filtering table data

Sometimes you might want to filter a list based on a condition. For example, showing only completed assignments. You can do so by adding the Filter while you query a Supabase table.

Let's see how to filter the Supabase table to display only desired items:

• In your Action properties of Query Rows action, scroll down and click on the + Add Filter button at the bottom.

• Find the Field Name, click on the Unset, and select a column on which you would like to apply the filter.

• Find the Relation dropdown, click on the Unset, and choose the relation amongst the list.

• Find the Value property and set it to an appropriate value and click Confirm.

tip

You could choose a filter relation based on your requirements. For example:

• Equal To: To show only completed assignments, set the Field Name to the column that holds the completion status (e.g., is_done), set the Relation to Equal To, and set the Value to True.
• Greater Than: To show only users older than 30, set the Field Name to the age column, set the Relation to Greater Than, and set the Value to 30.
• Like: For filtering addresses with zip codes starting with '35,' set the Field Name to the zip_code column, set the Relation to LIKE, and set the Value to 35%. In the value field, you use the following wildcards to perform flexible pattern matching to filter your data effectively.
  • Percent (%) Wildcard: Represents zero, one, or multiple characters.
    • Example: 'A%' matches any string starting with 'A' (e.g., 'Apple', 'Apex').
    • Example: '%A%' matches any string containing 'A' (e.g., 'Canada', 'Australia').
  • Underscore (_) Wildcard: Represents a single character.
    • Example: 'A_' matches any two-character string starting with 'A' (e.g., 'An', 'At').
    • Example: 'A__' matches any three-character string starting with 'A' (e.g., 'Ant', 'Art').

info

You can combine multiple filters using AND or OR operators to create more advanced filtering logic. This enables you to refine your data query to match specific conditions.

Ordering table data

You might want to show a list from the Supabase table in a specific order. For example, showing assignments in order of the due date.

To specify the order:

• In your Action properties of Query Rows action, scroll down and click on the + Add Order button at the bottom.
• Set the Table Field Name to the column you would like to choose for ordering.
• Find Order dropdown, click on the Unset and choose the order either Increasing or Decreasing and click Confirm.

tip

You could choose the order based on your requirements. For example, to show assignments in order of due date, set Table Field Name to due_date and Order to Increasing.

info

Additional Note: Currently, you can only add "and" conditions to Supabase query filters. If you want to add an "or" filter like "status == 5 or status == 8", you can consider logic to apply "status in (5,8)" or any other logic. Fully customizable using API calls or custom actions.

Trigger Action On Data Change

Sometimes, you may want to trigger an action whenever data changes in a Supabase table. For instance, in an ecommerce app, you might want to notify users on the orders page when the status of their order is updated.

To respond to data changes in a Supabase table:

1. Ensure you have added a Supabase Query to a widget (e.g., a ListView) with Single Time Query disabled to enable real-time updates.
2. On the widget with the Supabase Query, open the Action Flow Editor and set On Data Change as the Action Trigger. This ensures that any actions you add will be triggered whenever the data is updated, added, or deleted.
3. You can now add any action you want to perform, such as showing a notification, refreshing the UI, or fetching related data.

info

If you are using this trigger on a ListView, make sure to disable the Infinite Scroll.