Tip 22: How to allow employees to check in and out, and then automatically calculate their total work hours

Tip 22: How to allow employees to check in and out, and then automatically calculate their total work hours



Hi everyone,

Keeping accurate track of employee hours is crucial to smoothly running business. So this week, we wanted to go over how you can automate this whole process using Zoho Creator. With this tip, you'll learn how to set up a page that will make it easy for your employees to check in and out, and help you track their work hours on a daily basis.

To do this, let's create a sample application called Attendance App, and show you how you can use it to track the total work hours of each of your employees.

Application flow
  • Employees can check in and out by simply clicking on a button
  • Once the employee checks out, the total working hours will be calculated and updated in the admin report
  • Managers and administrators can then monitor the total work hours of each employee on a daily basis 
To do this, we need to create the following components:
  • Attendance form used to record the check in and check out times
  • Dashboard with check in and check out buttons, and two reports
  • A way for users to be given access to the application
  • A report for employees to view their check-in and check-out times
  • A report where the admin can view the details of all employees


Step 1: Create the attendance form

First, we need to create the attendance form to record the times. This form can be hidden, as the check-ins and check-outs are automatically recorded by clicking on the buttons on the page. 



Fields on the attendance form:
  • Email (Email field)
  • Check-in time (Date-Time field)
  • Check-out time (Date-Time field)
  • Total time (Single line field)
  • Status (Drop down field)
Step 2: Create functions for the check in and check out buttons

Now, let's create the two functions we need to record the check-in and check-out times. All you need to do is go to Workflows, click New Functions, and add some code snippets.

Function 1: To record the check-in time

The Check In button on the page calls a function, which adds a record to the attendance form. Use the below code to create the checkintime function:

  1. void login.checkintime()
  2. {
  3. fet = Attendance_form[Check_in_time == today &&Email == zoho.loginuserid]; 
  4. // This condition is to prevent an employee from checking in multiple times on the same day.
  5. if(fet.count() == 0)
  6. {
  7. new = insert into Attendance_form
  8. [
  9. Added_User=zoho.loginuser
  10. Email=zoho.loginuserid
  11. Check_in_time=zoho.currenttime
  12. Status="Checked In"
  13. ];
  14. } .
  15. // This adds a record in the attendance form, which captures the logged-in employee's email and the current time, and sets the status as "Checked In".
  16. openUrl("https://app.zohocreator.com/ownername/attendance-app/report-embed/User_report?zc_SecHeader=false&Email=" + zoho.loginuserid,"iframe","zohoview");
  17. // OpenURL will help you refresh the user-based report (embedded in the page) to display only the login-based entries.
  18. }

Function 2: To record the check-out time

Now, let's create a function that helps us record the check-out time. The Check Out button captures the check-out time, fetches the record containing the check-in time of the corresponding user, and calculates the total working time, which is the difference between the check-out and check-in times in the hours:minutes format.

  1. void login.checkouttime()
  2. {
  3. fet = Attendance_form[Check_in_time == today && Check_out_time == null && Email == zoho.loginuserid];

  5. //This condition checks the record based on the logged-in user and today's date, which has the check-out time as null. It avoids multiple check-outs and ensures the record is added by the corresponding user.

  7. if(fet.ID > 0)
  8. {
  9. fet.Check_out_time=zoho.currenttime;
  10. mil_sec = (fet.Check_out_time - fet.Check_in_time);
  11. actual_minutes = mil_sec / (1000 * 60);
  12. //1000 -> mill sec to sec, 60 -> sec to min
  13. mins = actual_minutes.toLong() % 60;
  14. // % 60 -> Exclude Hours
  15. hours = (actual_minutes / 60).toLong();
  16. // 60 -> min to hour, % 24 (optional) -> Exclude Days
  17. time_string = hours + " : " + mins;
  18. fet.Total_time=time_string;
  19. fet.Status="Checked Out";
  20. }
  21. else
  22. {
  23. // This part handles cases where the user checks in for a night shift, and by the time they check out, the date will have changed. In this case, we use zoho.currentdate.subDay(1) to get the previous date's record. This will be executed only if there isn't any matching record for today's date.
  24. fet1 = Attendance_form[Check_in_time == zoho.currentdate.subDay(1) && Check_out_time == null && Email == zoho.loginuserid];
  25. if(fet1.ID > 0)
  26. {
  27. fet1.Check_out_time=zoho.currenttime;
  28. mil_sec = (fet1.Check_out_time - fet1.Check_in_time);
  29. actual_minutes = mil_sec / (1000 * 60);
  30. //1000 -> mill sec to sec, 60 -> sec to min
  31. mins = actual_minutes.toLong() % 60;
  32. // % 60 -> Exclude Hours
  33. hours = (actual_minutes / 60).toLong();
  34. // 60 -> min to hour, % 24 (optional) -> Exclude Days
  35. time_string = hours + " : " + mins;
  36. fet1.Total_time=time_string;
  37. fet1.Status="Checked Out";
  38. }
  39. }
  40. openUrl("https://app.zohocreator.com/<workspaceName>/attendance-app/report-embed/User_report?zc_SecHeader=false&Email=" + zoho.loginuserid,"iframe","zohoview");

  42. // And this code refreshes the user-based report on the page to display the filtered login-based record with the updated check-out time and the total time.



Step 3: Add the buttons to the dashboard and link them to the functions


Once you've created both functions, you need to create two buttons—Check In and Check Out—on your dashboard, and link the function to these buttons. When a user clicks on them the function is executed and the time is captured.

To do that follow these steps: 
  1. Go to the page builder.
  2. Drag and drop a button onto the page builder, and you'll see a new window appear, where you can add other elements.
  3. Choose the Action type you want to perform—in this case, Execute function.
  4. Choose the function that needs to be executed (refer to the screenshot below). 
  5. Create both buttons and repeat these steps. 



Step 4: Add the reports to the dashboard Admin dashboard:

To track employee working hours This dashboard will help the admin keep track of employee work hours. Apart from the two buttons on the page, there are two reports, which are embedded using an HTML snippet.
  • The list report will dynamically display records based on the logged-in user (for example: if Employee A is logged in, they can only view their own times).
  • The Kanban report will list all the users who've checked in on that day, and it can only be viewed by the admins of the application. 
Now let's embed these two reports on the dashboard. To do that, we need to drag and drop the HTML snippet onto the page builder and write the script below:




  1. <%
  2. {
  3. a = "https://app.zohocreator.com/ownername/attendance-app/report-embed/User_report?zc_SecHeader=false&Email=" + zoho.loginuserid;
  4. %>
  5. <iframe name='zohoview' height='400' width='100%' frameborder='0' scrolling='Auto' src='<%=a%>'></iframe>
  6. <%
  7. if(zoho.loginuserid == zoho.adminuserid)
  8. {
  9. %>
  10. <div elName='zc-component' viewLinkName='Admin' params='zc_Header=true'>
  11. Loading View...</div>
  12. <%
  13. }
  14. }
  15. %>

In the code above, we're embedding the user report using an iframe, so that the user report (iframe) is automatically refreshed after a user clicks on Check In or Check Out. We've also hidden the secondary header present on the user report by setting up zc_SecHeader=false to prevent users from manually adding or modifying the record from the report. The logged-in user filter can be directly applied on the report, or by using the parameter "Email=" + zoho.loginuserid" in the URL.

The admin report is added using a DIV tag, and is displayed only to the account's super admin using the if condition. if(zoho.loginuserid == zoho.adminuserid)
If required, we can add other non-admin emails using the criteria below to make the admin report available for those particular users: 
if(zoho.loginuserid == zoho.adminuserid || zoho.loginuserid == "nonamdin@gmail.com") 

The admin will also have the option to check out users, in case they forget at the end of their shift.

Admin report

The Kanban report is created using the status field, which is a dropdown field, and you can add the code in On Update of the Status Field.For example, when the admin drags the record from the Check in time column to the Check out time column, the user will be automatically checked out. 

You need to choose Edited for Run when a record is while creating the workflow.




Below is the script you need to write in On Update of the Status Field, so that when the record is dragged and dropped to the Check out time column on the Kanban report, the check-out time will be captured.

  1. if(input.Status == "Checked Out" && input.Check_out_time == null)
  2. {
  3. input.Check_out_time = zoho.currenttime;
  4. mil_sec = (input.Check_out_time - input.Check_in_time);
  5. actual_minutes = mil_sec / (1000 * 60);
  6. //1000 -> mill sec to sec, 60 -> sec to min
  7. mins = actual_minutes.toLong() % 60;
  8. // % 60 -> Exclude Hours
  9. hours = (actual_minutes / 60).toLong();
  10. // 60 -> min to hour, % 24 (optional) -> Exclude Days
  11. time_string = hours + " : " + mins;
  12. input.Total_time = time_string;
  13. }
We've also added a filter to the admin report, that will allow the admin to view all the employees who checked in and out for the day. And, if required, you can edit it by week or month, depending on your requirements.



Note: We will soon roll out the hoursBetween function, which can be used to find the difference between the check in and check out times. This function will return the difference of hours between the given start and end date-time values.

We hope this tip was useful for you! If you have any questions, feel free to ask in the comments below, and we'll be happy to address them for you!




























      Bootcamp
      Community
      Pricing
      Webinars
      What's New
      Integrations
      Contact Support
      Contact Sales



          Zoho Survey Resources
            Features
            Survey Templates
            Integrations
            Community
            iOS Mobile Surveys
            Pricing
            Android Mobile Surveys
            Insurvey Blogs
            Insight Blogs
            Tips & Tricks





                          Setup Zoho Bigin in 30 Minitues
                          Latest Feature Updates

                            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 SalesIQ Resources


                                        Manage your brands on social media
                                        Access Zoho Social

                                          Zoho Pagesense Resources


                                              Zoho TeamInbox Resources

                                                Zoho DataPrep Resources



                                                  Zoho CRM Plus Resources

                                                    Zoho Books Resources


                                                      Zoho Subscriptions Resources

                                                        Zoho Projects Resources


                                                          Zoho Sprints Resources


                                                            Qntrl Resources


                                                              Zoho Creator Resources


                                                                Zoho WorkDrive Resources



                                                                  Zoho Campaigns Resources

                                                                    Zoho CRM Resources

                                                                    • CRM Community Learning Series

                                                                      CRM Community Learning Series


                                                                    • Tips

                                                                      Tips

                                                                    • Functions

                                                                      Functions

                                                                    • Meetups

                                                                      Meetups

                                                                    • Kbase

                                                                      Kbase

                                                                    • Resources

                                                                      Resources

                                                                    • Digest

                                                                      Digest

                                                                    • CRM Marketplace

                                                                      CRM Marketplace

                                                                    • MVP Corner

                                                                      MVP Corner

                                                                    





                                                                    




                                                                        Design. Discuss. Deliver.

                                                                        Create visually engaging stories with Zoho Show.

                                                                        Get Started Now