This Quickstart Guide will show you how to create an employee directory application in minutes using ToolJet. This app will let you track and update employee information with a beautiful user interface. Here are the step-by-step instructions:
1. Create Your First Application
Once you have created an account with ToolJet, go to the dashboard and click on the Create new app button. Name your application as "Employee Directory". You are ready to design your application now.
Click and drag a Table component to the canvas.
2. Create Employee Database
Now, create a new table in ToolJet’s Database to store employee records. Name the table employees and add the following columns:
status. Also, add a few employee records in the table.
3. Integrate Data
To display employees in the application, we first need to fetch data from the database using a query:
- Click on the Add button in the Query Panel, select ToolJet Database
- Rename the query to
employeesas Table name, List rows as Operations
- Toggle Run this query on application load? to automatically run the query when the app starts
- Click on Run to fetch data
Click on the Preview button to see a preview of the fetched data.
4. List Employees
Now, we need to bind the data returned by the
getEmployees query above with the Table created in Step 1. Click on the Table component to open its properties panel on the right. Under the
Data property, paste the below code:
Now the Table component is filled with the data returned by the
5. Add New Employee
Next step is to create a way to add data for new employees.
- Click on Add in the query panel, select ToolJet Database
employeesas Table name, Create row as Operations
- Rename the query to
- Click Add Column to add required columns
- Enter code below for email and firstname column keys:
Frame all the remaining keys in the same format.
Let's continue working on this query. The data needs to reload once this query runs since we want the Table component to be populated with the updated data. Follow the below steps to run the
getEmployees query after the
addEmployee query is completed.
- Scroll down and click on New event handler
- Select Query Success as Event and Run Query as Action
We are now ready with a query that will allow us to add new employee data. Let's link this query to a button.
In the bottom-right corner of the Table component, there is a
+/Add new row button. Follow the below steps to run the
addEmployee query on click of the
+/Add new row button:
- Click on the Table component, go to Events in properties panel and add a New event handler
- Choose Add new rows as Event, Run Query as Action
addEmployeeas the Query
Now if you click on the
+/Add new row button, enter the employee data and click on Save. The
addEmployee query will run and the data will be written to the
employees table in the ToolJet Database.
6. Preview, Release And Share
The preview, release and share buttons are on the top-right of the App-Builder.
- Click on the Preview on the top-right of app builder to review how your application is coming along while development.
- Once the development is done and you are ready to use the application, click on Release button to deploy the app.
- Finally, share your application with your end users using Share button
Congratulations! You've successfully built an employee directory application and, in the process, covered the fundamentals of ToolJet.
To learn more about how ToolJet works, explore the subjects covered in ToolJet Concepts.