Comment on page
Retrieving Data
This page guides on how to retrieve data from your Supabase Database. Here's what we'll cover:
You can display the table data by adding the Supabase Query. This will return the list of rows, which you can display using scrollable widgets such as ListView, GridView, Column, Row, and StaggeredView.
Let's take an example of an AssignmentTracker app and display all assignments added by a student. Each row in a table represents an assignment item.
Here's how it might look:
Assignment list
Querying a Supabase table and displaying its data in UI comprises of the following steps:
- 1.
The page shows the list of all assignments with their Title and Description. To build such a simple UI, you can use the ListView with ListTile widget inside your page.
Here's how it looks with the widget tree:
Building assignment list page
To query a Supabase table on a ListView:
- 1.Select the ListView widget. Make sure you choose the ListView widget, not the ListTile.
- 2.
- 3.Set the Query Type to Supabase Query.
- 4.Select your Table from the dropdown list
- 5.Set the Query Type to List of Rows.
- 6.Optional: If you want to display the limited result, say, for example, you have thousands of entries, but you want to display only 100, you can specify the limit.
- 7.Click Confirm.
Querying a Supabase table on a ListView
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:
- 1.
- 2.Scroll down and click on the + Add Filter button at the bottom.
- 3.Find the Field Name, click on the Unset and select a column on which you would like to apply the filter.
- 4.Find the Relation dropdown, click on the Unset and choose the relation amongst the list.
- 5.Find the Value property and set it to an appropriate value.
- 6.Click Confirm.
You could choose a Filter relation based on your requirements. For example, to show only completed assignments, set the Field Name to the column that holds completed status, e.g., is_done, set the Relation to Equal To, and set the Value to True. Here's another example. For showing only users older than 30, create a column called Age, set the Relation to Greater Than, and set the Value to 30.
Filtering 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:
- 1.
- 2.Scroll down and click on the + Add Order button at the bottom.
- 3.Set the Table Field Name to the column you would like to choose for ordering.
- 4.Find Order dropdown, click on the Unset and choose the order either Increasing or Decreasing.
- 5.Click Confirm.
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.
Ordering table data
While designing a relational database, you might add a foreign key that establishes a link between the data in two tables. It is a field in one table that uniquely identifies a row of data in another table.
For example, in our AssignmentTracker app, you could have two tables, "assignments" and "users". The foreign key in the "assignments" table (e.g., created_by) would be the users' ID, which is the primary key in the "users" table. This creates a relationship between the two tables so that you can easily find all the assignments added by a particular student by looking up their ID in the "users" table.
Table structure
Now you might run into a situation where you need to display the assignment details and the student details (who created it) on the same page. Just like this (see the visual below):
Showing assignment details and student details on the same page
To do so, on the assignment details page, you can add a Supabase query on the users' table with Query Type to set to Single Row and add a filter that matches the user's id (of users table) with the created_by id of the assignment.
Here's exactly how you do it:
Querying a single row
In your database, you might have a column that stores multiple values of the same data type. For example, a column named "books" stores the list of book names that students should carry while doing an assignment.
The "books" column with Data Type text and defined as Array looks like this:
Column books
Column books defined as an array
Let's see an example of showing the assignment details with a list of all books.
Showing list of books from array field
Retrieving the array field includes the following steps:
- 1.
Creating a page with a scrollable view
Generating dynamic children help you prepare a list of items present in the array field. The returned result is stored in a variable and can later be used to populate any scrollable view.
To generate dynamic children:
- 1.Select Column and click the Generate Dynamic Children tab (on the right side of your screen).
- 2.Enter the appropriate Variable Name.
- 3.Set the Source value to your table name.
- 4.Set the Supabase Row Fields to the field that is defined as an array.
- 5.Click Confirm.
Generating dynamic children
To show item name from dynamic children variable in a Text widget:
- 1.Select the widget (e.g., Text), navigate to the properties panel, move to a property for which you want to show data, and click Set from Variable.
- 2.Now select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.
- 3.If you see Confirm button, click on it.
Showing data in UI elements
Last modified 4mo ago