Building an employee dashboard

Building an employee dashboard


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 Link Name
Field Type
Field Name
Field Link Name
Add Employee
Official Email
Add Check In Out Details
Lookup (Add_Employee)
Single Line
Total Hours
Apply Leave
Lookup (Add_Employee)
Single Line
Leave Type
Single Line
Holiday Name
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. <pc  width='33%' hAlign='left' padding="10px" vAlign='middle'>       
  2. <pr width='100%' height='fill'>     
  3.   <pc hAlign="center">
  4. <%

  5. //Find if the employee has already checked in
  6.   alreadyCheckedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today].count(ID);
  7.   if(alreadyCheckedIn == 0)
  8.   {

  9. //If employee has not checked in, show the button
  10.   %>

  11. //Button's action is linked to the checkIn function created in Step 4 & 5. Show a message after function execution.
  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's action is linked to the checkOut function created in Step 6 & 7. Show a message after function execution.
  38. <button bgColor="#fd3a36" action='Function' functionName='checkOut' successMsg='You have checked out.' size='3' text="Check Out"/>
  39. <%
  40.   }
  41.   else
  42.   {

  43. //Find if the employee has already checked out
  44. alreadyCheckedOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today];

  45. //If the employee has checked-out, lets show the time of check-out
  46.    %>
  47. <text bold='true' value='Checked-out at <%=alreadyCheckedOut.Check_Out%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
  48. <%
  49.   }
  50.   %>
  51. </pc>
  52.   </pr>    
  53.  </pc>  
  54.  <pc  width='33%' hAlign='center' padding="10px" vAlign='middle'>       
  55.   <pr width='100%' height='fill'>     
  56.    <pc hAlign="center">

  57. //Show the total hours checked-in
  58.     <text bold='true' value='Total Hours : <%=alreadyCheckedOut.Total_Hours%>' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
  59.    </pc>
  60.   </pr>    
  61. </pc>    
  62.  </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          


    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

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



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


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


                                                                                                            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