Leave Request Process with Timer Event

This tutorial walks you through the process of designing leave request process application with timer event. This application includes the process of an employee applying for leave, submitting the request to the manager, and the manager approving or rejecting the request. Additionally this application includes a timer event to facilitate the organization policy of auto approving the employee leave request if the manager does not respond within twenty four hours.

This tutorial illustrates how to design the leave request process app through the following steps:

---

Verify Prerequisites

ASG-Studio must have installed and a database is available with the necessary data. For this example:

• ASG-Studio is installed and is accessible through the URL - http://localhost:8080/index.html.

• PostgreSQL is installed on the local computer and a database is created for this tutorial as per the following details:
1. Database name: LeaveManagement
2. User name: postgres
3. Password: p@ssW0rd
4. The public.Employee table contains the following columns and data:

empid [pk] (bigint)	firstname (character varying)	lastname (character varying)	email (character varying)	managerid (bigint)
1	John	Smith	john.smith@myorg.com	1
2	Richard	Brown	richard.brown@myorg.com	1
3	Michael	Williams	michael.williams@myorg.com	1
4	Mary	Clark	mary.clark@myorg.com	1
5	Sarah	George	sarah.george@myorg.com	1

5. The public.LeaveRecords table contains the following columns:
   1. empid (bigint)
   2. fromdate (character varying)
   3. todate (character varying)
   4. leavetype (character varying)
   5. leaveid [PK] (bigserial)
   6. managerid (bigint)
   7. status (character varying)

---

Configure Server

---

The leave request process app requires an SMTP server configuration to send notifications to the users of the process app.

Perform the following steps:

1. Launch ASG Studio.
2. Click Server from the menu.



3. On the Server Configuration screen, enter the below details and click Save.

   • Select SMTP as Type of server.

   • Enter ASG Server as Name.

   • Enter smtp.asg.com as Host.
   • Enter 25 as Port.

   • Enter arunkumar.s@asg.com as From mail address.

---

Create Project

The leave request process app requires a project to contain the UI screens and process flow.

Perform the following steps:

1. Launch ASG-Studio.
2. On the Projects screen, click ADD. If you are creating your first project, click Create Now.
3. Enter LeaveManagement as Name and click Save.

---

Create Datasource

The leave request process app requires to validate employee details and store the leave records.

Perform the following steps:

1. Open the LeaveManagement project.
2. Navigate to Datasources and click Create.
3. Enter the following details:
   • Select Database as Type of datasource.
   • Enter Leave Management as Name.
   • Select PostgreSQL as Database Type.
   • Enter Localhost as Host.
   • Enter 5432 as Port.
   • Enter postgres as Username.
   • Enter LeaveManagement as Database.
   • Enter p@ssW0rd as Password.
   • Set Is Active to Yes.
   • Set Choose connection pool size to 5.
4. Click Test to ensure that the database connection is working.
5. Click Save.
6. Click Add Custom Webservices and generate the following methods:



getEmployeeDetails

Required settings	Values to enter
Method Name	getEmployeeDetails
Query	Standard
Operation	Select
Table	public.Employee
Columns	empid, firstname, lastname, email, managerid
Filters	empid (EQ)

getManagerDetails

Required settings	Values to enter
Method Name	getManagerDetails
Query	Standard
Operation	Select
Table	public.Employee
Columns	empid, firstname, lastname, email
Filters	empid (EQ)

insertLeave

Required settings	Values to enter
Method Name	insertLeave
Query	Standard
Operation	Insert
Table	public.LeaveRecords
Columns	empid, managerid, leavetype, fromdate, todate

updateLeaveStatus

Required settings	Values to enter
Method Name	updateLeaveStatus
Query	Standard
Operation	Update
Table	public.LeaveRecords
Columns	status
Filters	leaveid (EQ)

---

Create UI Models and Process Model

The leave request process app requires two UI models and one process model. While designing the UI models, you have to provide the reference to process model and while defining the process model the reference to UI model is required. So it is a recommended practice to create all the required UI models and process models before you start designing them.

Perform the following steps:

1. Open the LeaveManagement project.
2. Navigate to UI Models and click New.
3. Enter LeaveRequest as the File Name and click OK.
4. Click New again to create one more UI Model.



5. Enter LeaveApproval as the File Name and click OK.
6. Navigate to Process Models and click New.
7. Enter LeaveRequestProcess as Name and click Save.

The UI models and process model are successfully created. After creating the required files, the folder structure looks as shown in the image.

---

Design Leave Request Form

The leave request process app requires leave request form for employees to submit the leave details for manager's approval.

Perform the following steps:

1. Open the Leave Management project.
2. Navigate to UI Models and click LeaveRequest.vm.
3. Add the UI controls and configure the settings of each control as below and save the file.



Header

Required settings	Values to enter
UI Control	Header (Every page that you add in UI model, by default includes a header control. Select the header control and navigate to Settings tab to modify the label)
Label	Leave Request Form

Employee ID

Required settings	Values to enter
UI Control	Text Input
Label	Enter Employee Id
Reference	empid

From Date

Required settings	Values to enter
UI Control	Text-Date
Label	Select From Date
Reference	fromdate

To Date

Required settings	Values to enter
UI Control	Text-Date
Label	Select To Date
Reference	todate

Leave Type

Required settings	Values to enter
UI Control	Selector-Selectbox
Label	Select Leave Type
Selected Option Reference	leavetype
Options List Reference	[{"key":"Casual","value":"Casual Leave"},{"key":"Sick","value":"Sick Leave"},{"key":"Vacation","value":"Vacation Leave"}]
Name	key
Value	value
Select Option Reference	leavetype

Submit button

Required settings	Values to enter
UI Control	Button Single
Label	Submit
Script Model	Select the button and click Actions under the Settings tab to launch script designer.
Script Model - Select Events	On Click
Script Model - Start Event	Enter Start as Name.
Script Model - Process Task	Select the Process Task and enter the following details: Enter Start Process as Name. Select LeaveRequestProcess.pm from the Select Process drop-down Enter the following key-value pairs as parameters: empid - empid fromdate - fromdate todate - todate leavetype - leavetype
Script Model - End Event	Enter End as Name.

4. Click Build to generate the application build.
5. A new folder with the name LeaveRequest is created under the angular-workspace, dist folder.
6. Click Preview to see how the LeaveRequest view looks like after deploying.
7. Click Pack.

A new file with the name LeaveRequest.rp is created under the folder angular-workspace, dist, prod, LeaveRequest.

---

Design Leave Approval Form

The leave request process app requires leave approval form for for manager's to view the employee request and approve or reject the request.

Perform the following steps:

1. Open the Leave Management project.
2. Navigate to UI Models and click New.
3. Enter LeaveApproval as the File Name and click OK.
4. Add the UI controls as shown in the below image.



5. Configure the settings of each control as follows:
Header

Required settings	Values to enter
UI Control	Header (Every page that you add in UI model, by default includes a header control. Select the header control and navigate to Settings tab to modify the label)
Label	Leave Approval Form

Employee ID

Required settings	Values to enter
UI Control	Text-Input
Label	Employee ID
Reference	empid

First Name

Required settings	Values to enter
UI Control	Text-Input
Label	First Name
Reference	employeedetails.firstname

Last Name

Required settings	Value to enter
UI Control	Text-Input
Label	Last Name
Reference	employeedetails.lastname

From Date

Required settings	Value to enter
UI Control	Text-Input
Label	From Date
Reference	fromdate
Read only	Yes

To Date

Required settings	Value to enter
UI Control	Text-Input
Label	To Date
Reference	todate
Read only	Yes

Leave Type

Required settings	Value to enter
UI Control	Text-Input
Label	Leave Type
Reference	leavetype

Approve / Reject

Required settings	Value to enter
UI Control	Selector-Radio Group
Selected Radio Reference	status
Radio Group List Reference	[{"name":"Approve", "value": "Approved"},{"name":"Reject", "value": "Rejected"}]
Name	name
Value	value

Submit button

Required settings	Value to enter
UI Control	Button Single
Label	Submit
Script Model	Select the button and click Actions under the Settings tab to launch script designer.
Script Model - Select Events	On Click
Script Model - Start Event	Enter Start as Name.
Script Model - Process Task	Enter Start Process as Name. Select LeaveRequestProcess.pm from the Select Process drop-down Enter the following key-value pair as parameters: status - status
Script Model - End Event	Enter End as Name

6. Click Preview to see how the LeaveApproval view looks like after publishing.
7. Click Pack.

A new file with the name LeaveApproval.rp is created under the folder angular-workspace, dist, prod, LeaveApproval.

---

Define Process Flow

The leave request process app requires a process model to enable the flow of leave request through different states.

Perform the following steps:

1. Open the Leave Request project.
2. Navigate to Process Models and click New.
3. Specify LeaveRequestProcess as Name and click Save.
4. Draw the process model as shown in the image.



5. Configure each element in the process model as follows:
Start Event

Required settings	Values to enter
Name	Submit Leave Request
List of References and Reference Type	empid (Number, Mandatory), leavetype (String, Mandatory), fromdate (String, Mandatory), todate (String, Mandatory)

Get Employee Details (Service Task)

Required settings	Values to enter
Name	Get Employee Details
Datasource	Leave Management
Method	getEmployeeDetails
Attributes Parameters - empid	empid
Response	employeedetails
Advanced - Custom Script - On After	employeedetails = employeedetails.data.results[0];

Insert Leave (Service Task)

Required settings	Values to enter
Name	Insert Leave
Datasource	Leave Management
Method	insertLeave
Attributes Body - managerid	employeedetails.managerid
Attributes Body - empid	empid
Attributes Body - leavetype	leavetype
Attributes Body - fromdate	fromdate
Attributes Body - todate	todate
Response	insertresp

Get Manager Details (Service Task)

Required settings	Values to enter
Name	Get Manager Details
Datasource	LeaveManagement
Method	getEmployeeDetails
Attributes Parameters - empid	employeedetails.managerid
Response	managerdetails
Advanced - Custom Script - On After	managerdetails = managerdetails.data.results[0]; $pm.addMemVariable("test", "a");

Notify Manager(User Task)

Required settings	Values to enter
Name	Notify Manager
Type of Notification	With Action
Form-From User	employeedetails.firstname
Form - Assignee - Expression	managerdetails.firstname
Form - Select One	Existing
Form - Choose File	LeaveApproval.vm
Form - List of References	empid, employeedetails, leavetype, fromdate, todate
Channel - From	employeedetails.email
Channel - Subject	"Leave Request"
Channel - To	managerdetails.email
Channel - Body	New Leave Request

Auto Approve (Timer Event)

Perform the following steps:

1. Drag the Intermediate Event element on the Notify Manager user task. The user task element boundaries get highlighted.
2. Drop the Intermediate Event on one of the boundaries.
3. Select the Intermediate Event, click Type and then click Timer Boundary Event. The tasks that you route from this Timer Boundary Event will be executed as per the timer event conditions.
4. In the Timer Boundary Event properties panel, enter the following details:

   Required settings	Values to enter
   Name	Auto Approve
   Due In	Day(s) - 1; Hour(s) - 0; Minute(s) - 0

Update Status (Service Task)

Required settings	Values to enter
Name	Update Status
Datasource	Leave Management
Method	updateLeaveStatus
Attributes Parameters - leaveid	insertresp.data.System_Generated_Properties.leaveid
Attributes Body - status	status
Response	updateStatusResponse

Auto Update Status (Service Task)

Required settings	Values to enter
Name	Auto Update Status
Datasource	Leave Management
Method	updateLeaveStatus
Attributes Parameters - leaveid	insertresp.data.System_Generated_Properties.leaveid
Attributes Body - status	status
Response	updateStatusResponse
Advanced - Custom Script - On Before	$pm.addMemVariable("status", "Auto Approved")

Notify Employee (User Task)

Required settings	Values to enter
Name	Notify Employee
Type of Notification	Message Only
Form - From Uer	managerdetails.firstname
Form - Assignee - Expression	employeedetails.firstname
Channel - From	managerdetails.email
Channel - Subject	"Leave Request Status"
Channel - To	employeedetails.email
Body Note: It is recommended to enter the text of body manually to avoid possible errors that may occur due to copy and paste.	Dear employee, Your leave application from fromdate to todate is status. Regards, manager
Replace Word - With	employee - employeedetails.firstname manager - managerdetails.firstname fromdate - fromdate todate - todate status - status

End Event

Required settings	Values to enter
Name	End of Leave Request Process

Create App Roles

The leave request process app involves to user roles - one is employee and the other is manager.

Perform the following steps:

1. Open the LeaveManagement project.
2. Navigate to App Roles and click Create.
3. Enter Employee as Name and click Save.



4. Click Create to add another app role.
5. Enter Manager as Name and click Save.

The app role is created.

---

Create App Package

Perform the following steps:

1. Open the LeaveManagement project.
2. Navigate to the angular-wrokspace, dist, prod, LeaveRequest folder.
3. Perform the following steps:
1. Click the LeaveRequest.rp file.
2. Click +ASSIGN ROLE.
3. Select Employee and click Save.
4. Navigate to the angular-wrokspace, dist, prod, LeaveApproval folder.
5. Perform the following steps:
1. Click the LeaveApproval.rp file.
2. Click +ASSIGN ROLE.
3. Select Manager and click Save.
6. Navigate to App Packages and click New.
7. Enter LeaveManagement as Name.
8. Enter 1.0 as Version.
9. Select App Views, App Roles, Process Model and Datasources that you created above.



10. Click Save.

The app package is created with the name LeaveManagement_1.0.zip under the App Packages folder.

11. Navigate to the app package and click Download.

The LeaveManagement_1.0.zip file downloads to your local computer. You can now deploy this application in ASG-Zenith Portal (On-Premises) or ASG-Zenith Portal (SaaS).