Quickstart Guide

This tutorial 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
2. Create Employee Database
3. Integrate Data
4. List Employees
5. Add New Employee
6. Preview, Release And Share

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.

Optionally, you can style the Table by adjusting its styling properties and create a header by placing Text components over a Container component and styling them.

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: firstname, lastname, email, phone, department, position, joining, and 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 getEmployees.
• Choose employees as 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:

{{queries.getEmployees.data}}

Now the Table component is filled with the data returned by the getEmployees query.

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.
• Select employees as Table name, Create row as Operations.
• Rename the query to addEmployee.
• Click Add Column to add required columns.
• Enter code below for email and firstname column keys:

{{components.table1.newRows[0].email}}
{{components.table1.newRows[0].firstname}}
...

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.
• Select getEmployees as Query.

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.
• Select addEmployee as 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 on completing the tutorial! 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.