Updating Data

This page guides you on updating data in your Supabase table.

Prerequisites

Before you start, ensure you have completed the Supabase Setup and have a table with some rows already inserted.

Updating data in Supabase table

To update data from your app, you must have a page and then add an action to update a particular row in your Supabase table.

Updating allows you to make changes to row(s). For example, in our AssignmentTracker app, you could display the assignment details and allow users to update them on a new page. Just like the following visual:

Showing and updating row data consists of the following steps:

1. Build a page (skip if you already have it)

2. Showing existing data in UI elements

3. Adding an action to update a row

1. Build a page

This page allows you to update assignment details such as title, description, due date, and books (to carry for assignment) using various widgets available in our widget palette.

Here is how you do it:

1. Inside the Column widget, add two TextFields; one TextField for the title and another for the description.

2. Add a Container Widget with an action to open the DatePicker. Inside the Container, add a Text widget to show the selected Date.

3. Add the Checkbox widget to mark the assignment as completed.

4. Now add a CheckboxGroup widget and define some options.

5. Finally, add a Button.

Here's how it looks in the widget tree:

UI for entering assignment details

2. Showing existing data in UI elements

Before you allow users to update any data, you must display them on the screen. For example, in the AssignmentTracker app, you can prefill TextField widgets with the title and description, a Checkbox widget with completion status, a CheckboxGroup widget with already marked books, etc.

Passing Data: Make sure to define the parameter on this page of the Type Supabase Row and pass its value from the previous page (e.g., AssignmentDetails page). You can follow the instructions for passing the data from one page to another here.

To show existing data in widgets:

1. For the TextField widget, navigate to the Initial Value property and click Set from Variable text.

   1. Set the source to Page Parameters > Parameter Name that holds the Supabase row.

   2. Set the Supabase Row Fields to the field you would like to display in TextField.

2. For the Checkbox widget, use the Checkbox initial Value property.

3. For the CheckboxGroup, use the Initially Selected property.

4. Similarly, show the data for other UI elements as well.

3. Adding action to update a row

Check how to add an action to update a row.

---

Last Updated Date: January 3, 2024