Build an HR Management System using MongoDB and ToolJet

In this tutorial, We will build an HR management system which is suite of 4 different applications using MongoDB as the database and ToolJet for building the user interface.

The HR management system will include total 4 applications:

1. Dashboard: To display the stats and metrics, only for HR.
2. Company Calendar: Adding company holidays as an HR and viewing holidays as an employee.
3. Employees and Leave Approval: Only for the HR person to add more employees and approve or reject pending leave requests.
4. Leave Request Dashboard: For employees, to submit leave requests and get stats of all the leaves.

You can check out the live application here. Some sections might not be visible/functional as they're only for a particular group of people that I have added to the database.

• ToolJet (https://github.com/ToolJet/ToolJet): A free and open-source low-code platform that allows you to build applications quickly. Sign up for free here.
• MongoDB: For this tutorial, I am using the free tier of MongoDB Atlas. It is used to deploy and run MongoDB in the cloud.

I have divided the whole tutorial into the following 6 sections:

1. Setting up MongoDB Atlas: Creating Database and Collections on MongoDB Atlas and adding data-source in ToolJet
2. Dashboard: Building the first application including the UI and the queries
3. Company Calendar: Building the application for viewing and adding company holidays and leaves.
4. Employees & Leaves: Building the application for approving leave requests from employees and managing employees
5. Leave request dashboard: Building the dashboard from where employees can raise leave requests.
6. Connecting and making apps live: In this section, we will connect all the applications and make them live.

Without further ado, let's start setting up the database.

---

Once you have created an account on MongoDB Atlas, you'll be asked to enter the username and password for your database (not the same as what you use to log into the MongoDB cloud). Once done, you'll be redirected to your project's database deployment where you can create/manage Clusters. You can create a new Cluster and choose a configuration according to your preference.

As you can see in the screenshot above, we have a Cluster0 deployed. Go to the browse collections and create a new database hrms with two collections employees and company_holidays.

For employees collections, create some sample documents with the following schema:

And for company_holidays collection, create some sample documents in the following schema:

Once, you have created the hrms database with the employees and company_holidays collections including some sample documents, you can go ahead and connect the datasource on ToolJet.

You can add the MongoDB datasource using the Manual connection:

Or just use a Connection String instead by switching the method from the dropdown.

We will use the connection string method for MongoDB Atlas. Go to the Database Deployments on the Atlas and click on the Connect button next to the cluster name ( Cluster0 in our case). A connection dialog will popup to choose the method by which you want to connect, click on the second option - Connect your application.

Once you click on the second option, you'll get the connection string - just click on the copy button next to it to copy the string.

The string that you'll copy will be like this mongodb+srv://tooljettest:<password>@cluster0.urul7.mongodb.net/?retryWrites=true&w=majority where tooljettest is the database username that I created, I will need to replace <password> with the password that I created for this database and then remove everything after .net/ and add your database name - in our case the name of the database is hrms.

So, the actual connection string will be: mongodb+srv://tooljettest:fakepassword@cluster0.urul7.mongodb.net/hrms

Copy-paste the connection string on the ToolJet and click on the test connection button to test the connection before saving the datasource once the connection is successful then save the datasource.

---

The Dashboard application will include an overview of leaves and employees. On the top, we will use statistics widgets to display the number of employees and the number of leaves, A graph that will display the number of leaves approved in the last couple of months, and a list of approved upcoming leaves. On the left, we will add a sidebar to switch to other connected applications of the HR system. Take a look at the screenshot below:

Let's start building the application, go to the ToolJet dashboard, and click on Create new application button on the top-right. When the App editor opens up you'll be asked to create the initial version of your application. Once done, you'll need to connect the MongoDB datasource as explained in the previous section.

Now, that we have connected the datasource, we can start building the UI of the application.

For building the Sidebar, we will use a container, and drag widgets like text, image, and buttons inside the container.

• Let's drag a container on the app editor and place it on the left side. Increase its height to reach the bottom and its width according to your preference. You can click on the handle of the container to edit its properties, and change the background color of the container to #E6EEF8
• Drag an image widget inside the container, and edit the image widget property to set the URL to the logo of your choice, or use this: https://www.freepnglogos.com/uploads/company-logo-png/file-mobile-apps-development-company-logo-25.png
• Now drag a text widget (below the logo) and set its value to Hey {{globals.currentUser.firstName}} - here we are using exposed variables to display the first name of the current user.
• Finally, Add 4 buttons placed vertically inside the container. Set the button text to Dashboard, Calendar, Employees & Requests, and Request Leaves respectively. You can style the button by changing its background color of your choice or use #EA4C89 , and border-radius to 10. Also, we will keep the Dashboard button disabled so that it is unclickable on this app.

For building this section of the application, we will use a container and inside that, we will use text, statistics, graph, divider, and list view widgets.

• Let's drag a container and adjust its height and width to the vacant space on the canvas. Set its background color according to your preference or use #F5F8FC
• Drag a text widget on the top left of the container and set its value to Summary and wrap it inside the HTML tags to make it a heading: <h1>Summary</h1>
• Drag a statistics widget, set the Primary value label to Total Employees and Primary value to {{queries.totalCount.data.count}} (Right now it will show the undefined as we haven't created the queries yet but it will display the query result once we create and run them), and finally, toggle on the Hide secondary value.
• Drag another statistics widget, and set the Primary value label to Approved leaves and Primary value to {{queries.convertLeaveDaysTotal.data?.value ? queries.convertLeaveDaysTotal.data.value : 0}} , set the Secondary value label to Paid leaves pending approval and Secondary value to {{queries.pendingApproval.data.count}} . You can also style the widget according to your choice.
• Now drag a divider and vertical divider to create sections as shown in the screenshot.
• On the left section, drag a Chart widget. Set Chart Title as Monthly Leaves , chart type as Bar and in the chart data enter:

[{ "x": "{{moment().subtract(3, 'months').format("MMMM")}}", "y": {{queries.monthChart.data.March ?? 0}} },{ "x": "{{moment().subtract(2, 'months').format("MMMM")}}", "y": {{queries.monthChart.data.April ?? 0}} },{ "x": "{{moment().subtract(1, 'months').format("MMMM")}}", "y": {{queries.monthChart.data.June ?? 0}} },{ "x": "{{moment().subtract(0, 'months').format("MMMM")}}", "y": {{queries.monthChart.data.July ?? 0}} }]

The data will show up on the chart once we create the queries(chart and monthChart) later in this tutorial.

• On the right section, Drag a Text widget and a ListView widget. Set the text of the Text widget to Upcoming Paid Leaves (use HTML heading tag for formatting). In the List View widget, set the List data field value to {{queries.upcomingPaidLeavesformatted.data}} . This section will display all the leaves that have been approved by HR and are upcoming.

Now the UI of our first app is finished. All we need to do now is to build queries and display data on the UI.

This query will be used to get the total count of employees in the database. This query gets the total number of documents in the employees collection. Let's build this query:

• Go to the Query Manager at the bottom of the app editor, click on + button to create a new query.
• Select MongoDB as the datasource, in the Operations dropdown choose Total Count , and in the Collection field enter the collection name which is employees in this case.
• You can click on the Preview button to check the result of the query without executing it. Note: This is only for checking the returned data from the query.
• Now finally, click on the Save & Run button next to the Preview button to save the query and execute it.
• Make sure to enable the Run query on page load? option from the Advanced tab of the query so that this query runs every time the app loads.

Once the query has been executed, you'll see that the value in the first statistics widget displaying the Total Employees will be updated.

This query will make use of the Find Many operation of MongoDB query to return all the documents in the employees collection, but to get the total approved leaves in the number we will be creating a convertLeaveDaysTotal query as an extension to this one. Let's create the query:

• Create a new query, and choose MongoDB as the data source
• Select the Find Many Operation and enter the Collection name as employees
• In the Filter field, enter { "leaves.leave_days": { $gt: 0 }} - this will filter the query results with only those documents that have leave_days with a value greater than 0
• In the Options, we will use MongoDB projections to define which fields to include and which fields to include from the documents. Set this as the field value { projection: { first_name: 0, last_name: 0, email: 0, phone: 0, _id: 0, "leaves.start_date" : 0}}
• Finally, click on Save and Run button. Make sure to enable the Run query on page load? option from the Advanced tab of the query so that this query runs every time the app loads.
• Now, we will create the convertLeaveDaysTotal query

• Create a new query from the query manager and select the Run JavaScript Code as the data source
• Enter the following code:

var leaves = queries.leaveDaystotal.data;var count = leaves.reduce((acc,cv)=> {    cv.leaves.forEach(obj => {		acc += obj.leave_days    })    return acc;},0)let result = {value : count}return result;

• Click on the Preview button, it should return a number as the output.
• Now hit Save & Run button - You'll be able to see the updated value of the second statistics widget now.
• Go to the leaveDaysTotal query, open the Advanced tab, and add an Event Handler to run the convertLeaveDaysTotal query for the On Success event. This will make the convertLeaveDaysTotal query run every time the leaveDaysTotal query runs successfully.

This query will return the count of leave requests and will display it on the secondary value of the second statistics widget.

• Create a new MongoDB query, select the Count operation, and choose the employees collection
• In the Filter field, enter {"leaves.status": "requested"} - this will only return the count of those documents that have status as requested
• Hit Save & Run button, and you'll see the secondary value of the statistics widget will be updated.
• Make sure to enable the Run query on page load? option from the Advanced tab of the query so that this query runs every time the app loads.

This query will use the Find Many operation of MongoDB data source and will return those documents in the employees collection that has leave_days greater than 0. Let's create the query:

• Create a new MongoDB query, select Find Many operation, enter the collection name as employees
• In the Filter field, set the value as { "leaves.leave_days": { $gt: 0 }}
• In the Options field, set the value as { projection: { first_name: 0, last_name: 0, email: 0, phone: 0, _id: 0,}}
• Hit Save & Run, now that we have all the documents, we need to display the data on the Chart widget but the returned data needs to be in a key-value pair, so to do this we will need to write JavaScript Code. let's create a new query called monthChart .
• Make sure to enable the Run query on page load? option from the Advanced tab of the query so that this query runs every time the app loads.

This JavaScript code will get the data from the chart query and will create an object that will have leaves count as the value stored in the month name as the key.

• Create a Run JavaScript Code query

currentMonth = moment().format("M");let leaves = queries.chart.data;let months = leaves.reduce((acc,cv)=> {    cv.leaves.forEach(obj => {        if (moment(obj.start_date).format("M") <= currentMonth &&             (moment(obj.start_date).format("M") >= (currentMonth-3))){            if (acc.hasOwnProperty(moment(obj.start_date).format("MMMM"))){                acc[moment(obj.start_date).format("MMMM")] = acc[moment(obj.start_date).format("MMMM")] + obj.leave_days            }else{                acc[moment(obj.start_date).format("MMMM")] = obj.leave_days            }        }    })    return acc;},{});return months;

• You can hit the Preview button to check the output and then Hit Save & Run button to save and fire up the query.
• Now go back to the chart query and go to the Advanced tab of the chart query to add an event handler. Add the handler to run the monthChart query on the On Success event of the chart query.

This query will use the Aggregate operation of the MongoDB datasource to return the documents that will have leaves approved.

• Create a new query, select the Aggregate operation, and enter the collection name as employees
• In the Pipeline, enter [{$match: {"leaves": { "$elemMatch" : { "status":"approved" }}}},{"$project": {"first_name":1, "last_name":1, "email":1, "leaves": {"$filter": {"input": "$leaves", "as": "leaves", "cond": { $and: [{"$gt":["$$leaves.start_date","{{moment().toISOString(true)}}"]},{ "$eq":["$$leaves.status","approved"]}] } }}}}]
• Hit Preview to check the returned data and then Save & Run the query. Make sure to enable the Run query on page load? option from the Advanced tab of the query so that this query runs every time the app loads.

Now we will have all the documents that will have the leaves status as approved but to display it in the list view we will need to write JavaScript code to convert the returned data into the array of objects. Let's build a query for that next.

This JavaScript code will get the data from returned by the query upcomingPaidLeaves and will convert them into array of objects and put the relevant data in key-value pair.

• Use the following code:

approvedLeavesArray = queries.upcomingPaidLeaves.data;var arrayObjects = approvedLeavesArray.reduce((acc,cv) => {    return acc.concat(cv.leaves.reduce((accLeave, leave)=> {        accLeave.push(            {                "first_name": cv["first_name"],                "email": cv["email"],                "date":	moment(leave["start_date"]).format("DD-MM-YYYY"),                "leave_days":	leave["leave_days"],            }        );        return accLeave;    },[]));},[]);return arrayObjects;

• Hit Save & Run but this time you'll not see any data on the list view widget. The reason being we didn't add the widgets on the ListView widget yet. To display the data on the List View widget we will need to drag widgets over it and then edit the widget properties to display the data.
• Let's drag the text widgets over the List View widget and set their value as {{listItem.first_name}} , {{listItem.email}} , {{listItem.date}} , and {{listItem.leave_days}} respectively. You can style the widgets accordingly.
• Now, go to the Advanced tab of the upcomingPaidLeaves query to add an event handler. Add the handler to run the upcomingPaidLeavesformatted query on the On Success event of the chart query and Save it.

Now, you can successfully release this version of the application by clicking the Release button on the top right of the app editor.

Now that we have successfully built the Dashboard(1st application) of the HR Management system, let's move forward with the second application which is Company Calendar.

---

To build this application, we will be using one of the amazing features of the ToolJet. We'll use the Clone App option to quickly create a clone of the Dashboard application that we created before. Cloning App will save us a lot of time rebuilding the sidebar and main section.

Go to the ToolJet Dashboard, click on the options button on the app that you want to clone and then click on the Clone App option.

Once the app is cloned, open the editor and remove all the widgets from the main section and remove all the queries that are there. Don't forget to rename the application from HR dashboard to Calendar from the top left of the app editor.

Let's build the UI of the second application which is the Company Calendar.

We just need to go to the properties of the Dashboard button and Enable it and Disable the Calendar button.

• Edit the value of the Text widget from Summary to 🗓️ Company & Employee leave Calendar (Yes you can use emojis inside the text widget)
• Now drag a container to the left, resize it just enough to place a text widget, and toggle switch widget inside it. Set the value to the text widget to Show Leaves and we will edit the properties of the Toggle switch when we create the queries.

• Drag a table widget onto the canvas and resize it according to your preference. Set the Date Format as MM-DD-YYYY HH:mm:ss A Z , Default date to {{moment().format("MM-DD-YYYY HH:mm:ss A Z")}} , and Events field value to {{Array.isArray(queries.mergeData.data) ? queries.mergeData.data : []}}

• Drag a Modal widget somewhere below the calendar widget, and we will use an event handler on the button widget to show the Modal and drags widget to it.

• You can also style the button (and all other widgets) from the Styles tab of the widget manager.

• Once you have triggered the modal from the button click, drag widgets on the modal to build a form like UI. (as shown in the screenshot below)
• Use text widgets as the label for fields like Event Name and Date, and use Text input and Date picker widgets for user input fields. In the Date picker widget, set the Default Date as {{moment().format("YYYY-MM-DD")}} and date Format as YYYY-MM-DD

• We will use the button widget in the form to run the query for storing an event in the database but since we haven't built the queries yet, we can add just one event handler on the button for closing the modal. We will be adding two event handlers on this button - one to store the event on the database and the other to close this modal.

Now the user interface of our second application is done, all we need to do now is to build the queries and connect them with the widgets/UI.

This query will be used to add new holidays to the database. It will use the data from the fields that are inside the modal.

• Create a new MongoDB query, select the Operation Insert One and in the Collection field enter company_holidays
• In the Document field, enter {title: "{{components.textinput1.value}}", start: "{{moment(components.datepicker1.value).toISOString(true)}}" } - The title key will get the data from the text input value in the modal and the start key will get the value from the date picker inside the modal but we are also using the moment.js library to convert the date format in ISO string.
• You can Save the query, and go back to the button inside the modal to add the remaining event handler for storing the event in the database.

We have two types of holidays in our database:

1. Holidays added by the HR in the database or the official holidays
2. Leaves requested by Employees that are approved by the HR

So, by default, we will only display the official holidays on the calendar widget and when the toggle switch is enabled we will display the Official Holiday + Approved Leaves. So, to do this we will build the following queries:

1. companyHolidays - This query will return the documents that are stored in the company_holidays collection that is the official leaves added by HR. There will be an extended JavaScript query convertDateFormat that will convert the dates into the valid format accepted by the calendar widget.
2. fetchApprovedLeaves - This query will return the approved leaves that are those documents that have approved leaves in employees collection. There will be an extended JavaScript query formattedApprovedLeaves that will covert the leaves into the array of objects and assign keys so that it can be a valid format accepted by the calendar widget.
3. mergeData - It's a simple JavaScript code that will be connected to the event handler of the toggle switch so that it combines the returned data of the above two queries.

• Create a new MongoDB query, select the Find Many Operation from the dropdown options and then enter the Collection name as company_holidays
• In the Options field, we will use projection { projection: { _id :0 } }
• Go to the Advanced tab, toggle on the Run query on page load , and hit Save & Run button
• Next, we will create the JavaScript code query - convertDateFormat

• Create a new query using JavaScript code as the data source, and paste the following code:

let holidaysData = queries.companyHolidays.data;let formattedData = holidaysData.reduce((acc, cv) => {    acc.push({...cv,start: moment(cv.start).format("MM-DD-YYYY HH:mm:ss A Z"), end:moment(cv.start).format("MM-DD-YYYY HH:mm:ss A Z")})    return acc;}, [])return formattedData;

• Hit Preview to check the output of the code, and then click Save & Run to save and execute the query.
• Go to the Advanced tab of the companyHolidays query and add the event handler to run the convertDateFormat query for On Success event.

• Create a new MongoDB query, select the Aggregate operation and enter the Collection name as employees
• In the Pipeline field, enter [{$match: {"leaves": { "$elemMatch" : { "status":"approved" }}}},{"$project": { "first_name": 1, "email": 1, "leaves": {"$filter": {"input": "$leaves", "as": "leaves", "cond": {"$eq":["$$leaves.status","approved"]}}}}}]
• Now, go to the Advanced tab and enable the Run query on page load? option
• Hit the Save & Run button
• Now we will write the JavaScript code to format the data returned by this query and then add an event handler on this query to run the JS code.

• Create a new Run JavaScript Code query, and paste the following code into the editor:

var approvedLeavesArray = queries.fetchApprovedLeaves.data;var arrayObjects = approvedLeavesArray.reduce((acc,cv) => {    return acc.concat(cv.leaves.reduce((accLeave, leave)=> {        accLeave.push(            {                "title": cv["first_name"],                "email": cv["email"],                "start":	moment(leave["start_date"]).format("MM-DD-YYYY HH:mm:ss A Z"),                "end":	moment(leave["start_date"]).add(leave["leave_days"], "days").format("MM-DD-YYYY HH:mm:ss A Z"),            }        );        return accLeave;    },[]));},[]);return arrayObjects;

• Hit Preview to check the output of the code, and then click Save & Run to save and execute the query.
• Go to the Advanced tab of the fetchApprovedLeaves query and add the event handler to run the formattedApprovedLeaves query for On Success event.

• Create a new Run JavaScript Code query, and paste the following code into the editor:

return components.toggleswitch2.value ? queries.convertDateFormat.data.concat(queries.formattedApprovedLeaves.data) : queries.convertDateFormat.data;

• Hit Preview to check the output of the code, and then click Save & Run to save and execute the query.

Now, click on the handle of the Toggle switch that we have added, edit its properties and add an Event Handler. Select the On Change Event, Run query Action, and choose the mergeData query.

Now, you'll be able to see all the events in the calendar and you'll be show/hide leaves from the toggle button.

You can now successfully release this version of the application by clicking the Release button on the top right of the app editor.

---

Clone the last app that we built and remove all the widgets from the main section and remove all the queries that are there. Don't forget to rename the application from Company Calendar to Employees and Requests from the top left of the app editor.

Assuming that you connected the MongoDB datasource, we can now start building the UI of the main section and then add the queries.

• In the last two apps, we disabled the respective button on the sidebar, similarly, in this app, we will disable the Employees and Requests button.

• Drag a Tabs widget into the Canvas, and edit its properties. Set the Tabs field value to:

{{[{ title: 'Employees', id: '0' },{ title: 'Leave Requests', id: '1' }]}}

• Set the Default tab to 0
• We will be placing the widgets inside the Employees and Leave Requests tabs.

• First, drag a modal widget somewhere below the tabs widget
• Place a button inside the Employees tab, edit the button's property and add an event handler to show a modal, and choose the modal that you added on the canvas (modal1)
• Click on the button to show the modal, now you can drag the widgets inside the modal to create a form-like UI. I have used text widgets for labels, text input widgets for the input fields, and then a button widget Add . The button widget will have two event handlers: one for closing the modal1 and the other that will trigger the query for adding the employee details into the database.

• Now, add a table widget inside the Employees tab. Set the Table data field value to {{queries.allEmployees.data}} - we haven't created the queries yet. The table will be populated once we create the queries.
• Go to the Add Columns, add 4 columns First Name, Last Name, Email, Phone, and set their keys as first_name, last_name, email, and phone respectively.

• Now, switch the tab to Leave requests. Place a second modal somewhere below the tabs widget, drag a listView widget inside the tab, and set the List data field value to {{queries.leaveRequestsList.data}} . Add an event handler on the ListView widget - select Event as Row Clicked, Action as Show Modal, and choose the modal i.e. modal2

• Now, click on the row to show the modal. Inside the modal, add two buttons: Approve or Reject. These two buttons will be used to accept or reject the leave request raised by the employees.

• We will add the widgets inside the listview once we have created the queries.

This query will be used to insert a document into a collection. With this query, we will add an employee to the database.

• Create a new MongoDB query, select the Insert One operation, enter the Collection name employees
• Enter the Document data as an object: first_name: "{{components.textinput1.value}}", last_name: "{{components.textinput2.value}}", email: "{{components.textinput4.value}}", phone: "{{components.textinput3.value}}" } - here we are using JS to get the values from the widgets that we have added inside the modal1.
• Hit the Save button, not the Save & Run because executing the query now will fail as there are currently no values in the form.
• Once the query is saved, you can click on the Add Employee button to show up the form modal and then edit the Add button inside it. Add another event handler to run the addEmployee query on the On Click event.

This query will return all the employees in the database.

• Create a new MongoDB query, select Find Many operation, and enter the Collection name as employees
• Go to the Advanced tab and enable the Run query on page load
• Click Save & Run button on the query manager and as soon as the query runs you'll see the table gets populated with the employees' data.

This query will return the list of those documents that have leaves status set as requested and will display it on the listview widget.

• Create a MongoDB query, select Find Many operation, enter the Collection name as employees
• In the Filter field, set {"leaves.status": "requested"}
• Click on Save & Run the button to save and fire up the query.

• Now, that we have our data, we can add widgets to the list view widget. I have used the text widgets. For Labels use text widgets with HTML heading/bold tag for formatting. For displaying the query data use:
  First Name: {{listItem.first_name}}
  Last Name: {{listItem.last_name}}
  Phone: {{listItem.phone}}
  Email: {{listItem.email}}
  Leave Requested from: {{listItem.leaves.reduce((acc,leave) => {
if (leave.status === "requested"){
acc = moment(leave.start_date).format("DD-MM-YYYY");
}
return acc;
},"")}}
  No. of Days: `{{litItem.leaves.reduce((acc,leave) => {
if (leave.status === "requested"){
acc = leave.leave_days
}
return acc;
},0)}}

You can now successfully release this version of the application by clicking the Release button on the top right of the app editor.

---

This is the last application and this application will act as a dashboard for all the employees for requesting the leaves and getting the stats on their past leaves.

To build this application, clone the last application that we built, edit the cloned app and remove all the widgets except the header and sidebar. Remove all the queries, rename the application from Employees and Requests to Request Leaves , and Disable the Request leaves button on the sidebar and enable others.

• Rename the header text as <h1>🏖️Leave Scheduler</h1>
• Drag another Text widget and set the text value to Your recent leave requests:
• Place a ListView widget, a button, a modal, and two statistics widgets as shown in the image below

• Edit the ListView widget, and set the List Data field value to {{queries.listRequests.data[0].leaves}}
• In list view widget, place the text widgets and set the following values:
  Leave requested for date: {{moment(listItem.start_date).format("DD-MM-YYYY")}}
  No. of Days: {{listItem.leave_days}}
  Status: {{listItem.leave_days}}
• You can style the text color of Status(approved, rejected, requested) text programmatically. Go to the Styles tab and click on the Fx button next to Text Color and set this value: {{listItem.status === "approved" ? "green" : listItem.status === "rejected" ? "red" : "blue"}}

• Click on the button widget to edit its properties, go to the handlers and add an event handler to show the modal that we added in the previous step.
• After adding the event handler, click on the button to show the modal. When the modal shows up, you can drag on drop widgets on it to build a form
• For labels use text widgets, datepicker widget for getting input for the start date, and a number input widget for the Number of days field.
• Edit date picker properties, set default date to {{moment().format("YYYY-MM-DD")}} and date format to YYYY-MM-DD
• For the Number input widget, you can set the maximum and minimum value according to your preference.
• Add a button for submitting the leave request, it will have two event handlers - one for closing the modal and the other for running the query that will add a request to the database. For now, just add one handler for closing the modal, we will add another once we create the queries.

• On the first Statistics widget, set the Primary Value Label as Leaves Approved and Primary value to {{queries.approvedCount.data.count}} , and toggle on the Hide secondary value as this is not required.
• On the second Statistics widget, set the Primary Value Label as Allocated leaves , we will hardcode the Primary value to 24 , set Secondary Value Label as Leave Balance and Secondary Value as {{24- queries.approvedCount.data.count}}

This query will return all those documents that match with the email of the currently logged-in user in ToolJet.

• Create a new MongoDB query, select Find Many Operation and enter the collection name employees
• In the Filter field, enter {email: "{{globals.currentUser.email}}"} - here we are getting the email of the logged-in user through the exposed variable.
• Go to the Advanced tab, and enable the Run query on page load? option.
• Hit Save and Run button to save and execute the query - You'll see the updated data on the listview widget.

This query will update a document and add a new object for leave request in the database.

• Create a new MongoDB query, select Update One Operation and enter the collection name employees
• In the Filter field enter {"email": "{{globals.currentUser.email}}"}
• In the Update field enter {$push:{"leaves":{"start_date": "{{moment(components.datepicker1.value).toISOString(true)}}", "leave_days":{{components.numberinput1.value}}, "status": "requested"}}}
• Hit Save button to save the query. Don't hit Run because it will create an empty object in the database since there is no value in the form yet.
• Now, click on the button to show the modal, select the submit button, and the remaining event handler for running this query.

This query returns the total count of the documents that have status field as approved.

• Create a new MongoDB query, select Count Operation and enter the collection name employees
• In the Filter field enter {"leaves.status": "approved"}
• Go to the Advanced tab, and enable the Run query on page load? option.
• Hit Save and Run button to save and execute the query - You'll see the value on the statistics widget gets updated.

Finally, You can now release the last application by clicking the Release button on the top right of the app editor.

---

Now that we have all 4 applications released - All you need to do is to make the applications Public by clicking on the share button on the navbar of App-editor. After making the application public, create a custom shareable URL for all 4 applications.

For connecting all 4 applications, you'll need to edit the buttons in the sidebar of each application and use the Go to App action for On Click event handler.

Note: For making this change you'll need to create a new version from the released version first and then release it again for this change to be included.

---

Voila!! 🎉 You have successfully built an HR Management system that includes a suite of 4 different applications 🚀

If you have any queries related to building applications with ToolJet or just want to hang out in the community of low-code applications builders just drop us a Hi in our Slack Community. 🚀