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.
 

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;

  3. //Disable the Add Employee field
  4. 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];

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

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;

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

  7. //Assign check-out value
  8.  current_day_entry.Check_Out=zoho.currenttime;

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

  21. //Set the total working hours
  22.  current_day_entry.Total_Hours=h + ":" + mins + " Hrs";
  23. }

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"> 

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

  10. //Create a button that will open the Apply Leave form on click
  11.     <button bgColor="#3d566e" action='Form' componentLinkName='Apply_Leave' size='1' text="Apply Leave"/>
  12.     </pc>
  13.   </pr>    
  14.   </pc>   
  15.  </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. <%{

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

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. }

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

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

See how it works          

            

    Access your files securely from anywhere

      Zoho CRM Training Programs

      Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

      Zoho CRM Training
        Redefine the way you work
        with Zoho Workplace

          Zoho DataPrep Personalized Demo

          If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

          Zoho CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION









                                            You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Understand Pages

                                                                                                                1. What Does This Page Cover? Learn about pages and how they are used to create user-friendly, customized dashboards for your applications. Via these dashboards, you can display dynamic elements and visually represent the data stored in Creator. 2. ...
                                                                                                              • Hotel management

                                                                                                                This app has been published in accordance with Marketplace review process. For pricing details, you can refer to this page. Category - Hospitality Vendor - Zoho Corporation Pricing - Free Overview Say goodbye to thick registry books and run your ...
                                                                                                              • Understand ZML snippet

                                                                                                                Snippets are stand-alone, re-usable code pieces that can add additional functionality. ZML or Zoho Markup Language is a simple markup language used to create pages in your Zoho Creator Appliction. Using ZML, you can build various elements of your ...
                                                                                                              • Customized search component for report data, using pages

                                                                                                                Requirement             Provide a search component for users to search for the required data. Data is fetched from reports based on the search keyword. Use Case   A library or a book management system wants to allow for searching. Any customer who ...
                                                                                                              • ZML - An Overview

                                                                                                                ZML or Zoho Markup Language is a simple markup language used to create pages in your Zoho Creator Application. Using ZML, you can build various elements of your page, create a display structure to arrange these elements on the page, add descriptive ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources