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 toYYYY-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 theHide 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 to24
, set Secondary Value Label asLeave 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 nameemployees
- 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 nameemployees
- 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 nameemployees
- 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. ๐
Top comments (0)