Build HR Management System using MongoDB and ToolJet (Part 4: Leave Requests)
Tags: webdev, javascript, beginners, programming
Published: 2022-07-11 11:34:17

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

![requests](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-7.40.26-AM.png)

### Building the UI

- Rename the header text as &lt;h1>🏖️Leave Scheduler&lt;/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

![requests](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-7.45.36-AM.png)

- 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"}}`

![requests](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-7.53.12-AM.png)

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

![requests](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-8.00.10-AM.png)

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

![requests](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-8.09.06-AM.png)

---

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

![requests](https://blog.tooljet.com/content/images/2022/07/Screenshot-2022-07-08-at-8.14.36-AM.png)

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

![requests](https://blog.tooljet.com/content/images/2022/07/Screenshot-2022-07-08-at-8.14.58-AM.png)

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

![requests](https://blog.tooljet.com/content/images/2022/07/Screenshot-2022-07-08-at-8.15.08-AM.png)

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

![requests](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-8.13.05-AM.png)

---

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

![release](https://blog.tooljet.com/content/images/size/w1600/2022/07/Screenshot-2022-07-08-at-8.37.14-AM.png)

**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](https://join.slack.com/t/tooljet/shared_invite/zt-r2neyfcw-KD1COL6t2kgVTlTtAV5rtg). 🚀