Employee management App with ToolJet

ByRekha Banga

February 1st . 9 min read

Build an Employee management App with ToolJet

For businesses wanting to boost efficiency and productivity, managing the supply chain is crucial. We can create a cost-effective tool for this by combining Postgres and ToolJet. This guide will walk you through using postgres and ToolJet to build a straightforward Empoyee management app that fits your needs.

Overview

ToolJet is a low-code platform that facilitates the rapid development of web applications through a visual interface. Users can design and cu stomize application UIs, integrate databases, define backend logic, and deploy applications directly from the platform.

The platform follows a component-based architecture, allowing users to assemble and configure pre-built components, simplifying development and promoting reusability. ToolJet typically offers features for collaboration, customization, and extensibility, with active community support.

1. Setting up - Set up the environment on ubuntu

Install Node.js : Ensure you have the correct version of npm, or it will cause an error about fsevents.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
npm i -g npm@7.20.0

Install Postgres

sudo apt install postgresql postgresql-contrib
sudo apt-get install libpq-dev

Clone the repository

git clone https://github.com/tooljet/tooljet.git

2. Set up environment variables

Create a .env file by copying .env.example. More information on the variables that can be set is given in the environment variables reference.

cp .env.example .env

Populate the keys in the env file Example: cat .env

TOOLJET_HOST=http://localhost:8082
LOCKBOX_MASTER_KEY=1d291a926ddfd221205a23adb4cc1db66cb9fcaf28d97c8c1950e3538e3b9281
SECRET_KEY_BASE=4229d5774cfe7f60e75d6b3bf3a1dbb054a696b6d21b6d5de7b73291899797a222265e12c0a8e8d844f83ebacdf9a67ec42584edf1c2b23e1e7813f8a3339041
Install and build dependencies

npm install
npm install --prefix server
npm install --prefix frontend
npm run build:plugins

3. Set up database

npm run --prefix server db:create
npm run --prefix server db:reset (use only when you want to reset DB)

Run migrations

npm run --prefix server db:migrate

Run plugins compilation in watch mode

cd ./plugins && npm start

Run the server

cd ./server && npm run start:dev

Run the client

cd ./frontend && npm start

4. Create login credentials

Visiting https://localhost:8082 should redirect you to the login page, click on the signup link and enter your email. The emails sent by the server in development environment are captured and are opened in your default browser.

Click the invitation link in the email preview to setup the account.

Running tests

Test config requires the presence of .env.test file at the root of the project.

To run the unit tests

npm run --prefix server test

To run e2e tests

npm run --prefix server test:e2e

To run a specific unit test

npm run --prefix server test <path-to-file>

The client will start on the port 8082, you can access the client by visiting: https://localhost:8082

If you already have account login here
Alternatively, to create a new account, click on the 'Sign Up' option
After signing up, you will receive an email that looks like this:

Click on inviatation link you will see email verified page
The email will contain a link that will redirect you to the ToolJet dashboard.

5. Create a ToolJet Application

Let's begin by guiding you through the process of creating a new ToolJet application. Whether you're utilizing the cloud-based ToolJet version or the self-hosted variant, the steps are user-friendly.

Dashboard: After setup you will see sign up /in page, Upon signing in, you'll land on the ToolJet dashboard. This section provides an overview of your current applications and access to various functionalities.
Create a New App: To initiate a new application, click the "Create New App" button, directing you to the 'Application Builder.'

Name the Application: Customize the application name at the top left corner of the application builder. Let's designate it as "Employees management".

6. How to connect with Database

To initiate a connection with the PostgreSQL global datasource, you have two options either use the "Add new global datasource" button in the query panel or access the Global Datasources page directly from the ToolJet dashboard.

When connecting ToolJet to your PostgreSQL database, you'll need to provide the following information:

Host
Port
SSL
Database Name
Username
Password
Connection Options
SSL Certificate

For better control over ToolJet's access levels, consider creating a new PostgreSQL database user. This step ensures a tailored approach to managing ToolJet's interactions with the database.

Navigate back to the ToolJet Dashboard.
On the left sidebar, go to "Global Datasources."
Click on "Add new Datasource."
Select any Database from mutiple databases, I have selected Postgres.
Add all required information as shown.
Once the authorization process is complete, return to the Application Builder to continue developing your application.

After entering all the necessary fields for the database connection, click on "test connection." This action will verify whether the provided information is accurate and if the database connection was successful.

7. Elements of the Application Builder

Component Manager/ Widget Manager: This refer to a tool or interface within Tooljet for managing components. In a low-code platform, a component manager would typically allow users to add, edit, or remove various components (such as buttons, forms, tables) from their application.
Query Panel: Query panel likely involves tools or features for interacting with data. This could include the ability to write queries to retrieve specific data from a database or manipulate data within the application.
Canvas: The term "canvas" refers to a visual design space where users can arrange and design the layout of their application. This might involve dragging and dropping components onto the canvas to create the user interface.
Left sidebar: The Left Sidebar provides convenient access to features such as creating and managing pages, inspecting components, and the debugger for efficient development and debugging of applications.

Now that we're familiar with the application builder, let's delve into connecting it with a database. The process of connecting to data sources in ToolJet includes the following steps:

8. Create Pages

Click on the "Pages" option on the left sidebar to make a new page for the "Employee Manager"
Choose a name for the page, like "Employee Manager"
Do the same steps to make another page for the "Attendance Manager"
Turn on "Disable Menu" in the Pages settings to hide the sidebar when viewing the page.
After making both pages, adjust the overall layout in the Global settings.
Additionally, you can change the Canvas background color to pure white.

Once you've chosen containers from the component manager on the right-hand side and added images to them, the visual representation will reflect the arrangement and content you've set.

Likewise, follow the same procedure for the other two icons, namely "Employee" and "Attendance." Add images to their respective containers in the component manager on the right-hand side. Additionally, include tooltips for all navigation elements as illustrated below.

Here, we can add an image URL and an event listener to redirect to a relative page.

Fill the table with the following data:

Select table component from right hand side component manager

Drag the table onto the canvas, and it will take on the following appearance with placeholder or dummy data.

Verify if the "Employees" table has data inserted. Currently, there is one row, as depicted below.

Preview the output of the SELECT query, and you can view it either in JSON format or as raw text.

Select "Add New Column" to include additional columns in the table. If you prefer to display specific columns, add only those; otherwise, include all columns.

Omit the placeholder data from properties and substitute it with {{queries.getEmployees.data}}. This will dynamically populate data within the table. Additionally, note the switch at the bottom of the query panel. I have activated "Run the query on application load" enabling automatic loading of data into the table when the application starts.
Now, include action buttons in the table for adding, updating, and deleting employees. This will provide options to add a new employee, edit existing employee information, and delete employee records.

Attach an event listener to the "Add" action button that triggers the opening of a modal. This will enable the modal to appear when the user clicks the "Add" button in the table.

9. Create Add Employee Modal

Query:

INSERT INTO "employees" (name, age, email, address, join_date, salary, designation, contact, emp_id)
VALUES
  (
    '{{components.emp_name.value}}',
    '{{components.emp_age.value}}',
    '{{components.emp_email.value}}',
    '{{components.emp_address.value}}',
    '{{components.emp_join_date.value}}',
    '{{components.emp_salary.value}}',
    '{{components.emp_designation.value}}',
    '{{components.emp_contact.value}}',
    '{{components.emp_id.value}}'
  )
RETURNING id;

Close Modal:

Add an event listener to the cancel button that triggers the closing of the add-modal.

Save Employee Details:

Implement an event listener on the save button to add the employee details to the database.

Set Default Join Date We have configured the default value for the join_date field in the same format (YYYY-MM-DD), and the default value remains '2022-01-10'. This ensures that even if no specific join_date is provided, it will default to this value.
Show Notification On Success We have enabled the 'Show Notification On Success' switch. You can add a customized message here, and it will be displayed upon successful execution of the query.

Close Add Modal After Query Success:

Upon a successful query execution, an event listener has been implemented to automatically close the add modal, providing a seamless user experience.

Refresh Data in Table:

Upon closing the modal, the table data is automatically refreshed to reflect the newly added employee. This is achieved by invoking the 'get employee' query, ensuring that the table is promptly updated with the latest information.

10. View Data in Table

You can now observe that the newly added employee is visible in the table. This indicates the successful addition of the new employee to the system.
Similarly, repeat all steps for the delete and update actions. Now, the final app will take on a comprehensive and polished appearance.

Conclusion

In conclusion, Tooljet has been incredibly useful for building our employee management system. Its easy-to-use interface and customizable features made it simple to add, edit, and delete employee information. With built-in security measures, we can trust that our data is safe.

Tooljet's flexibility means we can do more than just the basics – we can add advanced features to meet our specific needs. And with a helpful community, we know there's support available whenever we need it.

Overall, Tooljet has made our development process easier, helping us create a system that works well for our organization.