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





                        Still can't find what you're looking for?

                        Write to us:  support@zohoforms.com

                                                                       
                            



                            





                              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

                                                                                                  As an application user, when you have collected enough data using multiple forms, you go for insights, using the Reports component. Now, the primary rationale of collecting such vast amounts of data and generating reports is to measure, monitor and ...
                                                                                                • 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