Build a Todo Application Using ToolJet and ToolJetDB

This tutorial provides a step-by-step walkthrough for creating a Todo application with 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.
• 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:

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.

• 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.

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.

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.

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.

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.

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.

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.

• 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.

• 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.

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).

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.

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.

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.

• 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.

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.