Editable list (To Do app)
In this tutorial, you will learn how to make all CRUD operations on one page. This is a good pattern for usability because it lowers the friction between operations.
For this example, we will use our hosted tables feature, but you can use the same techniques with API connectors as well.
In this example, we will create a table called
tasks that will store each task listed (and editable) in our interface.We will add 2 extra columns (
description and done)
tasks model
Also, we need to add the CRUD operations that will be used by our frontend.
Task item with a checkbox and an input
Create an task variable for input editing
Set item on page start
Update task on input change
Main page with an collection of task items for each task in List all tasks query
Adding a buttom in the same page for create task
Refresh collection after reload
Last modified 1yr ago