Kaizen #187 - Building a Timer and Worklog Widget (Part 1)

Kaizen #187 - Building a Timer and Worklog Widget (Part 1)



Howdy Tech Wizards!

Welcome back to a fresh week of Kaizen! 

This time, we are diving into a two-part series where you will learn how to build a Timer and Worklog Widget for Zoho CRM. This widget helps track active work time and log multitasking sessions using Zoho CRM APIs, Client Script, Functions, and Workflows.

Why It Matters?

Zoho CRM effectively captures stage/status transitions, like tracking when a case moves from Open to In Progress or On Hold. However, in dynamic work environments, employees juggle multiple work items and engage in impromptu tasks or conversations. 

Let’s take the On Hold status as an example. 

While it can be used to indicate pauses in progress, it does not always align with real-world workflows. Consider these scenarios:

Not all interruptions justify a status change 

Moving the case to On Hold for every minor detour (to clarify something with a colleague or respond to another emergency work item) would be impractical and could lead to under reporting actual work hours. Over time, this untracked effort adds up, creating a gap in visibility.

Frequent status changes may dilute their meaning 

In many teams, On Hold signifies a legitimate blocker like waiting on customer input or an external dependency. Using it frequently to reflect quick shifts in attention could compromise that clarity. 

A timer widget solves this by:
  • Capturing hands-on work items.
  • Logging context switches (unrelated tasks) with descriptive entries.
  • Feeding structured entries into a custom module for reporting and subform sync.

Business Scenario: IT Service Desk & Ticket Resolution

A tech support team uses the Cases module to resolve customer issues. Some tickets are straightforward; others require follow-ups, escalations, or cross-team coordination. While CRM timestamps (like stage transitions or picklist tracking) track when changes happen, they do not reflect how long someone actively worked on a case.

This Timer Widget can be the ultimate solution to track down the active time spent on each case through out the day.

What are we Building?

By the end of this two-part guide, you will know how to:
  • Build a timer widget to track time per task or any CRM record.
  • Log work sessions into a custom module every time the timer is started/stopped.
  • Automatically populate a subform in the corresponding record module using workflows and Deluge functions.
  • Leverage the Reports module to analyze work patterns, SLA adherence, and productivity trends.
 In Part I, we will focus on:
-> Building and configuring the Timer Widget.
-> Capturing each timed session as a record in a custom module.

Prerequisites

1. Create a Custom Module

Create a custom module named Timer Entries to log work details and generate reports from the Reports module. A new record will be added to this module each time a timer is started.

Set up the following custom fields in the Timer Entries module:

Custom Fields
Data Type
Start Time
DateTime
End Time
DateTime
Total Duration (in mins.)
Formula 
DateBetween(${Timer Entries.Start Time},${Timer Entries.End Time},'Minutes')
Related to Case
Lookup to Cases module
Work Description
Multi Line


2. Add a custom picklist option

Add a custom picklist option called In Progress to the Status picklist field in the Cases module for precisely identifying the status of the cases. 

Follow this Add/Remove Picklist Values help section for more details. 

3. Setup Custom Views for Contextual Filtering

To streamline the widget experience and ensure users only see relevant records to associate while tracking time, set up two smart custom views—one in the Cases module and another in the Timer Entries module. 

Active Cases View (Cases Module)

Create a custom view in the Cases module to list only the active tickets the logged-in user is working on. Use the following criteria tips:
  • Use the Status field to filter records with values like In Progress, On Hold, or Escalated.
  • Use the Case Owner field to show records that are assigned only to the currently logged-in user.
This view powers the drop-down inside the widget where users select the case they want to start the timer for.
Active Timers View (Timer Entries Module)

Set up a second custom view in the Timer Entries module to track entries where the timer has been started but not yet stopped. These represent active timers. Use the following logic for criteria:
  • The End Time field is empty (i.e., timer still running).
  • Timer Entry owner field matches the logged-in user.
This view is used internally by the widget to detect if a timer is already running and update the same entry once the timer is stopped.
Follow the Managing List View help page and use the specifications shown in the following image.

Building the Timer Widget 

Step -1: Review Basics

Refer to our earlier Kaizen on CLI Installation, Creating a Widget Project, and Internal hosting of the same.

Step 2 - Develop the Widget

After initializing your widget project using CLI, implement the timer logic:

Fetching Active Cases

On page load, the populateRecordsDropdown function initiates a Get Records API call to the Cases module, using the Active Cases custom view ID. This fetches all active case records assigned to the logged-in user. 

These records are then listed in a dropdown, allowing users to quickly select the relevant case they are about to work on.

async function populateRecordsDropdown() {
            const recordsDropdown = document.getElementById("moduleRecords");
            recordsDropdown.innerHTML = ""; 

            try {
                const recordsResponse = await ZOHO.CRM.API.getAllRecords({
                    Entity: casesModule,
                    cvid: casesCVID,
                    per_page: 10
                });

                if (recordsResponse.data && recordsResponse.data.length > 0) {
                    recordsResponse.data.forEach(record => {
                        const option = document.createElement("option");
                        option.value = record.id;
                        option.textContent = record.Subject || "Unnamed Record"; 
                        recordsDropdown.appendChild(option);
                    });
                } else {
                    const placeholderOption = document.createElement("option");
                    placeholderOption.value = "";
                    placeholderOption.textContent = "No records found";
                    placeholderOption.disabled = true;
                    placeholderOption.selected = true;
                    recordsDropdown.appendChild(placeholderOption);
                }
            } catch (error) {
                console.error("Error fetching records:", error);
            }
        }

Starting the Timer and Creating an Entry

Once the user starts the timer, The createRecord function triggers a Create Record API call to log the session in the Timer Entries custom module. The record captures the start time and the related case and description (if provided).

Even if no details are entered or case is selected, a timer entry is still created with the start time. This ensures that spontaneous work sessions are tracked and not lost.

async function createRecord(startTime) {
            try {
                const workDescription = document.getElementById("workDescription").value;
                const selectedRecordId = document.getElementById("moduleRecords").value;
                const selectedRecordText = document.getElementById("moduleRecords").options[
                    document.getElementById("moduleRecords").selectedIndex
                ].text;

                const data = {
                    Start_Time: startTime,
                    Owner: currentUserId,
                    Work_Description: workDescription,
                    Related_to_Case: selectedRecordId, 
                    Name: selectedRecordText 
                };

                const response = await ZOHO.CRM.API.insertRecord({
                    Entity: timerModule,
                    APIData: data
                });

                console.log("Start time recorded successfully");
            } catch (error) {
                console.error("Error creating record:", error);
            }
        }


Stopping the Timer and Updating the Entry

When the timer is stopped, the widget uses the Active Timer Entry custom view to locate the most recent Timer Entry record created by the logged-in user that does not have an end time. 

The updateRecord is then triggered to update that active entry using the Update Record API call. It updates the End time of the session and the related case, descriptions, if it was not already provided when the timer was started.

async function updateRecord(endTime) {
            try {
                const workDescription = document.getElementById("workDescription").value;
                const selectedRecordId = document.getElementById("moduleRecords").value;

                const response = await ZOHO.CRM.API.getAllRecords({
                    Entity: timerModule,
                    cvid: timerEntriesCVID,
                    per_page: 1
                });

                const latestRecord = response.data[0];
                if (latestRecord) {
                    const recordId = latestRecord.id;
                    const data = {
                        id: recordId,
                        End_Time: endTime,
                        Work_Description: workDescription,
                        Related_to_Case: selectedRecordId 
                    };

                    await ZOHO.CRM.API.updateRecord({
                        Entity: timerModule,
                        APIData: data,
                        RecordID: recordId
                    });
                    console.log("End time updated successfully");
                }
            } catch (error) {
                console.error("Error updating record:", error);
            }
        }

Step 3 - Validate and Pack the Widget

  • Follow the steps given in the Widget help page to validate and package the widget.
  • Go to Zoho CRM > Setup > Developer Hub > Widgets and click Create New Widget.
  • Fill in the required details as shown in this image and ensure to select Button as the widget type.

Step 4 - Associate it with Flyout

  • Go to Setup > Developer Space > Client Script. Click New Script.
  • Enter a name and description for the script. Choose Command type in Category. 

  • Create a Flyout and render a widget within it using its details like the API name of the widget, title, size, and animation type. You can get the Widget API name from the widget's detail page. 
let allowedUserEmails = [];
allowedUserEmails.push('user1_email_address');
allowedUserEmails.push('user2_email_address');
allowedUserEmails.push('user3_email_address');
let currentUserEmail = $Crm.user.email;
if (allowedUserEmails.indexOf(currentUserEmail) == -1) {
    ZDK.Client.showMessage('Command access resticted', { type: 'error' });
    return false;
}
ZDK.Client.createFlyout('myFlyout', {header: 'Timer', animation_type: 4, height: '600px', width: '500px', top: '10px', left: '10px', bottom: '10px', right: '10px' });
ZDK.Client.getFlyout('myFlyout').open({ api_name: 'Timer', type: 'widget' });
return true;

Refer to Creating a Client Script help page for more details. 

Try It Out!

A complete working code sample of this widget is attached to this post.

Now, let us see how this Timer widget works:

1. Start the Timer 

Open the widget and select an active case from the dropdown. As soon as you start the timer, a new record will be automatically created in the Timer Entries module to capture the session.

2. Stop the Timer 

When the task is complete, provide a description of the work you have done and stop the timer. The same Timer Entry record (created when the timer was started) will be updated automatically with the end time and your work description.

This forms the foundation for accurate time tracking at the record level. 

In Part 2, we will show how to:

-> Use a workflow and Deluge function to transfer these entries into the Work Log subform inside the relevant Cases record.
-> Use CRM Reports to slice and dice work time for better SLA and productivity insights.

In the meantime, would you like us to address any of your pain-points or have a topic to discuss? Let us know in the comments or reach out to us via support@zohocrm.com.

Until next time, Happy Coding! 

-----------------------------------------------------------------------------------------------------------------

Related Reading

-----------------------------------------------------------------------------------------------------------------

Idea
Previous Kaizen: Client Script Support for Subforms | Kaizen Collection: Directory


    • Sticky Posts

    • Kaizen #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Community Digest Noviembre 2024 - Todas las novedades en Español Zoho Community

      ¡Hola, Español Zoho Community! Wow, ya termina el año, ¡gracias a vuestra participación se nos ha pasado volando! Por eso mismo estamos preparando sorpresas para todos los que participáis en la Español Zoho Community para el próximo año, ¡estad atentos

    • Zoho Mail iOS app - Complete revamp of the UI including insert image option, toolbar customization, calendar widgets and more!

      Hello everyone! The new Zoho Mail iOS app introduces a fresh look, blending native iOS features with a refined UI and UX to make email management more intuitive. The updated design focuses on simplicity, ensuring smoother navigation throughout the app.

    • Download API file contents from browser

      Hi Team - is there something being planned to be able to trigger file downloads from the browser via a deluge script? i.e. retrieve a file via API, trigger the file download directly from the browser. Or... using the convertToPdf function (https://www.zoho.com/deluge/help/functions/file/convert-to-pdf.html)

    • Adding a work order for Assets vs. changing the contact person

      When adding a work order for an existing Assets (e.g. service), the assigned contact cannot be changed (deleting the contact deletes the selected Assets). This results in such an illogical operation that if you want to change the person to be contacted,

    • DOMIN NME

      How many email account do zoho supports

    • Assign admins to the application

      I want to know who to assign admins to UAE Payroll application. I tried from inside the application, and from one.zoho.com >> directory and nothing is happening, knowing that I have enabled zoho people integration with payroll. Can someone help me?

    • Zoho Marketing Campaign

      I want a details report of marketing API . which API i can use to get a full flexed detail of email campaign , sms , social media ,and all other campaigns ?

    • ¿Puedo migrar mi sitio desde WordPress a Zoho? ¿Zoho admite herramientas con código personalizado?

      ¡Hola comunidad! Estoy evaluando la posibilidad de migrar mi sitio web https://calculadoradenotas.cl/ desde WordPress a una solución Zoho, y tengo algunas dudas técnicas que espero puedan aclararme. Mi sitio no es solo informativo: es una herramienta

    • Automating SharePoint Folder Creation based on Equipment Module

      Dear Team, I would like to seek your valuable advice on one of my requirements. My objective is to automatically create a SharePoint folder whenever a record is created in the Equipment module. The folder should be named based on the equipment name. Once

    • Can I view a gallery of attachments related to an Account, Contact, or Subscription

      It is often useful to review photos related to an account or contact by service type. It would be nice to be able to see the photos collected through workorders or appointments all associated.

    • Language Field on Contact Person-level

      Dear at Zoho Books, would it be possible for you to have a Field for 'Language' for the Contact Persons under a Company. In CRM and Bigin we could create a Custom Field (Dropdown) for this effect but without any present in Zoho Books we could never sync

    • Customise Zoho FSM Work Order Name

      Hi there, is there a way for us to customise the work order number? For example - I want to add auto look up for company name or dates at the end of the work order number. WO4 - Company ABC

    • Introducing Dynamic Display in Zoho CRM mobile apps

      Hello everyone, We're happy to announce that Dynamic Display is now available in the Zoho CRM mobile app for both iOS and Android devices. Mobile apps have become synonymous with convenience and flexibility. As more and more businesses rely on mobile

    • How we can integrate pdf attachments in zoho crm with xero

      when i tried to integrate the data and attchment from zoho crm to to xero only the data get integrated with xero how we can integrate the pdf attachment as well nb zoho apis are not working via functions

    • Delete user profile

      Hello, How can I delete a User Profile?

    • Send emails directly via Cases module

      Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organization

    • Introducing delegate signing in Zoho Sign

      Hi everyone! We are happy to announce a new feature in Zoho Sign — Delegate Signing! Whether you're tied up in meetings, away on vacation, or managing multiple responsibilities, you can now assign a delegate to sign documents on your behalf. This ensures

    • Deleting Salutation Field

      We have updated our lead input screen and 'Salutation' has appeared. This is not visible in the 'Edit Pgae Layout' screen so cannot be moved to 'List of Removed Fields'  Salutation is visible in the list in 'Customization - Fields' however I can only 'Edit' or 'Replace' I cannot delete and I do not need this field on my lead input screen.  Please can you advise how to get rid of this.  Screen shots can be provided if needed.  Thank you Tasha

    • Zoho Voice VS in Zoho CRM for logging calls

      I don't understand the differences between logging calls in Zoho Voice VS in Zoho CRM. Why the 2 separate platforms? Seems confusing

    • Updates to Auto-Upgrade in Zoho Campaigns

      Hello everyone, We've rolled out a new update that slightly modifies how the auto-upgrade option in Zoho Campaigns works. Even if you hit the contact limit, this update ensures that your account is upgraded and that contacts are imported smoothly—without

    • Adding Sub-Forms to Merge Documents

      I am setting up a Mail Merge, which includes sub-form table data. I've done it before but now I am having issues: 1. The headings don't show. I had to enter these manually 2. The table lines are separated. I want them together. Anyone know how to fix

    • Zoho Bookings Online Training | July 31, 2025

      Hi everyone! We’re back with the second session of our Zoho Bookings training series! This time, we’ll show you how to automate your scheduling, manage appointments more efficiently, and explore advanced features for your industry. Join our free, two-hour

    • Translation of Tooltip Messages

      The descriptive help messages should be available to provide translations for.

    • Delete Inactive Zoho Accounts - Access Cleanup_User Id: 60001640923

      As part of our Zoho access hygiene, we’ve reviewed and deactivated several inactive user accounts. These accounts have not been used in the past year and are no longer tied to active operations. All access rights have been revoked, and records retained

    • CREATE button is grayed

      On Android adding new notes to notebooks with collections is impossible because the CREATE button is grayed. What can be done?

    • Can Zoho Creator Apps have multiple actors and steps? Example

      Mortgage Application App- Outside party fills out form via published website form, Inside party approves for additional documentation, outside party recieved requests for x, y, and z documents.  Outside party submits x, y and z but z is wrong.  Inside

    • How to download all attachments from inbox, send, other folders in one go

      Hi All, Appreciate if anyone could help me with steps for below requirement. How to download all attachments from inbox, send, other folders in one go. Even mapping to new folder will help me.  Thanks in advance. 

    • Re-Apply SLA When Ticket Reopened from Closed Status?

      If you have an SLA applied, timers are deactivated when going to "On Hold" status type and reactivated when going back to an Open status type. What we discovered is when a customer replies to a closed case and it reopens, the SLA is not applied and timers

    • Zoho Expense Reimbursement

      I am using Zoho Expense for employee expenses.  At year end I accounted for reimbursement for the founders' expenses by doing a manual entry between employee reimbursements and shareholder loan.  All is correct in the balance sheet, but in Zoho expense the expense report totals are showing as owing still.  It doesn't impact the books, but I don't want to see amounts owing.  How can I zero these out?  The only way I can see it is by creating a transaction in Books that pays the employee via a bank

    • Request to Delete Mistakenly Created Zoho Desk Account – Access Blocked to Company Directory

      Dear Zoho Support Team, I hope this message finds you well. I am writing to request assistance regarding a Zoho Desk account I mistakenly created using my company email address. I created the account before being officially onboarded by my company, and

    • Introducing an AI-driven CAPTCHA for Help Center that offers improved accessibility and enhanced security | Zoho Desk | Product Update

      Captcha protects your help center from fraud and abuse without creating friction. What is a CAPTCHA? CAPTCHA is a test used in computing to verify that a user is human by requiring them to complete a challenge. It helps prevent bot attacks and reduce

    • Announcing new features in Trident for Windows (v.1.29.4.0)

      Hello Community! Trident for Windows just got better! It’s packed with new features designed to enhance communication, manage important information securely, and give you a smoother, more productive experience. Let’s dive into what’s new! Access Zoho

    • Exporting Ticket Threads/Comments and Attachments in Reports

      Hi, I would like to know is it possible for Ticket Comments and/or Attachments to be displayed in Reports?

    • Product management across integrated apps

      Hi everyone, I’m setting up my business for selling products and integrating CRM, Inventory/Books, Ecommerce, and other apps. Where should I load products for the first time so they reflect across all apps? And for updating prices or adding new products—where

    • Calculate Number of Days Between Two Dates

      Can someone help me with how to create a field using the formula function to calculate the number of dates between a campaign start date and end date? The closest I have gotten is using the "Datecomp" function but it gives you the dates in minutes, rather

    • Zoho Writer Docx files not able to be converted into Google Docs

      Since July 23rd, I've encountered an issue where DOCX files exported from Zoho Writer no longer convert properly into Google Docs when uploaded to Google Drive. My workflow relies on generating merged DOCX documents from Zoho Forms using Zoho Writer templates,

    • Schedule Campaign - Recipients Time Zone

      Something seems to be wrong with the scheduling feature for scheduling campaigns to be deployed at a specific time to the recipients time zone. I scheduled campaigns twice to be sent at the recipients time zone and the campaigns are deploying at the wrong time. When communicating with Zoho support they said to make sure it was scheduled at least 24 hours in advance so we did this with our last campaign and it was still deployed at the wrong time. Anyone else having this issue?

    • Zoho Vault App for Windows

      Hello, is there a Windows app that can be used to access the passwords saved in Zoho Vault? Thank you

    • Zoho Cursor Jumping

      Hi, Zoho Support, We received the below email for a bug when using Zoho on Firefox. Please let us know if there is anything that can be done to solve this issue. Have any other Zoho Mail users reported issues the past few days with Zoho auto-saving drafts

    • tomorrow option within the due date section and drag and drop into calendar

      Firstly, thank you for creating such a well-designed and user-friendly to-do list app. It’s almost perfect for my needs, but I wanted to offer a couple of suggestions that I believe could significantly enhance its usability, particularly for those who

    • Next Page