To Do List

Collection Data

We built a MyTasks collection with the following fields:

• Title: name of the task

• isComplete: indicates if the task has been 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 main index page we added the following elements:

• TextInput: for entering text for 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 completed.

• 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. The web module includes functions for getting all current tasks, inserting a new task, updating a task and removing a task. It is always recommended to use backend code when accessing a collection, due to security reasons.

Page Code

We registered the following event handlers:

1. onItemReady: runs for every task shown in the repeater. For each task we need to show it as completed or uncompleted, according to its status, and to register the matching radio button to the changeCompletedStatus event handler.

2. createNewTask: runs either when the Add button is clicked or when the Enter key is pressed while the focus is on the TextInput element.

3. clearCompletedTasks: runs when the Clear Completed 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.