In this tutorial, we will walk through the process of creating an inventory management application using ToolJet, a low-code platform designed for building applications quickly and efficiently. We will cover the essential features of ToolJetDB, including database management and primary and foreign key relationships. The completed application will let you add products and inventory, and provide an overview of the stock of these items.

If you want more tutorials like this check out how to build An Audio Transcriber and Analyzer using ToolJet and OpenAI.

ToolJet account (https://tooljet.com): ToolJet is an open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

This tutorial will walk you through how to build an inventory management application on ToolJet. If you prefer to watch a video tutorial, visit this video.

To begin, let’s take a look at the main tabs we will build for our Inventory Management Application:

Overview Tab: Provides an overview of products and inventory in a single table and gives analytics of stock present.

Inventory Tab: Provides an overview of the inventory present and we can add more products from here.

Product Tab: Provides an overview of products present in stock with price and category information. We can add inventory from here.

Before we make the Application, we will build the tables we require for this application.

• Log in to your ToolJet account. You will be redirected to your workspace at app.tooljet.com.
• Navigate to the ToolJet Database.
• We will create two tables for this application: product and inventory. In the ToolJet Database Interface, click on Create new table.

Creating the Product Table:

• Name the table product.
• Add the following columns:
  • product_id (Primary Key)
  • name (Text)
  • price (Number)
  • category (Text)

Creating the Inventory Table:

• Name the table inventory.
• Add the following columns:
  • inventory_id (Primary Key)
  • location (Text)
  • stock (boolean)
  • product_id (Foreign Key)

Go to Applications. Click on Create new application to create a new application. You get a blank canvas when you initially launch a new application.

• Add a Container component for the Header. Style it to fit your needs.
• Now let’s add Text Components for the main Header text and App Name. Style it to fit your needs.
• For analytics, add two Containers and style them to be transparent so they blend with the Header.
• Add a Text Component and place it inside this container. Click on the HTML Tab under Data in the Properties. Write the following HTML in it:
  In stock <br/> 3
• We will change the HTML later to change dynamically based on stock.
• Style the text as needed.
• Copy the Text Component and change its HTML to:
  Out of Stock <br/> 3
• Copy the Container and place it on the other side and change the text to “Products” and “Locations”.

Now that the Header is done, we will build the rest of the UI.

• Add a Tabs Component and stretch to fit the rest of the canvas. Remove any components present that we don’t need.
• Head to Properties, and update Tabs. Replace the existing Tabs with these:
  • Overview
  • Inventory
  • Products
• Add a Table Component in each Tab.
• Go to the Products Tab and drag and drop a Modal Component. Change its Title to “Add Products”. Change the Trigger button label to “Add Product” as well.
• Since we’ll only add three other components to the Modal, change the Modal size to small and the Modal height to 300px.
• Copy this Modal and paste it into the inventory tab too. We’ll need a similar component for adding inventory. Change the Title and Trigger button label to “Add Inventory”.

Expand the Query Panel at the bottom of the screen. Click on the + Add button to create a new query. You can learn more about queries here.

• Rename this query to getProducts.
• Choose ToolJet Database as the Data Source.
• Select the product table for Table Name.
• For the Operation, choose List Rows.
• Enable Run this query on application load in Settings to ensure the query runs whenever the application loads.

In the Table Properties of the Table in the Products Tab, set the Data field to {{queries.getProducts.data}}. This will connect the data fetched by getProducts to the table.

Click on the Add Product Modal and add the following components:

• Add a Text Input Component with the label “Name”.
• Add a Number Input Component with the label “Price”.
• Add a Dropdown Component with the label “Category”.
• Add a Button Component with the Button Text as  “Submit”.
• Add the following categories as Option values and Option labels in the Dropdown. Feel free to edit them based on your needs.

{{[
"Electronics",
"Clothing",
"Furniture",
"Toys",
"Jewelry",
"Sporting Goods",
"Appliances",
"Beauty Products"
]}}

• Rename this query to addProduct.
• Choose ToolJet Database as the Data Source.
• Select the product table for Table Name.
• For the Operation, choose Create row.
• Add all Columns, “product_id”, “name”, “price” and “category”.
• For “product_id”, use {{moment().valueOf()}} as the Key.
• Each column in the product table needs to be linked to the corresponding input field in the Add Product Modal. Use the {{components.<component_name>.value}} syntax in the Key input field to link each column to its respective input component next. For example:
  • Column Name: name
  • Input Component Name: textinput1
  • Key Value for “name” column: {{components.textinput1.value}}

ToolJet supports the moment.js library that can parse, validate, manipulate, and display dates and times in JavaScript accurately. We will use it to get the unique product_id.

Event Handlers let us manage triggers and responses in ToolJet. For this Modal, we’ll set up three event handlers:

• A Query Success Event with Action as Show Alert with the message “Product Added!”. Set Alert Type as Success.
• A Query Success Event with Action as Close Modal and select current modal to close.
• A Success Event with Action as Run Query and it runs getProducts Query.

Connect the Submit Button by adding an Event Handler in the button that runs the addProduct Query. 

• Rename this query to getInventory.
• Choose ToolJet Database as the Data Source.
• Select the inventory table for Table Name.
• For the Operation, choose List Rows.
• Enable Run this query on application load in Settings to ensure the query runs whenever the application loads.

Head to the inventory Tab and click on the Table. In the Table Properties of the Table, set the Data field to {{queries.getInventory.data}}. This will connect the data fetched by getInventory to the table.

Click on the Add Inventory Modal and add the following components:

• Add a Dropdown Component with the label “Product”
• Add a Dropdown Component with the label “Location”.
• Add a Radio Component with the label “In stock”.
• Add a Button Component with the Button Text as “Submit”.
• For the Product Dropdown Component, we will add product_id as Option values and product names as Option labels.
• Write {{queries.getproducts.data.map(i => name)}} in Option labels.
• Write {{queries.getproducts.data.map(i => product_id)}} in Option values.
• For the Location Dropdown Component, we will add the same Option values and Option labels. Example –  {{[Warehouse A,Warehouse B,Warehouse C,Warehouse D]}}

Let’s add a query to adding inventory.

• Rename this query to addInventory.
• Choose ToolJet Database as the Data Source.
• Select the product table for Table Name.
• For the Operation, choose Create row.
• Add all Columns,”inventory_id”, “product_id”, “location”, and “stock”.
• For “inventory_id”, use {{moment().valueOf()}} as the Key. We will use it to get the unique inventory_id.
• Some columns in the inventory table need to be linked to the corresponding input field in the Add Inventory Modal. 
• Like we did before, use the {{components.<component_name>.value}} syntax in the Key input field to link each column to its respective input component next.

 For this Modal, we’ll set up three event handlers:

• A Query Success Event with Action as Show Alert with the message “Inventory Added!”. Set Alert Type as Success.
• A Query Success Event with Action as Close Modal and select current modal to close.
• A Success Event with Action as Run Query and it runs getInventory Query.

Connect the Submit Button by adding an Event Handler in the button that runs the addInventory Query On Click. 

Go to the Overview Tab. We’ll get the products and inventory from both tables and show them in the Overview Table. Set up a query to get that data.

• Rename this query to getOverview.
• Choose ToolJet Database as the Data Source.
• Select the inventory table for Table Name.
• For the Operation, choose Join Tables.
• Now in Joining Tables, choose product.
• In Select, hide the “product_id” column from the inventory table as it is already present in the product table.
• Enable Run this query on application load in Settings to ensure the query runs whenever the application loads.

• Go to the Overview Tab and click on the Table In the Table Properties of the Table.
• Set the Data field to {{queries.getOverview.data.result}}. This will connect the data fetched by getInventory to the table. Now we need to connect the analytics.

• Expand the Query Builder and click on +.
• Choose Run JavaScript code,
• Rename this query to analytics.
• Enable Run this query on application load in Settings to ensure the query runs whenever the application loads.
• Add the following Code – 

await queries.getOverview.run();

let data = queries.getOverview.getData();

let inStockCount = 0;
let outOfStockCount = 0;

data.result.forEach(item => {
    if (item.inventory_stock) {
        inStockCount++;
    } else {
        outOfStockCount++;
    }
});

let uniqueLocations = new Set();
let uniqueProducts = new Set();

data.result.forEach(item => {
    uniqueLocations.add(item.inventory_location);
    uniqueProducts.add(item.product_product_id);
});

let locations = uniqueLocations.size ?? 0;
let products = uniqueProducts.size ?? 0;

return { inStockCount, outOfStockCount, locations, products, data };

Connect the query to the Text Components by adding {{queries.analytics.data.<field>}} to the Data field of the corresponding Text Component.

The final HTML code for Products –

Products </br> {{queries.analytics.data.products}}

The final HTML code for Location –

Location </br> {{queries.analytics.data.locations}}

The final HTML code for In stock –

In stock </br> {{queries.analytics.data.inStockCount}}

The final HTML code for Out of stock –

Out of stock </br> {{queries.analytics.data.outOfStockCount}}

The completed Inventory Management Application provides an intuitive interface for users to efficiently manage products and inventory.

Congratulations! You have successfully built an Inventory Management Application using ToolJetDB. Feel free to improve this application further by working on additional features tailored to your specific needs. If you have any doubts or feedback, feel free to share your thoughts in our Slack Community.