How to build an employee directory with ToolJet

Create an application#

Create a ToolJet account, then choose Create new app. Add a Table component to the canvas.

Create a database table#

Open ToolJet Database. Create an employees table with fields such as firstname, lastname, email, department and status.

Fetch the records#

Add a query. Select ToolJet Database, choose the employees table and use the List rows operation. Rename the query getEmployees.

Bind data to the table#

Code first:

{{queries.getEmployees.data}}

Output:

The Table component displays the records returned by getEmployees.

Add a row#

Create an addEmployees query with the Create row operation. Bind form values to the query.

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

# Use the values from the form components in your query configuration.
email = components.table1.newRows[0].email
firstname = components.table1.newRows[0].firstname

Trigger the queries#

Add event handlers so Add new rows runs addEmployees. On query success, run getEmployees again.

Preview and release#

Use Preview while building. Use Release when the app is ready, then Share it with end users.

What you built#

You created a ToolJet app that reads records, binds query data to a component and writes a new record through an event.

Next steps#