Requirement
Create an employee dashboard with buttons that will help the employees to check in and out, find the total number of logged-in hours and apply for leave.
Use Case
An Employee Management application has a dashboard for their employees. As soon as the employee logs in, their check-in time is noted. Similarly, when they log off, their check-out time is noted. Thus, their complete working hours is automatically calculated. In this dashboard, an employee can also apply for leave.
Steps to follow
Form
|
Form Link Name
|
Field Type
|
Field Name
|
Field Link Name
|
Add Employee
|
Add_Employee
|
Name
|
Name
|
Name
|
Email
|
Official Email
|
Official_Email
|
Phone
|
Phone
|
Phone_Number
|
Add Check In Out Details
|
Add_Check_In_Out_Details
|
Lookup (Add_Employee)
|
Employee
|
Employee
|
Date-Time
|
Check_In
|
Check_In
|
Date-Time
|
Check_Out
|
Check_Out
|
Single Line
|
Total Hours
|
Total_Hours
|
Apply Leave
Holidays
|
Apply_Leave
Holidays
|
Lookup (Add_Employee)
|
Employee
|
Employee
|
Single Line
|
Leave Type
|
Leave_Type
|
Date-Time
|
From
|
From
|
Date-Time
|
To
|
To
|
Single Line
|
Holiday Name
|
Holiday_Name
|
Date
|
Date
|
Date_field
|
Before we begin, let's add a few records to the
Add Employee
form and
Holidays
form.
Our employee dashboard will have buttons for applying leave, checking-in and checking-out, which will perform the corresponding actions. Let's look at them one by one, beginning with the
Apply Leave
action.
We shall populate the
Add Employee
field of the
Apply Leave
form as the current login user and disable it, so that the user cannot change it. Let's create a workflow to achieve this.
2.
Create a workflow
that will execute during the load of the
Apply Leave
form, fill the
Add Employee
field with the login user's email address, and disable it.
3. Click
Add New Action
and add the below code in the deluge editor that opens:
- //Find the ID of the Add_Employee record with the login user email ID
- input.Employee=Add_Employee[Official_Email==zoho.loginuserid].ID;
- //Disable the Add Employee field
- disable Employee;
Now, let us create functions for checking in and out.
5. Add the below code to the Deluge editor:
- void checkIn()
- {
- //Get the logged-in employee record ID
- employee = Add_Employee[Official_Email == zoho.loginuserid];
- //Check if the employee is already checked-in. The critiera Check_In is today is used to check if the Check_In date-time field has date as today (that day)
- alreadyCheckedIn = Add_Check_In_Out_Details[Employee == employee.ID && Check_In is today];
- //Insert a record only if there is no check-in
- if(alreadyCheckedIn.count() == 0)
- {
- insert into Add_Check_In_Out_Details
- [
- Added_User=zoho.loginuser
- Employee=employee.ID
- Check_In=zoho.currenttime
- ]
- }
- }
7. Add the below code to the Deluge editor:
- void checkOut()
- {
- //Get the logged-in employee record ID
- employee = Add_Employee[Official_Email == zoho.loginuserid].ID;
- //Get the Employee's already checked-in record from Add_Check_In_Out_Details
- current_day_entry = Add_Check_In_Out_Details[Employee == employee && Check_In is today];
- //Assign check-out value
- current_day_entry.Check_Out=zoho.currenttime;
- //Calculate Total_Hours from the timestamps
- time = (current_day_entry.Check_Out - current_day_entry.Check_In);
- seconds = time / 1000;
- minutes = seconds / 60;
- hours = minutes / 60;
- h = hours.floor();
- m = minutes - h * 60;
- mins = m.floor();
- if(mins < 10)
- {
- mins = "0" + mins;
- }
- //Set the total working hours
- current_day_entry.Total_Hours=h + ":" + mins + " Hrs";
- }
Now that all our functionalities are done, let's proceed with creating the dashboard.
8.
Create a page
named
Dashboard
. Drag a
ZML snippet
and an
HTML snippet
to it.
Please check the attachments for a file with the following snippets consolidated into one working script.
For the benefit of understanding, the ZML/HTML code is split into snippets. We explain the snippets, then arrange them appropriately for inserting them to the ZML/HTML Editor.
Let's begin with the
ZML Snippet
. This is going to hold the following buttons:
Apply Leave
,
Check In
,
and
Check Out
.
Snippet a
The employee's name is displayed using the <text> tags. The <button> tag is used to create the
Apply Leave
button, which will open the
Apply Leave
form with a click.
- <pr>
- <pc width='80%' bgColor="#ececec" hAlign="left" paddingLeft="10px">
- //Display the name of the logged-in employee
- <text bold='true' value='Welcome <%=getUser.Name%>.' size='5' color='#3d566e' type='Text' textAlign='left'>
- </text>
- </pc>
- <pc width='20%' hAlign='left' padding="10px" vAlign='middle'>
- <pr width='100%' height='fill'>
- <pc hAlign="center">
- //Create a button that will open the Apply Leave form on click
- <button bgColor="#3d566e" action='Form' componentLinkName='Apply_Leave' size='1' text="Apply Leave"/>
- </pc>
- </pr>
- </pc>
- </pr>
Snippet b
The
Check In
button should only be shown when the employee is yet to check in. We shall check if there is an entry in the
Add Check In/Out Details
for the current employee today. If available, we show the time of check in. If not, we show the
Check In
button. In a similar fashion, we show the
Check Out
button.
- <pr>
- <pc width='33%' hAlign='left' padding="10px" vAlign='middle'>
- <pr width='100%' height='fill'>
- <pc hAlign="center">
- <%
- //Find if the employee has already checked in
- alreadyCheckedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today].count(ID);
- if(alreadyCheckedIn == 0)
- {
- //If employee has not checked in, show the button
- %>
- <button bgColor="#14b474" action='Function' functionName='checkIn' successMsg='You have checked in.' size='3' text="Check In"/>
- <%
- }
- else
- {
- //If the employee has checked-in, lets show the time of check-in
- checkedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today];
- %>
- <text bold='true' value='Checked-in at <%=checkedIn.Check_In%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
- <%
- }
- %>
- </pc>
- </pr>
- </pc>
- <pc width='33%' hAlign='center' padding="10px" vAlign='middle'>
- <pr width='100%' height='fill'>
- <pc hAlign="center">
- <%
- //Find if the employee has already checked out
- alreadyOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today].count(ID);
- if(alreadyOut == 0)
- {
- //If employee has not checked out, show the button
- %>
- <button bgColor="#fd3a36" action='Function' functionName='checkOut' successMsg='You have checked out.' size='3' text="Check Out"/>
- <%
- }
- else
- {
- //Find if the employee has already checked out
- alreadyCheckedOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today];
- %>
- <text bold='true' value='Checked-out at <%=alreadyCheckedOut.Check_Out%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
- <%
- }
- %>
- </pc>
- </pr>
- </pc>
- <pc width='33%' hAlign='center' padding="10px" vAlign='middle'>
- <pr width='100%' height='fill'>
- <pc hAlign="center">
- <%
- //fetch total hours.
- total_hours = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today].Total_Hours;
- //handling the null value of total hours in the begining.
- if(total_hours == null)
- {
- total_hours = "";
- }
- %>
- //Display total hours value after checkout in the Dashboard.
- <text bold='true' value='Total Hours :<%=total_hours%>' size='3' color='#3d566e' type='Text' textAlign='left'> </text>\
- </pc>
- </pr>
- </pc>
- </pr>
Snippet c
Place the above snippets appropriately as shown below to arrive at the final ZML code:
- <%{
- //Get the logged in user record
- getUser = Add_Employee[Official_Email == zoho.loginuserid];
- %>
- <panel>
- //Insert Snippet a
- //Insert Snippet b
- </panel>
- <%}%>
Let's now work on the
Holidays
listing. We shall use the
HTML snippet
to create our version of listing to display the
upcoming holidays
on the dashboard.
- <%{
- %>
- <style>
- h3 {
- padding: 10px;
- }
- #zohoreportel
- {
- height : 400px !important;
- }
- .holidayTable
- {
- width: 96%;
- border-collapse: collapse;
- margin: 1% 2%;
- }
- .holidayTable td
- {
- padding: 10px;
- font-size: 14px;
- text-align: center;
- border-bottom: 1px solid #f1f1f1;
- }
- table.holidayTable > tbody > tr:first-child > td
- {
- font-weight: 600;
- font-size: 15px;
- background: #ececec;
- }
- </style>
- <div style="height : 450px;overflow:scroll;">
- <h3>Upcoming Holidays</h3>
- <%
- //Get the list of holidays until December
- holidays = Holidays[Date_field > zoho.currentDate];
- if(holidays.count() != 0)
- {
- %>
- <table class="holidayTable">
- <tr>
- <td>Holiday Name</td>
- <td>Date</td>
- </tr>
- <%
- for each rec in holidays
- {
- %>
- <tr>
- <td><%=rec.Holiday_Name%></td>
- <td><%=rec.Date_field%></td>
- </tr>
- <%
- }
- %>
- </table>
- <%
- }
- else
- {
- %>
- <div>No holidays Available!</div>
- <%
- }
- %>
- </div>
- <%
- }%>
See how it works