Supabase
The Supabase action allows you to insert, update, or delete a row from a Supabase table.
Prerequisites
Before you start, ensure you have completed the Supabase Setup and have a table created that you will use to add, update, and delete the data.
Types of Supabase action
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.
1. Insert Row action
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
Select the Widget (e.g., Button) on which you want to define the action.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Click on + Add Action.
On the right side, search and select the Supabase > Insert Row action.
Set the Table to your table name (e.g., assignments).
Under the Set Fields section, click on the + Add Field button.
Click on the Field name.
Scroll down to find the Value Source dropdown and change it to From Variable.
Click on UNSET and select Widget State > Name of the TextField.
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.
2. Update Row action
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
Select the Widget (e.g., Button) on which you want to define the action.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Click on + Add Action.
On the right side, search and select the Supabase > Update Row action.
Set the Table to your table name (e.g., assignments).
Optional: If you want to get the rows after the update is finished, enable the Return Matching Rows option.
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.
Set the Field Name to the field that contains the IDs. Typically, this is the id column.
Set the Relation to Equal To because you want to find a row with the exact id.
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.
Under the Set Fields section, click on the + Add Field button.
Click on the field name.
Scroll down to find the Value Source dropdown and change it to From Variable.
Click on UNSET and select Widget State > Name of the TextField.
Similarly, add the field for the other UI elements.
Pro tip: 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.
3. Delete Row action
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
Select the Widget (e.g., Button) on which you want to define the action.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Click on + Add Action.
On the right side, search and select the Supabase -> Delete Row action.
Set the Table to your table name (e.g., assignments).
Optional: Later, if you want to know which rows were deleted from a table, enable the Return Matching Rows option.
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.
Set the Field Name to the field that contains the IDs. Typically, this is the id column.
Set the Relation to Equal To because you want to find a row with the exact id.
Into the Value Source, you can select the From Variable and provide the id of the row you want to delete.
Pro tip: You can chain the Refresh Database Request action after this action to remove the deleted items from the list.
4. Query rows
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 Supbase table, follow the steps below to define this action to any widget:
Select the Widget (e.g., Button) on which you want to define the action.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Click on + Add Action.
On the right side, search and select the Supabase > Query Rows action.
Select the Table you want to query.
Provide the Action Output Variable Name. This will be used to store the query result.
Now, you can use the Action Output Variable Name provided in the previous step to generate children from a variable on ListView.
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.
Last Updated Date: March 18, 2024
Last updated