Building an employee dashboard

Building an employee dashboard

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.
 
See how it works

Steps to follow  

1. Create the forms with the following details:
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:
  1. //Find the ID of the Add_Employee record with the login user email ID
  2. input.Employee=Add_Employee[Official_Email==zoho.loginuserid].ID;

  4. //Disable the Add Employee field
  5. disable Employee;
Now, let us create functions for checking in and out.
 
4.  Create a function to check an employee in.
 
5. Add the below code to the Deluge editor:
  1. void checkIn()
  2. {
  3. //Get the logged-in employee record ID
  4.  employee = Add_Employee[Official_Email == zoho.loginuserid];

  6.  //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)
  7. alreadyCheckedIn = Add_Check_In_Out_Details[Employee == employee.ID && Check_In is today];
  8. //Insert a record only if there is no check-in
  9.  if(alreadyCheckedIn.count() == 0)
  10.  {
  11.   insert into Add_Check_In_Out_Details
  12.   [
  13.    Added_User=zoho.loginuser
  14.    Employee=employee.ID
  15.    Check_In=zoho.currenttime
  16.   ]
  17.  }
  18. }

6. Similarly, create a function to check out an employee.
 
7. Add the below code to the Deluge editor:
  1. void checkOut()
  2. {
  3. //Get the logged-in employee record ID
  4.  employee = Add_Employee[Official_Email == zoho.loginuserid].ID;

  6. //Get the Employee's already checked-in record from Add_Check_In_Out_Details 
  7.  current_day_entry = Add_Check_In_Out_Details[Employee == employee && Check_In is today];

  9. //Assign check-out value
  10.  current_day_entry.Check_Out=zoho.currenttime;

  12. //Calculate Total_Hours from the timestamps
  13.  time = (current_day_entry.Check_Out - current_day_entry.Check_In);
  14.  seconds = time / 1000;
  15.  minutes = seconds / 60;
  16.  hours = minutes / 60;
  17.  h = hours.floor();
  18.  m = minutes - h * 60;
  19.  mins = m.floor();
  20.  if(mins < 10)
  21.  {
  22.   mins = "0" + mins;
  23.  }

  25. //Set the total working hours
  26.  current_day_entry.Total_Hours=h + ":" + mins + " Hrs";
  27. }

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.
  1. <pr>
  2. <pc width='80%' bgColor="#ececec" hAlign="left" paddingLeft="10px"> 

  4. //Display the name of the logged-in employee  
  5.   <text bold='true' value='Welcome <%=getUser.Name%>.' size='5' color='#3d566e' type='Text' textAlign='left'> 
  6.   </text>         
  7.   </pc>
  8.   <pc  width='20%' hAlign='left' padding="10px" vAlign='middle'>       
  9.   <pr width='100%' height='fill'>     
  10.     <pc hAlign="center">

  12. //Create a button that will open the Apply Leave form on click
  13.     <button bgColor="#3d566e" action='Form' componentLinkName='Apply_Leave' size='1' text="Apply Leave"/>
  14.     </pc>
  15.   </pr>    
  16.   </pc>   
  17.  </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.
  1. <pr>
  2. <pc  width='33%' hAlign='left' padding="10px" vAlign='middle'>       
  3.  <pr width='100%' height='fill'>     
  4.   <pc hAlign="center">
  5. <%
  6. //Find if the employee has already checked in
  7. alreadyCheckedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today].count(ID);
  8. if(alreadyCheckedIn == 0)
  9. {
  10. //If employee has not checked in, show the button
  11. %>
  12. <button bgColor="#14b474" action='Function' functionName='checkIn' successMsg='You have checked in.' size='3' text="Check In"/>
  13. <%
  14. }
  15. else
  16. {
  17. //If the employee has checked-in, lets show the time of check-in
  18. checkedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today];
  19. %>
  20. <text bold='true' value='Checked-in at <%=checkedIn.Check_In%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
  21. <%
  22. }
  23. %>
  24. </pc>
  25.   </pr>    
  26.  </pc>
  27.  <pc  width='33%' hAlign='center' padding="10px" vAlign='middle'>       
  28.      <pr width='100%' height='fill'>     
  29.       <pc hAlign="center">
  30. <%
  31. //Find if the employee has already checked out
  32. alreadyOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today].count(ID);
  33. if(alreadyOut == 0)
  34. {
  35. //If employee has not checked out, show the button
  36. %>
  37. <button bgColor="#fd3a36" action='Function' functionName='checkOut' successMsg='You have checked out.' size='3' text="Check Out"/>
  38. <%
  39. }
  40. else
  41. {
  42. //Find if the employee has already checked out
  43. alreadyCheckedOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today];
  44. %>
  45. <text bold='true' value='Checked-out at <%=alreadyCheckedOut.Check_Out%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
  46. <%
  47. }
  48. %>
  49. </pc>
  50.   </pr>    
  51.  </pc>
  52.   <pc  width='33%' hAlign='center' padding="10px" vAlign='middle'>       
  53.   <pr width='100%' height='fill'>     
  54.    <pc hAlign="center">
  55. <%
  56. //fetch total hours.
  57. total_hours = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today].Total_Hours;
  58. //handling the null value of total hours in the begining.
  59. if(total_hours == null)
  60. {
  61. total_hours = "";
  62. }
  63. %>
  64. //Display total hours value after checkout in the Dashboard.
  65. <text bold='true' value='Total Hours :<%=total_hours%>' size='3' color='#3d566e' type='Text' textAlign='left'> </text>\
  66.   </pc>
  67.   </pr>    
  68.  </pc>
  69. </pr>

Snippet c
Place the above snippets appropriately as shown below to arrive at the final ZML code:
  1. <%{

  3. //Get the logged in user record
  4. getUser = Add_Employee[Official_Email == zoho.loginuserid];
  5. %>
  6. <panel>
  7. //Insert Snippet a
  8. //Insert Snippet b
  9. </panel>
  10. <%}%>

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.
  1. <%{
  2.  %>
  3. <style>
  4. h3 {
  5.  padding: 10px;
  6. }
  7. #zohoreportel
  8. {
  9.  height : 400px !important;
  10. }
  11. .holidayTable
  12. {
  13.  width: 96%;
  14.     border-collapse: collapse;
  15.     margin: 1% 2%;
  16. }

  18. .holidayTable td
  19. {
  20.  padding: 10px;
  21.     font-size: 14px;
  22.     text-align: center;
  23.     border-bottom: 1px solid #f1f1f1;
  24. }
  25. table.holidayTable > tbody > tr:first-child > td
  26. {
  27.  font-weight: 600;
  28.     font-size: 15px;
  29.     background: #ececec;
  30. }
  31. </style>
  32. <div style="height : 450px;overflow:scroll;">
  33. <h3>Upcoming Holidays</h3>
  34. <%

  36. //Get the list of holidays until December
  37.  holidays = Holidays[Date_field > zoho.currentDate];
  38.  if(holidays.count() != 0)
  39.  {
  40.   %>
  41. <table class="holidayTable">
  42.  <tr>
  43.  <td>Holiday Name</td>
  44.  <td>Date</td>
  45.  </tr>
  46. <%
  47.   for each  rec in holidays
  48.   {
  49.    %>
  50. <tr>
  51.  <td><%=rec.Holiday_Name%></td>
  52.  <td><%=rec.Date_field%></td>
  53.  </tr>
  54. <%
  55.   }
  56.   %>
  57. </table>
  58. <%
  59.  }
  60.  else
  61.  {
  62.   %>
  63. <div>No holidays Available!</div>
  64. <%
  65.  }
  66.  %>
  67. </div>
  68. <%
  69. }%>

See how it works