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


    • Recent Topics

    • API question - adding a thread to an existing ticket

      Hi Is there an API function for the customer to add to an existing ticket thread? example, customer puts in new support ticket. support replies and ask for more details. customer replies with more details -what api function is used for this (will add record append to same ticket number?) Thanks

    • Bookings page very slow to load

      I recently switched to Zoho bookings from calendly and yesterday I switched back. Zoho Bookings page was taking 7-23 seconds to load. We were losing paid clicks from Google because they had to wait too long. Does anyone have any suggestions?

    • Presenting the brand new Zoho Bookings!

      Hello everyone, Greetings from Zoho Bookings! We're happy to announce a new version of our product with enhanced features to simplify scheduling, coupled with a sleek interface and improved privacy across teams. Here's what you can expect from the latest

    • Zoho Desk API - Influence which layout is used

      Hello, how can the ticket layout be changed using the API? I would like to choose the layout directly when creating the ticket. If this is not possible, my question would be how can I change it afterwards? Best regards, Sven

    • Zoho API Deal Creation and Pipeline

      I want to sync my zoho crm and backend with eachtoher, I can receive webhooks from crm and sync from it but when I try to sync to crm , I get this error for Deals module Zoho error: { data: [ { code: 'MANDATORY_NOT_FOUND', details: [Object], message:

    • Intermittently high CPU usage

      I get high CPU usage intermittently both using Zoho Mail on Firefox as well as on the Zoho Mail Desktop app (Mac). To me it seems like a bug because idle usage is normally quite low. Right now, for example, the desktop app uses <1% in the background which

    • Transfer to agent not working on flutter app after integration

      [media pointer="file-service://file-LF6KAwkyDJNd6MbzZmctS3"] [media pointer="file-service://file-FN66XQUngquBJGLdrS827u"] +7 -2 Lines changed: 7 additions & 2 deletions Original file line number Diff line number Diff line change @@ -1,10 +1,11 @@ import

    • Zoho Blog from Zoho Sites

      I keep receiving this error after trying to edit blog posts that were previously saved for posting at a later date: Additionally, I try to make new posts and they show this message, "Failed to save".

    • Help Center Home Tab Search Bar Description

      How do I change what it says above the search bar?

    • First Respons time questions regarding ticket SLA's, Ticket Re-Assignment, and Ticket Closure.

      I am chasing down a few outliers on tickets that my team is reporting to me seen in some of our Zoho Analytics Dashboards with regards to Zoho Desk with regards to First Response Time. Our support organization is setup with different SLA's based on three

    • Toggle Option for SQL Query Auto-Formatting

      We all write SQL queries in a style that makes them clear and easy to understand. However, I’ve noticed that Zoho Analytics sometimes reformats queries in a way that reduces readability - especially when editing existing queries written in a specific

    • payment configuration process

      payment configuration process

    • Lookups from Standard Modules to Custom Modules

      I have created an "External Contacts" Custom Module for adding Contacts who aren't directly associated with a Customer or Vendor but who are related to Orders by being a Site Contact, Job Contact, Warehouse Contact, etc for third party. How can I go about

    • Run automation on quiz completion

      Hello, We're exploring Zoho Learn as a possible solution to creating some training courses to external users on our system. We'd like to run a workflow/ integration to Zoho CRM when a course is completed. Is this possible?

    • Dynamic user applications for CPQ?

      Hi, I've been enjoying getting to know CPQ, the Product Configurator and Price Rules components have been very useful, albeit with some issues. I have noticed that I don't have the power to decide which level of sales staff has permissions when it comes

    • Need details on search criteria for zoho.crm.searchRecords

      Hi, If I understood correctly the integrated functions (getRecords, searchRecords, etc..) I can use inside Functions in Zoho CRM are actually using the Zoho CRM V2 API. I am looking for all the field types and criteria I can use with searchRecords. The

    • Do my notebooks get transferred to a new phone?

      Hello I was wondering about a new phone and I'd like to know whether your notes are automatically transferred to the new device? Regards Will.

    • Client Script Error - Cannot read properties of undefined (reading 'CRM')

      Hi Guys I have a custom form, and I have a client Script set for onLoad of the new form. Below is the script I have defined and the error: Cannot read properties of undefined (reading 'CRM') See Screen Shot Attachement for Details. Here is the Script:

    • Notebook sync

      Hi,After Restart Mobil-Phone since i pressen „Synchronisation“ in my Notebook-App (iPhone) the App is hanging all the time and I have no possibility to Break up. Also Not After Restart my mobile-Phone. After the Restart ( inkl. Connection to WiFi or mobile

    • Employee survey data when the survey creator's account is deleted

      I can’t find in the documentation on this topic, so asking here. When the employee who has created an Employee Engagement survey leaves the organisation and their Zoho account is deleted, will the survey results still be accessible to other persons if

    • DANE IS NOT implemented

      According to the answer of @Sagar S , "DANE has been implemented". on this topic Allow me to disagree, DANE is not implemented at least not to the EU area. The Zoho domain is not under DNSSEC protection and the related TLSA DNS records

    • Enhance Your CRM Experience with Zoho Webinars in Sandbox Environments

      Greetings all, Zoho Webinars will now be available for testing and deployment in Zoho CRM's sandbox environment. Sandboxes offer a safe way to replicate production environments and enable risk-free testing, training, and refining processes before making

    • Increase the elegant comparator to more than 5 users

      Hi Team Requesting to increase the elegant comparators number of custom users to more than 5, this is such a crucial tool in dashboarding but 5 users is simply not enough.

    • No emails coming in

      Hi, I am not receiving any emails, I have tried to send myself an email from another acct and I am not receiving anything, possibly for the last few days. Bit desperate as we are a nursery and not getting important emails from our parents.

    • Problem with Schedule Email parameters in "Send Reply to an Email" API

      Hello, This is my Json script: { "fromAddress": "test@gmail.com", "toAddress": "{{8.fromAddress}}", "subject": "{{8.subject}}", "content": "{{4.result}}", "action": "reply", "isSchedule": true, "scheduleType": 6, "timeZone": "Europe/Lisbon", "scheduleTime":

    • What's New? - May 2025 | Zoho Backstage

      Hi everyone, A May-zing month for you! As summer rolls in and event season picks up the pace, we’ve been working on a set of updates in Zoho Backstage to help make your day-to-day life a little easier. This month’s improvements are all about tackling

    • Integrate Zia AI into Zobot with Support for Hebrew and Bot Context

      Dear Zoho SalesIQ Team, Greetings. We would like to submit a feature request that would significantly enhance the functionality and intelligence of Zobot: native integration of Zia AI into Zobot scripts and blocks—with full support for Hebrew language

    • Mail Merge: Need Transparent Background for Signatures

      I'm using ZohoCRM and Zoho sign to send documents to customers to sign. We use zohoCRM's "Mail merge" option to create the templates. The problem is that those "Signature" fields have a solid white background so it looks like a stamp on the page instead

    • Zoho Flows

      Basically I can't build a connection that works between Excel on OneDrive and Zoho. I wanted to have 1 flow checking on a row added to an excel file and then intiate an import of that row. I'm doing that manually now and thought that this could be automated.

    • Zoho time tracking with automated screenshots

      Time tracking option with automated screen shots would be an exeptuonally good feature, any plans to develop something like that?

    • Sharing my portal URL with clients outside the project

      Hi I need help making my project public for anyone to check on my task. I'm a freelance artist and I use trello to keep track on my client's projects however I wanted to do an upgrade. Went on here and so far I'm loving it. However, I'm having an issue sharing my url to those to see progress. They said they needed an account to access my project. How do I fix this? Without them needing an account.

    • Zoho Campaigns Forms not Responsive on Website

      I have a mobile responsive Zoho Sites website and when I add a Zoho Campaigns form, it is not responsive. I have used the website code and ensured that the 'responsive' checkbox is selected. But, the form is not responsive to mobile. I have attached a

    • Oldest mail on top?

      I am old, and probably missing something simple, but how do I flip my zoho mail so oldest mail is on top?  Thanks in advance, and a HUGE thank you to the entire ZOHO team.  You just keep getting better!

    • Desk API to add or change commenterId to a comment

      Please let me know how to add comments on tickets for different agents using the API. When adding a comment it will take commenterId but then ignores that and used the API agentId. Did not see in API docs which values are readonly. I pleased to see commentedTime worked for past times. Regards, Glenn

    • How send a ticket attachment using the Sendreply API in Zoho Desk

      API document references : you make use of the Upload file API and gather the attachment ID. This ID is be passed with the Send email Reply API to deliver responses with the attachment intact. Code template is as below: // ORGID ORGID = "XXXXXXX"; // Masked

    • First Insight - Find your Fields

      The Wheels of Ticketing - Desk Stories Find your Fields What are fields? Fields are crucial in ticketing modules that capture information about Tickets, Customers, Organizations, Products, and more. Depending on the kind of data being stored, users can

    • Automation#30: Auto-Update Time Entry to the Nearest 5 Minutes

      Hello Everyone, Time tracking is a feature in Zoho Desk to help businesses stay organized and efficient. For Zylker Techfix, this feature has helped to track the duration of gadget services to generate accurate bills. However, Zylker Techfix faced a unique

    • Email adding to existing ticket

      hello Is there some syntax i can add e.g. to the subject line / body of my email that when it reaches the Zoho portal will add the request to an existing ticket. e.g {123} Currently if i have an open ticket and a customer emails me direct, i then forward

    • How to define different shift timings for each weekday in Zoho People?

      Hi everyone, We’re using Zoho People for attendance tracking and need to configure a standard 39-hour workweek that is structured like this: Monday to Thursday: 8 hours per day Friday: 7 hours Currently, our service provider has set up the workweek as

    • add two date range

      Hi, How can I add two date range selections to compare two different column values in a single pivot view? I have attached a snap for your reference.

    • Next Page