Build a Todo Application Using ToolJet and ToolJetDB
Tags: javascript, lowcode, beginners, tutorial
Published: 2024-05-08 14:59:59

This tutorial provides a step-by-step walkthrough for creating a Todo application with [ToolJet](https://github.com/ToolJet/ToolJet). This application allows tracking of daily tasks, distinguishing between pending and completed activities. Throughout this tutorial, we will leverage ToolJet's built-in database (ToolJet DB) to manage the application's data.

### Prerequisites:

- **ToolJet** (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account [here](https://app.tooljet.com/).
- **Basic understanding of databases and JavaScript :** Familiarity with database concepts and JavaScript will help you follow along more effectively.

Here’s what the final application will look like:

![Final Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0wj8kmldu4w1l89lzx1.png)

### We’ll build the Todo App in three steps:

1. **Setup:** From your new application’s workspace, find the 'ToolJet Database' panel on the left sidebar click on  ‘Create new table’ and then create a new app.
2. **Building the UI:** Using ToolJet's visual app-builder and pre-built components, we'll craft a UI for selecting languages and entering code.
3. **Adding Functionality:** This is where the major part of the application comes in. We will create queries to add, display, and update the status of our Todos.

## Setup

- Setting up the ToolJet Database is pretty simple. We will configure the database and create a new app after that.
- Once you login, find the ToolJet Database panel on the left sidebar and click on the Create new table button.
- Next, name the table that you’ve just created. For this tutorial, we are naming our database as todoList, and adding the following fields:
  - id (Primary Key, Auto-increment)
  - task (String)
  - status (Boolean)
- We will also add dummy data to our Database, which will be fetched first once we create a table for our application in the next steps.

![Dummy Data in the ToolJetDB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30jeng7l7dc29j22u0fq.png)

- Now that we have created our database table, click on the **Apps** icon in the left sidebar and select **Create new app**. Name your app _Todo Application_ and click **Create app** to confirm the app creation.

We can start building the UI now that our basic setup is ready.

## Building the UI

Creating an appealing UI with ToolJet is quick and simple with its visual app-builder and inbuilt components. We will start building the UI by creating the header first.

ToolJet makes UI creation quick and easy with its visual app-builder and pre-built components! We'll start by creating the header.

### 1. Designing the Header

- Drag and drop an **Icon** component from the components library.
- Click on the Icon component, navigate to its Properties Panel on the right and select the checklist symbol under its **Icon** property.
- Place a **Text** component beside it and enter **Todo Application** under its **Data** property.
- Next, change its font size to 24 and font-weight to bold.

![Adding the Header Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zho6sfdyuz3u2pdmvqio.png)

### 2. Adding the Table Component

To display the todos, we will use the **Table** Component.

- Drag and drop a Table component on the canvas. Let’s rename the Table component to _todoTable_.

![Table Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in9lendgxk1v7avhvtdw.png)

### 3. Adding Text Input and a Logo Component

Once the Table component is added to list our todos, we would need an option to add a new todo. We would add a **Text Input** and a **Logo** Component that will act as a button to add a new todo.

- Below the Table, drag and drop the **Text Input** component and name the component _addTodoInput_.
- Next to the Text Input component, drop an **Icon** component choose _IconCirclePlus_ as the icon and name it to addTodoButton.

![Text Input and Logo Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq64sobrby47b56j6lyc.png)

Now that our UI is ready, let’s dive into adding functionality to our app.

## Adding Functionality

ToolJet allows us to interact with the UI of an application that we easily create with the ToolJet DB. We will integrate the ToolJet Database we created earlier with our UI by creating queries.

### 1. Creating Query to Fetch the Data

Let's first fetch the dummy todo that we created earlier in the tutorial.

1. Expand the Query Panel at the bottom of the screen and click the **+Add** button to create a new query - rename it _fetchTodos_.
2. Choose _todoList_ as the **Table name** and **List rows** as the **Operation**.
3. In **Settings**, toggle the **Run this query on application?** to run this query every time the app reloads.
4. Click on the **Run** Button to run the query - you can now see the dummy data that we had added earlier under **Preview**.

![fetch query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efl539srpernidy861yk.png)

### 2. Binding the Fetched Data to _todoTable_

Once we successfully fetch the data, we would want to display it on our todoTable .

- Open the Properties Panel of the todoTable, and in the **Data** property, enter `{{queries.fetchTodos.data}}`.
- Now you should see the dummy data on our table.

![Data binded to _todoTable_](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz88lki16h6g2gdt3ri7.png)

### 3. Creating _addTodo_ Query

Now that we can fetch the data in our table, it’s time to create a new query that adds the data to our ToolJet DB.

- Expand the Query Panel at the bottom of the screen and click on the **+Add** button to create a new query - rename it to addTodos.
- Choose _todoList_ as the Table name, and Create row as the operation.
- Since we will be adding a new todo, with two columns named **Task** and **Status**, in the **Columns** property, **click + Add** column, and perform the following:
    - Choose **task** from the dropdown, and in the **value**, add the code:  `{{components.addTodoInput.value}}`.
    - For the second column, choose **status** from the dropdown and set its **value** to false.  
- Under **Events**, add a **New Event Handler**, select **Query Success** as the Event and **Run Query** as the Action. Under **Action Options**, choose _fetchTodos_ as the Query.  This will ensure that whenever a new todo is added, fetchTodos query is run again to fetch all the todos, including the newly added one.

![_addTodo_ Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8pn1ex24v8ysgkcqdwb.png)

### 4. Binding the _addTodos_ Query to Components

- Click on the _addTodoInput_ component, and in the Properties Panel, create a new event by clicking on the **New event handler** button.
- To add a new todo by just pressing enter after typing in the addTodoInput component, lets choose the **Event** as **On enter pressed** and the **Action** as **Run Query**. In the **Action Options**, choose the _addTodos_ query. This will add a new todo(which is the value in the addTodoInput component) to the table once we press enter.

![_addTodoInput_](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ol4hlttp1gxtxvlrr9wo.png)

- To clear the input area after pressing enter, create another **On enter pressed** event, with the action of **Control component**, choose the component as _addTodoInput_ and **Action** to **clear**.

![_addTodoInput_](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsdfa3vj5ql6nf087yvw.png)

- To also add the functionality of adding a new todo by clicking on the _addTodoButton_ component(Icon component), add an event to run the _addTodos_ query and another one to clear the _addTodoInput_ component. But choose **On click** as the **Action** instead of **On enter pressed**.

Following the above steps, we can add new todos to our table.

![Adding Todos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3yb1taoff8jp6ak1c5u.png)

### 5. Add Action Buttons to the Table

Now that we can add new todos to our table, we would want to add the functionality of changing their status to complete or deleting them. 

- Go to the Properties Panel of the _todoTable_.
- Under the Action Buttons property, click the **+ New action button** and create two new action buttons, **Completed** and **Delete**, respectively (The labels can be added in the **Button Text** property).

![Action Buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjoqf9ds2ij1b9dkivj8.png)

### 6. Updating the Status of the Todo

Whenever we complete our todos, we would want them to be marked as completed. To update the todo status, we will create a new query and name it _updateTodo_.

- In the Query Panel, click the +Add button to create a new query - rename it to _updateTodo_.
- Choose todoList as the Table name and Update rows as the operation.
- Since we will update the todo by id, in the **Filter** property, choose id as the column, equals as the operation and the value to be `{{components.todoTable.selectedRow.id}}`.
- In the **Columns** property, choose status from the dropdown and set its value to true.
- After updating the status of our todos, we would want to fetch all the items again, so for that, we will create a new event in this query. For the new event, select **Query Success** as the **Event** and **Run Query** as the **Action**, and choose _fetchTodos_ as the Query from the dropdown.

![_updateTodo_ Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/win1r6ooau0c3ktebz78.png)

### 7. Deleting the Todo

After we have completed our pending Todo, we would want to delete it. To do so, let’s create a new query that deletes a particular Todo.

- Create a new query from the Query Panel and name it as _deleteTodo_.
- Choose todoList as the **Table name** and **Delete rows** as the **Operation**.
- From the **Filter** option, choose id as the column, equals as the operation, and set its value to: `{{components.todoTable.selectedRow.id}}`
- Under Events, add a **New Event Handler**.
- Select **Query Success** as the **Event** and **Run Query** as the **Action**,  choose _fetchTodos_ as the Query from the dropdown.

![_deleTodo_ Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veusxb5w16imwwyhkgod.png)

### 8. Binding Update and Delete Queries to the Completed and Delete Action Buttons.

The final step for our application to be fully functional would be to make our Completed and Deleted buttons to work.

- Go to the Properties Panel of _todoTable_, and select the **Completed** button, from the **Action Buttons** property, create a new event handler for this button and choose **On click** as the **Event**, **Run Query** as the **Action** and from the **Action Options**, choose the query as _updateTodo_.

![Completed Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srrrmn8r0kqmczrbo1d0.png)

- Now, go to the Properties Panel of _todoTable_ again, and select the **Delete** button, from the **Action Buttons** property, create a new event handler for this button and choose On click as the **Event**, **Run Query** as the **Action** and from the **Action Options**, choose the query as _deleteTodo_.

![Delete Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l617o4bac4vqls27y7n0.png)

Now once you click on the **Completed** action button, the todo will be marked as completed and the status will be updated accordingly. Similarly, the **Delete** button will delete the todo.

## Congratulations!

Great job on successfully building a fully functional Todo Application! Ready to dive deeper? Explore more possibilities and expand your skills with our extensive [ToolJet docs](https://docs.tooljet.com/docs/).