top of page
To-Do List with SQL

To-Do List with SQL

Manage tasks in a to-do list using the wix-data-sql Velo package

Intermediate.png

Intermediate

6K

Published:

March 9, 2021

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we use the SQL Velo package to keep track of tasks using a to-do list. Site visitors can add tasks to the list, mark tasks as complete, and remove completed tasks. We used the package to interact with our site’s database collection using the SQL language.

 

For more information about this Velo Package, please see the Readme in the package folder located in the Code Files section of your site.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

We installed the Velo package on our site as described here


Database Collection

 

We built a MyTasks collection with the following fields:


  • Title: Name of the task

  • isComplete: Indicates if the task was completed

 

For the sake of simplicity, the collection’s permissions currently allow anyone to modify the data, but when using this example in your site it is always preferable to grant only the minimum required permissions for accessing your collection.

 

 

Page Elements

 

In our page we added the following elements:

 

  • TextInput: for entering text describing a new task.

  • Button: for inserting a new task into the list.

  • Repeater: for displaying the current tasks. Each item contains a text element that holds the title of the task and a button for marking the task as complete.

  • Button: for removing all completed tasks from the list.

  • Image with a loader gif: displays while waiting for an operation to complete.

 


Backend Code

 

We handle all operations related to the collection in the data.jsw web module. We import and use the package function, which allows us to use the SQL language, thereby simplifying our interactions with the database collection. The web module includes the following functions:


  • getAllTasks: Gets all tasks of the current site visitor from the collection. The function uses the SELECT SQL statement.

  • insertTask: Inserts a new task into the collection. The function uses the INSERT SQL statement.

  • updateTask: Updates a task’s isComplete field in the collection. The function uses the UPDATE SQL statement.

  • removeTask: Removes a task from the collection. The function uses a DELETE SQL statement. This function returns a promise in order to allow calling it several times without waiting for each call to complete.

 


Page Code

 

We registered the following event handlers:

 

  • onItemReady: Runs for every task shown in the repeater. We need to show each task as complete or not complete, according to its status, and to register the matching radio button to the changeCompletedStatus() event handler.

  • createNewTask: Runs either when the Add button is clicked, or when the Enter key is pressed while the site visitor is in the TextInput element.

  • clearCompletedTasks: Runs when the Clear Completed Tasks button is clicked.

 

We call fetchData(), which populates the repeater with the tasks stored in the collection. While the operation is running, the loader GIF is shown.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

To Do List

To Do List

Keep track of your tasks with a To Do List

Intermediate.png

Intermediate

Table Sort

Table Sort

Sort a table by clicking its column headers

Intermediate.png

Intermediate

Google Sheets Integration

Google Sheets Integration

Manage phonebook data in a Google Sheet using the google-sheets-integration Velo package

Intermediate.png

Intermediate

Anchor 2
bottom of page