Building a Fleet Management System with ToolJetDB

LEVEL: Beginner
In this tutorial, we will build a Fleet Management System using ToolJet. Let’s learn how to design an intuitive user interface using the app-builder, how to structure your tables in ToolJetDB, and how to query your database with the low-code query builder. The completed application will allow you to perform five operations:

• Add/Delete vehicles to the Fleet Management System.
• Check-in individual Vehicles.
• See the Status of each vehicle in the Fleet.
• Edit Fleet Data.
• Analyse Fleet Data to get usage insights.

Feel free to adjust the structure and functionality of the application to match your exact needs.

Check out this tutorial to learn how to build a To-Do application using ToolJetDB.

Prerequisites:

• 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 a fleet management system on ToolJet. If you prefer to watch a video tutorial, visit this video. 

Step 1: Create Database Tables in ToolJet Database

A well-structured database is crucial for any application. For the Fleet Management System, we will need two primary tables:

• Fleets Table:
  • Vehicle Number (Primary Key)
  • Year
  • Company
  • Model
  • Status (Active/Inactive/Maintenance)
• Checkins Table:
  • Check-in ID (Primary Key)
  • Vehicle Number (Foreign Key referencing Fleets)
  • Driver Name
  • Check-in Date
  • Mileage
  • Fuel Consumption
  • Notes

Visit ToolJet Documentation to learn how to build Tables using ToolJet Database.

Step 2. Building the Fleet Tab

You get a blank canvas when you initially launch a new application. Add Text components for Headers.

Add Tabs Component and include the following tabs:

• Fleets Tab: Display a list of all vehicles with options to add or edit details.
• Check-Ins Tab: Show vehicle check-in records with options to add or update them.
• Analytics Tab: See insights into fuel consumption trends, mileage, and maintenance for the fleet of vehicles.

Now drag and drop a Table component.

Then add a Modal Component and label it “Add Fleet”.

Add relevant Components in the Modal Component like Inputs, Text, and a Dropdown for status with three options:

• active
• inactive
• maintenance

Now we’re done with the UI for the Fleets Tab.

Adding Queries for the Fleet Tab

To effectively manage your Fleet data, follow these steps to set up the necessary queries and connect them to your application:

Expand the Query Panel at the bottom of the screen. Click on the + Add button to create a new query. Set up the getFleets Query:

• Choose ToolJet Database as the data source.
• Rename this query to getFleets.
• Select the Fleet table.
• For the Operation, choose List rows.

Enable Run this query on application load? to ensure the query runs whenever the application loads. You can learn more about queries here.

Connect getFleets to the Table:

In the Table Properties, set the Data Property to {{queries.getFleets.data}}. This will connect the data fetched by getFleets to the table.

Set up the addFleet Query:

The addFleet query lets you add new vehicles to the Fleet Management System. Follow the steps below to set up the addFleet query:

1. Open the Query Panel by clicking the + Add button at the bottom.
2. Select ToolJet Database as the data source.
3. Rename the Query to addFleet.
4. Select the Fleet table as the Table.
5. For the operation type, select Create Row from the dropdown.
6. Add columns to map them to the table.

Connect addFleet to the Table:

Each column in the Fleet table needs to be linked to the corresponding input field in the Add Fleet Modal. 

Use the {{components.<component_name>.value}} syntax in the Key input field to link each column to its respective input component.

For example:

• Column Name: vehicle_num
• Input Component Name: textinput1
• Key: {{components.textinput1.value}}

Adding Event Handlers:

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

1. Show a popup when a fleet is successfully added.
2. Close the Modal after the fleet is added.
3. Refetch the data by running the getFleets query again.

Adding a Loader:

To indicate that data is being re-fetched, go to the Table Properties. Under Additional Actions, add the getFleets query to the Loading state. This will display a loader while data is being retrieved.

Now that we’re done with Fleets Tab. Let’s jump into the Check-Ins Tab

Step 3. Building the Check-Ins Tab

The primary purpose of the Check-Ins Tab is to let us update the details of the Vehicles in the Fleet. So we built a user interface around it.

Disable the following settings from Table Properties in the Table Component:

• Search
• Sort
• Filter
• Add New Row
• Download Button

For the Table, we only need the vehicle number, so go ahead and remove the other columns. Also to add interactivity, enable Highlight Selected Row in Row Selection and the Default Selected Row should be {{{“checkins_id”:1}}}. This will select the first row of the Table by default.

Now add the following Components in the Modal Component:

1. A few Text Components for labels.
2. A Dropdown Component for Vehicle No.
3. A Text Input Component for Driver Details.
4. A Date Picker.
5. Three Number Input Components for Mileage, Fuel, and Fuel Cost respectively.
6. A Textarea Component for Notes.
7. A Button Component for form submission with the label “Submit”.

Adding Queries for the Check-Ins Tab

Similar to queries for the Fleet Tab, we’ll add the following queries:

Query	Table	Operation	To-Dos	Table Component Properties
getCheckins	Checkins	Join Table	Selected Table – Checkins Joining Table – Fleet	Data Property– {{queries.getCheckins.data.result}}
addCheckins	Checkins	Create Row	• Add Columns and respective Keys from Modal UI Components • Add Event handlers for Success Message, Closing Modal, Run getCheckins	Loading State – {{queries.getCheckins.isLoading}}
updateCheckIn	Checkins	Update Rows	• Filter – id equals {{components.table2.selectedRow.checkins_id}} • Add Columns and Keys from Check-In Tab UI Components • Add Two Event Handlers for Success Message and Run getCheckins
deleteCheckIn	Checkins	Delete Row	• Filter – id equals {{components.table2.selectedRow.checkins_id}} • Add Columns and Keys from Check In Tab UI Components • Add Two Event Handlers for Success Message and Run getCheckins

Now we can connect the Table data to the Input components in the Check-In Tab. To do that, select each input component and change the Default value to the corresponding Column in the Table.
For example, the Vehicle No. is a Dropdown input component, we change its Default Value to {{components.table2.selectedRow.checkin_fleet_id}}. This shows the currently selected row from the Table into the Dropdown input, thus connecting the Table to the Input Component.

Go ahead and change the default values for each of the Input Components. For instance, the Default value for mileage is {{components.tabIe2.selectedRow.checkins_mileage}}.

Now whenever we select a row in the Table, we’ll get updated data in each field.

Adding Event Handlers:

We’ll add three Event Handlers for the three buttons we have. 

1. Add an On Click event handler for the Submit Button that runs the addCheckIn Query.
2. Add an On Click event handler for the Update Button that runs the updateCheckIn Query.
3. Add an On Click event handler for the Delete Button that runs the deleteCheckIn Query.

Step 4. Building the Analytics Tab

Add UI Components

In the Analytics Tab, we’ll add four Charts:

1. 3 Bar Charts for Mileage, Fuel Consumption and Fuel Cost
2. A Pie Chart for Status

To ensure the raw data is properly visualized, it’s important to transform it into the correct structure that the charts can use. We achieve this by creating a separate JavaScript query to handle the data transformation.

const checkInData = queries.getCheckins.data.result

const fleetData = queries.getFleets.data

function getMileageData(data) {

return data.map(item => {

return { x: item.fleets_vehicle_num, y: item.checkins_mileage };

});

}

function getFuelConsumptionData(data) {

return data.map(item => {

return { x: item.fleets_vehicle_num, y:item.checkins_fuel_quantity };

});

}

function getFuelCostData(data) {

return data.map(item {

return { x: item.fleets_vehicle_num y:item.checkins_fuel_price };

});

}

function getStatusData(data) {

const statusCount = {};

data. forEach(item => {

const status = item.status.toLowerCase();

if (statusCount[status]) {

  statusCount[status]++;

} else {

  statusCount[status] = 1;

}

});

return Object.entries(statusCount).map(([status,count]) => {

return { x: status, y: count };

});

}

const statusData = getStatusData(fleetData);

const mileageData = getMileageData(checkInData);

const fuelConsumptionData = getFuelConsumptionData(checkInData);

const fuelCostData = getFuelCostData(checkInData);

return {mileageData, fuelConsumptionData, fuelCostData, statusData}

Understanding JavaScript Data Transformations

In the Analytics Tab, we need to transform raw fleet data into a format the charts can understand. This is done using a JavaScript query that processes the data. Let’s break down the code for transformation step-by-step:

Fetch Data: We start by retrieving data from the getCheckins and getFleets queries:

const checklnData = queries.getCheckins.data.result

const fleetData = queries.getFleets.data

Create Transformation Functions: We use functions to map raw data into { x, y } pairs, which are the required format for chart inputs. For example:

Mileage Data:

function getMileageData(data) {

return data.map(item => {

return { x: item.fleets_vehicle_num, y: item.checkins_mileage };

});

}

This function extracts each vehicle’s number (x) and its mileage (y) to display on a chart.

Status Data Example: To visualize vehicle status (e.g., active or inactive), we count each status type:

function getStatusData(data) {

const statusCount = {};

data. forEach(item => {

const status = item.status.toLowerCase();

if (statusCount[status]) {

  statusCount[status]++;

} else {

  statusCount[status] = 1;

}

});

return Object.entries(statusCount).map(([status,count]) => {

return { x: status, y: count };

});

}

Return and Bind Data: After transforming the data, return it in an object:

return {mileageData, fuelConsumptionData, fuelCostData, statusData }

Connect to Charts:

Use the transformed data in your charts by referencing the JavaScript query. For example:

Input {{queries.chartData.data.mileageData}} into Chart Data Property of Mileage Chart to see updated mileage data.

This way, the charts will dynamically update based on the fleet data. Do the same for other metrics and the Analytics Dashboard is complete.

Conclusion

This concludes this tutorial on building a Fleet Management System. Kudos for following along so well. Have a Cookie . If you have any doubts or feedback, feel free to share your thoughts in our Slack Community.

The post Building a Fleet Management System with ToolJetDB appeared first on ToolJet.