Ask for Leaves

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

To establish this software, clone the very last application that we built, edit the cloned application and get rid of all the widgets except the header and sidebar. Take out all the queries, rename the application from Workforce and Requests to Request Leaves , and Disable the Ask for leaves button on the sidebar and empower many others.

Constructing the UI

• Rename the header text as
  

  🏖️Leave Scheduler

• Drag one more Textual content widget and set the textual content value to Your latest leave requests:
• Spot a ListView widget, a button, a modal, and two figures widgets as demonstrated in the picture below

• Edit the ListView widget, and established the Listing Details area worth to queries.listRequests.information[0].leaves
• In list perspective widget, area the text widgets and established the following values:
• Depart asked for for date: second(listItem.start out_date).format("DD-MM-YYYY")
• No. of Days: listItem.leave_days
• Position: listItem.leave_times
• You can model the textual content coloration of Position(authorized, turned down, asked for) textual content programmatically. Go to the Models tab and click on on the Forex button following to Textual content Color and set this value: listItem.position === "authorized" ? "environmentally friendly" : listItem.position === "rejected" ? "purple" : "blue"

• Click on on the button widget to edit its houses, go to the handlers and incorporate an celebration handler to clearly show the modal that we extra in the prior step.
• Soon after incorporating the occasion handler, click on the button to clearly show the modal. When the modal demonstrates up, you can drag on drop widgets on it to construct a variety
• For labels use text widgets, datepicker widget for having enter for the start out date, and a variety enter widget for the Number of times area.
• Edit date picker properties, set default day to minute().format("YYYY-MM-DD") and date format to YYYY-MM-DD
• For the Variety enter widget, you can set the maximum and least value in accordance to your preference.
• Include a button for publishing the leave request, it will have two celebration handlers – one for closing the modal and the other for jogging the query that will increase a request to the databases. For now, just incorporate one handler for closing the modal, we will add an additional after we produce the queries.

• On the very first Statistics widget, set the Most important Price Label as Leaves Approved and Major price to queries.approvedCount.knowledge.depend , and toggle on the Conceal secondary benefit as this is not required.
• On the next Figures widget, set the Principal Benefit Label as Allocated leaves , we will hardcode the Most important value to 24 , set Secondary Worth Label as Depart Equilibrium and Secondary Benefit as 24- queries.approvedCount.facts.rely

Develop the queries

listRequests

This question will return all these files that match with the e-mail of the currently logged-in user in ToolJet.

• Develop a new MongoDB question, pick Locate Several Operation and enter the collection name workers
• In the Filter area, enter email: "globals.currentUser.e mail" – here we are finding the e-mail of the logged-in consumer by way of the exposed variable.
• Go to the Superior tab, and help the Operate question on website page load? selection.
• Hit Help you save and Run button to help save and execute the question – You will see the up-to-date facts on the listview widget.

leaveRequest

This query will update a doc and incorporate a new object for depart request in the database.

• Produce a new MongoDB query, pick out Update A person Procedure and enter the assortment title workforce
• In the Filter industry enter {"e-mail": "globals.currentUser.e mail"}
• In the Update discipline enter {$thrust:{"leaves":"start_day": "moment(components.datepicker1.price).toISOString(genuine)", "go away_times":parts.numberinput1.worth, "position": "asked for"}}
• Hit Help you save button to help save the query. Do not hit Operate for the reason that it will generate an empty object in the database due to the fact there is no value in the variety however.
• Now, click on the button to demonstrate the modal, find the submit button, and the remaining party handler for jogging this query.

approvedCount

This query returns the full rely of the files that have standing field as accredited.

• Create a new MongoDB question, pick Rely Procedure and enter the selection identify workers
• In the Filter industry enter "leaves.position": "permitted"
• Go to the Sophisticated tab, and permit the Run question on web site load? alternative.
• Hit Conserve and Operate button to conserve and execute the query – You can expect to see the benefit on the figures widget gets up-to-date.

At last, You can now release the previous application by clicking the Launch button on the leading appropriate of the application editor.

Connecting the purposes on the sidebar of each and every application

Now that we have all 4 apps launched – All you have to have to do is to make the purposes General public by clicking on the share button on the navbar of Application-editor. Just after building the software community, develop a custom shareable URL for all 4 purposes.

For connecting all 4 programs, you may have to have to edit the buttons in the sidebar of every application and use the Go to App action for On Click celebration handler.

Note: For earning this alter you can expect to need to make a new model from the produced version first and then launch it again for this alter to be integrated.

Voila!! 🎉 You have productively crafted an HR Administration procedure that includes a suite of 4 different programs 🚀

If you have any queries linked to constructing programs with ToolJet or just want to dangle out in the group of lower-code applications builders just fall us a Hello in our Slack Local community. 🚀