Build HR Management System using MongoDB and ToolJet (Part 4: Leave Requests)

Request Leaves

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.

Building the UI

• 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}}

---

Build the queries

listRequests

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.

leaveRequest

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.

approvedCount

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.

---

Connecting the applications on the sidebar of each application

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. 🚀