5-Minute Tutorial: To-Do List

Step 1: Create the Data Table

Every app needs a database to persist information. We’ll start by creating a table for our tasks.

1. Click the Data tab in the top navigation bar.
2. Click Create Table and name it task (use lowercase).
3. Add the following fields to the task table:
   • Add a field of type Text and name it title. This will store the task’s content.
   • Add another field of type Boolean and name it is_completed. This tracks the completion status.

Step 2: Build the UI

Next, we’ll design the interface to display our tasks and allow users to interact with them.

1. Switch back to the Page module.
2. Add a List Component:
   • Click the Add Component button in the left sidebar to open the component list.
   • Drag and drop a List component from the left component panel onto the canvas, and name it Task List.
   • Select the List, go to the right properties panel, and under Data tab, set its Data source to the task table we just created.
3. Configure List Items:
   • Select the List item component of the Task List.
   • Add a Text component. Under Design tab, bind its content to Task List.current_item.title.
   • Add a Switch component to the text. Bind its default value to Task List.current_item.is_completed.
4. Add Input Area:
   • Above the List, add a View component to wrap the input and button. Name it Input Area. Set its layout direction to Horizontal.
   • Inside the Input Area, add a Text Input component for typing new tasks. Name it Task Input.
   • Inside the Input Area, add a Button component and change its content to “Add”. Name it Add Button.

Step 3: Configure Logic (Actions)

Our UI is ready, but the buttons don’t do anything yet. We need to add Actions to manipulate the data.

1. Create Task

1. Select the Add Button you just created.
2. In the right properties panel, go to the Action tab.
3. Under the On Click trigger, add an Action: Database -> Insert Data.
   • Target table: task.
   • Field assignment: Map the title field to the value of Task Input.
4. Under the On success branch of the Insert Data action

• Add Reset Input Component Value action and select Task Input. This clears the text box after a task is added.
• Add Refresh action and select Task List. This will refresh the list to display the newly added task.

2. Update Task Status

1. Select the Switch component inside the list template item.
2. In the right properties panel, go to the Action tab.
3. Under the On Value Change trigger, add an Action: choose Database Operation -> Update Data.
   • Target table: task.
   • Filter: Set filter to id equals Task List.current_item.id (this ensures only the current row is updated).
   • Field assignment: Map the is_completed field to the value of Switch component. This updates the data based on the switch’s status.

Step 4: Preview Your App

Now you can click the Mirror icon in the top navigation bar. In the mirror window, try typing a task in the input box, click add, and toggle the switch to see your fully functional app in action!

Step 5: Publish Your App

Once tested successfully, you can deploy your application.

1. Click the Publish icon in the top navigation bar.
2. Wait for the build process to complete. Once done, you will receive a URL to share with others.

Step 6: Manage Live Data

1. Click the Data tab in the top navigation bar, then switch to the Database sub-tab.
2. Click the task table to view and manage live records generated by your application.