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.
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.
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
sudo apt install postgresql postgresql-contrib
sudo apt-get install libpq-dev
git clone https://github.com/tooljet/tooljet.git
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
npm run --prefix server db:create
npm run --prefix server db:reset (use only when you want to reset DB)
npm run --prefix server db:migrate
cd ./plugins && npm start
cd ./server && npm run start:dev
cd ./frontend && npm start
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.
Test config requires the presence of .env.test file at the root of the project.
npm run --prefix server test
npm run --prefix server test:e2e
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.
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.
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:
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.
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.
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:
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.
Fill the table with the following data:
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.
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;
Add an event listener to the cancel button that triggers the closing of the add-modal.
Implement an event listener on the save button to add the employee details to the database.
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.
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.
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.