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

      • Can I Build a POS using ZOHO creator and integrate it with ZOHO Books?

        Hello,  I have a Zoho Books account and I was wondering if I can have a POS system that integrates with it. Primarily with Inventory, Customers and Payment and ofcourse Create invoices and credit notes.   So, would Zoho creator provide me with this solution?  Thank you, 

      • An important update for Zoho Cliq desktop users

        The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15

      • Zoho Projects - Visual improvement to parent and sub-task relationship

        Hi Projects Team, My feature request is to improve sub-task visibility. Please see screenshot below. I really think parent child relationships could be visually improved. Even if the first letter of the parent task was inline with other same level tasks

      • New Toolbar in Zoho Sheet

        We have revamped our toolbar design in this new version of Zoho Sheet. Below are some screenshots to help you get accustomed to this new interface. Click on the picture below to view the animated image in its original size. Scroll down this post to learn about the changes. Highlight of Changes: The previous format tab is now split into 2 tabs - Home and Format. The Home tab contains the commonly used functions and the Format tab holds formatting related options. Under the Home tab towards the far

      • Zoho inbuilt Telephony made a lot of issues!

        Hi there, I am a user that I am working with zoho inbuilt telephony around 1 month. Non of my colleagues are happy with this app! most of the time customer cannot hear my customer service team, customers say our voice is breaking. whenever Telephony support

      • Sending workflow notifications using popular chat services

        Hello everyone, We have introduced instant and scheduled notifications on some of the most popular chat platforms to facilitate easy collaboration, quick action, and wider reach. Workflow notifications can be sent to the following chat platforms: Zoho

      • Webhook not firing.

        I created a webhook using the Web UI, it looks very nice and the testing worked without an issue, but when i save/ update a ticket, the webhook is not firing. Here are the details of the web-hook i get from using the API "modifiedTime": "2019-10-22T09:23:37.380Z",

      • Adding Images to a Quote in Zoho CRM

        We are currently preparing to use Quotes in Zoho CRM and we are building out our Quote templates.  We came across an issue of not being to add Images of the products to the Quote - specifically in the body of the Quote templates.   This is a problem,

      • Applications built with Zoho Creator

        Hi, I’m really interested in seeing how others have built their application using Zoho Creator, especially those designed for external users (clients, vendors, or the public). If you’ve developed something along those lines and don’t mind sharing, I’d

      • Is it posssible to add Asap Widget on Wordpress?

        I have tried to add the ASAP widget so users could iniciate chats and see the KB information but nothings seems to work. I have tried to add the script using a php snippet that adds the to the footers and also tried one for the header in the functio

      • Require ticket resolution

        Hi Zoho team, Is there a way to require resolution even if an agent did not use a blueprint? for example, our blueprint has a "resolve" transition but what if agent revoked blueprint and manually set the status of ticket to closed? Is there a way where

      • Tables from ZohoSheets remove images when updated from source

        I have a few tables from a ZohoSheet in a ZohoWriter document that will remove the images in the cells when I refresh from the source. The source still has the images in the table when I go to refresh. After updating from the source, as you can see the

      • API Pagination Error: 'from' Parameter Limit

        Hello, I am encountering an error while paging through the Zoho Desk API results: Status code: 422 - {"errorCode":"UNPROCESSABLE_ENTITY","message":"The value passed for field 'from' exceeds the range of '0-4999'."} Is 5000 the maximum number of records

      • How to go to the next open ticket in the queue when agents closes ticket

        Zoho Desk When agent closes a ticket - eg when they choose 'Send and Close" - where is the setting that automatically redirects them to the next open ticket in the queue?

      • CRM verify details pop-up

        Was there a UI change recently that involves the Verify Details pop-up when changing the Stage of a Deal to certain things? I can't for the life of me find a workflow or function, blueprint, validation rule, layout rule ect that would randomly make it

      • Custom templates for calendar report

        What about being able to design custom templates for the calendar report, as well as for other types of reports? I think more users are waiting for this.

      • Print a price list or price book

        Hi Community. Am I right in concluding that Zoho has no functionality to print a price list from either Zoho CRM, Zoho Inventory or Zoho Books? I won't get stuck on the fact that Zoho doesn't sync price books between Zoho CRM and Books/Inventory (more

      • Disable payment thank-you emails

        Hello, can someone please tell me how to disable sending of the "Payment Thank-You" emails? 

      • Maximum tags possible in Contacts Records

        I read in some documentation that Zoho allows a total of 200 tags across all records. Is this correct? So is it not possible to have one tag per record for 500 records?

      • Any way to "Pay with Check" or "Refund with Check" for Credit Notes?

        When we have a Bill in Zoho Books, we can select the "Pay with Check" option which then allows us to print/cut the check directly out of Zoho Books. When we created a Credit Note and want to refund the customer, is there any way to Refund with Check,

      • CRM Mobile reports

        When our engineers finish a job they like to email the customer a job report. This is best done todate as an email template but we can find no way to include an image field from that module. Is there any other options?

      • When Zoho Tables Beta will be open to EU data center

        Hello all, We in EU are looking at you all using and testing and are getting jealous :) When we will be able to get into the beta also? We don't mind testing and playing with beta software. Thank you!

      • Start Form on a different page (i.e., hide form pages)?

        I have a Zoho form that uses the `Field Alias - Prefill URL` feature. My goal is to have a pre-filled field that directs the user to a specific starting page in the form. For example: The URL will have a field alias that will auto-populate a field with

      • How can we disable "My Requests"?

        We are not using this functionality in our system at all and our users get confused.

      • PayPal payment received recording problem

        Hi, A little while back one of our customers used the PayPal payment option to pay an invoice For some reason though the payment is showing up twice within the Payments section of the invoice! Instead of setting the invoice value to ZERO, it now shows a negative value Anyone else face this problem? I've checked PayPal and there is only 1 payment in reality... A bug? Actonia ps: for anyone from Zoho Customer Service or tech team,  its Invoice 785 in our account

      • string(87) "{"code":"INVALID_TOKEN","details":{},"message":"invalid oauth token","status":"error"} " grtting this error

        Using access token i am trying to add sales orders through api but it is throwing errors like the above i have mentioned. Please help me for that

      • How to mute chat notification sound by default in Zoho SalesIQ?

        We’ve recently embedded the Zoho SalesIQ chatbot on our website, and we’ve noticed that notification sounds sometimes play even when the visitor hasn’t interacted with the chat widget yet. We’re trying to understand two things: Why do these sounds occur

      • Kanban View for Projects.

        At our organization, we describe active projects with various statuses like "In Proofing" or "Printing" or "Mailing". In the Projects view, one can set these project statuses by selecting from the appropriate drop-down. While this works, it's difficult to view and comprehend the progress of all of your projects relative to each other in a table. Creating a Kanban view for projects where I can move them from one status to another allows me to see where each project is in the order of our workflow.

      • How to Hide Article Links in SalesIQ Answer Bot Responses

        I have published an article in SalesIQ, and the Answer Bot is fetching the data and responding correctly. However, it is also displaying the article link, which I don’t want. How can I remove the link so that only the message is shown?

      • Add RECURRING option when adding email to calendar events

        When you add an email to a calendar event, there is no option to make that new calendar event into a recurring event.  It is counterproductive to make an event from your email to then have to go to your calendar, find the event, and make it recurring. 

      • LINE Auto Message Connect to Zoho

        When I integrated LINE into the CRM, I was prompted to disable “Chat,” “Auto Response,” and “Greeting Messages,” and to enable the webhook. However, since I have already set up some auto-reply features in LINE, including Rich Messages and greeting automation,

      • Option to block bookings from specific email address or ip adresss in zoho booking

        Sometime few of our client keep booking irrelevant booking service just to resolve their queries and they keep booking it again and again whenever they have queries. Currently its disturbing our current communication process and hierarchy which we have

      • Threaded conversations for emails sent via automation

        Hi Guys, I hope you are doing well. Don't you guys think we should have an option in a workflow to notify users either as a new email or the previous email thread. For example, if you have one deal in the process and there are 10 different stages during

      • Create folder is fetch fails

        coming from zapier... zapier has a google drive task that searches for a specific folder in google drive, and if it fails to find the folder it will create a folder based on the search criteria, and contine along the singluar path of the flow. Trying

      • Meetups de Usuarios de Zoho - Noviembre 2025

        ¡Hola, Comunidad! Durante el mes de noviembre celebraremos los Meetups de usuarios de Zoho, encuentros presenciales pensados para quienes queráis mejorar vuestras estrategias de lead nurturing y aprender a sacar el máximo partido a herramientas como Zoho

      • Introducing 7 New Connectors in Zoho DataPrep!

        We’ve just made data management even easier - Zoho DataPrep now supports 7 new external connectors to help you build more robust, scalable ETL pipelines. Why it matters: ✅ Broader data access ✅ More automation, less manual work ✅ Smarter pipelines, better

      • Sales Order, Invoice and Payment numbers

        Hi zoho friends, it is me again, the slow learner. I'm wondering if there is a way to have it so the Sales order, invoice and payment numbers are all the same? It would be easier for me if they were the same number so there is not so many reference numbers

      • Missing information data Zoho inventory

        there some missing data in Zoho inventory connection. pick list stock counts bin location we have requested it via mail and the support team doesn’t gove feedback. has anyone achieve to get these info or to ask other ya les

      • First day of trying FSM in the field.

        What we found. 1. with out a network connection we were unable to start a service call? 2. if you go to an appointment and then want to add an asset it does not seem possible. 3. disappointed not to be able to actually take a payment from within the app

      • Zoho Desk app update: AI powered features

        Hello everyone! We’ve introduced various AI-powered services on the Zoho Desk app. Let's take a look at what's new. Generate Content: Generate Content uses AI to formulate responses based on the your query and provides a ready-to-use reply which can be

      • Next Page