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

    • custom color palette for picklist in Sheet

      Migrating over from Google Sheets and missing the ability to customize the individual item colors of my picklist/dropdown menus. Is this something that is possible? A search showed me creating a custom color palette in Analytics is possible but I am not

    • What's New - July 2025 | Zoho Backstage

      Start smart, end strong. From knowing who’s coming to celebrating who showed up, July’s updates help you run events that feel organized from the first invite to the final thank you. Planning an event used to be like writing a choose-your-own-adventure

    • Image Upload Field API get encrypted ID and sequence number

      Hello is there a way to extract the encrypted id and sequence number from image upload fields through the Zoho CRM API? I created a custom script with javascript within Zoho CRM, but I want to extract the encrypted id and sequence number for all my images

    • Attention: Changes to 10DLC TCR pricing and new authentication requirements

      Hi everyone, Starting August 1, 2025, The Campaign Registry (TCR) is introducing new pricing changes and a mandatory brand verification process called Authentication+ 2.0, which will affect how you register and manage your 10DLC messaging services. These

    • Better Time Tracking

      We need better time tracking customization for IT MSPs. We also need reporting that is built in, rather than having to try and fumble with creating custom reports. We also need to be able to mark whether a ticket has been billed or not, I don't think

    • Scheduled Tickets Need Updated

      There is a very clunky manual way to create reoccurring scheduled tickets. This should be created to be easy for the administrator to create. We create several (10 to 12) reoccurring tickets per account for biweekly and monthly auditing purposes.. The

    • Team Feeds Improvements

      Team Feeds needs to show a feed of every action within the department. Currently it seems that the feed will only show a ticket that I've personally commented on or interacted with/followed. A feed should be that, a feed. As a manager I would like to

    • Better Security, Better User Experience | Help Center Update | June'25

      As part of our commitment to enhancing user experience and security, we are happy to announce updates to our authentication mechanism. This update introduces several key enhancements designed to improve the password recovery process and streamline the

    • Upload Logo to Account Page

      It would be nice to set a logo for an Account

    • View Agent Collision on Ticket List Page

      It would be nice from the ticket listing page (views) to see what agents are working on what tickets rather than having to click into each ticket throughout the day to see what agents are working on what tickets. This functionality would also be desired

    • Restrict user from viewing the detail standard view

      Is there any way to restrict a user(it can be user-field-based) from viewing the detail standard view? Basically, I have created a canvas detailed view so that on some conditions I can hide some data from the users but the standard view client script

    • Upload Picture to Contact

      It would be nice to upload a profile picture to a contact.

    • Ticket Status Colors

      Can i change the colors of Ticket Status in the admin panel? Or even change the background of the entire cell of a Critical ticket? This way its easy for my agents to see a urgent ticket when it comes in. Right now everything is black text. Here Right

    • Allowing Pictures for Client Contacts

      Do you have any plans to allow us to add pictures of our client contacts? There is a silhouette of a person there now, but no way that I can see where I can actually add a picture of the individual.

    • Paid Support Plans with Automated Billing

      We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? The

    • Agent name Alias

      I am seeing that Full name of my staffs are written on every ticket response which is not good for some reasons. It is possible to user like this: Manny P. (First Name with Last Name's First Letter) or  Manny (First Name) This is want we want to show

    • Unable to add attachments to tickets through Desk API

      I able to use the Desk API to generate tickets. However when I try to use the tickets/{ticketId}/attachments endpoint, I always get an Unauthorized error. My app has Desk.Tickets.ALL included in its scope so this should not be an issue

    • What's wrong with this COQL?

      What's wrong with this COQL? Code returns "invalid operator found". SELECT id, Name, Stage, Account, Created_Time, Tag FROM Production_Orders WHERE (Account = '4356038000072566002' AND Stage NOT LIKE '%customer%') ORDER BY Created_Time DESC LIMIT 200

    • [Feature Request] Add support for internationalized top-level domains mail hosting

      This is an important request to add support for internationalized domains mail hosting to https://www.zoho.com/mail/ In this case, that is only limited to domain name/mail address however currently it's already possible for us send mails etc using below

    • Add Enable/Disable to Field Rules and other Rules

      Hi, Sometimes I have rules setup for fields, and until I want to enable them for use, I can set the fields to Hidden but rules still show them, today you have to delete rules and then recreate them again, would be nice to have a toggle for Enabled/Disabled

    • Syncing stuck for days

      Hello when I made an account a few days ago and synced all my notes to it, it is still syncing. My app is only 400mb so I do not know why it is taking so long. Please help

    • Workflow runs on every edit despite not ticking the field repeat this workflow whenever a parent is edited.....

      Hi, It is my understanding that this workflow should only trigger once. Why is this triggering on every edit of the field? Based on another support query - directly from Zoho, If i tick the box 'repeat this workflow whenever a parent is edited' it should

    • How do you add or update tags on Zoho CRM records via n8n? (Workarounds or best practices?)

      Hi all, I’m running into some limitations with the Zoho CRM node in n8n and was wondering how others have handled this: From what I see, the standard Zoho CRM node in n8n doesn’t allow you to add or update tags when creating or updating contacts/leads.

    • API PARAMETER FOR TICKET CLOSED TIME

      Hi, Is there a parameter for filtering tickets by closed time in zoho api, i can see closed time in the API response i get, but can't get tickets by that field while calling. Regards, Anvin Alias

    • Reply to email addresses wrong.

      I have setup my Zoho mail account using my main domain and I also have an Alias setup from a different domain. In Settings - Mail - Compose I have selected to the option "For replies, send using The same email address to which the email was sent to".

    • Audio/video quality issues with Zoho Meeting – Any roadmap for improvement?

      Hi Zoho Team, We’ve been using Zoho Meeting for both internal and external meetings, and unfortunately, the experience has been consistently poor. The video and audio quality are so unreliable that it often renders meetings ineffective—especially with

    • Meeting integration with Otter.ai

      Would love for an integration with an AI transcription service like Otter.ai to be integrated with Zoho Meeting. Thanks

    • How to close/delete a free creator account?

      I have a free zoho creator account associated with my email address that is not being used.  I want to become a user of another paid zoho creator account but I can not associate with the paid account with the same email.  I assume if I can close or delete the free account I will be able to use the paid account. I have emailed support but no response. Suggestions?

    • Zoho books and zapier causes Invalid data provided

      I have been using zoho books with zapier for over 2 years now, everything was working fine. On September 13th my zaps stopped working. Now on step create sales invoice in zoho books i get an error: Failed to create a create_invoice_v2 in Zoho Books The

    • CRM report

      Is it possible to pull a contacts report that also includes the company industry, as well as the company name? I’m having trouble combining company and contact fields – any help is appreciated. Thank you, Sam

    • Early Payment Discount customize Text

      Hi, I’m currently using Zoho Books and am trying to customize the standard “Early Payment Discount” message that appears in the PDF invoice template. I’ve reviewed the documentation here: https://www.zoho.com/books/help/invoice/early-payment-discount.html

    • Enhancements to Client script?

      Hi Zoho CRM, I've been extensively using Client Scripts to enhance our Deal form experience, particularly for real time validations and auto updating fields based on specific logic. However, I've encountered a challenge regarding permission boundaries.

    • Add views to new CRM UI navigation + Unlimited Webtabs

      Zoho CRM is so close now to being the ultimate business application with the new UI, as soon as this one feature is added. This is probably where Zoho is headed but if it's not I want to BEG for this to be incorporated. What we need is to be able to put

    • E-Mail Distribution List

      How do I create an e-mail distribution list in Zoho Mail?

    • Custom "create meeting" button with more functionality than Zoho currently has?

      I'm looking for a little help/direction in how to do this. Even just some general high level pointers on how this might be able to be done. The current Zoho Meeting Activity functionality is not ideal for my org's workflow. I'd like to try and create

    • Error Code 4: Invalid value passed for JSONString

      Okay, I want to start by saying I know I'm a terrible scripter, so sorry if this is a dumb mistake. I just can't figure it out, even with LLM help. Here's my code: // --- Input Variables --- customer_id = salesorder.get("customer_id"); so_id = salesorder.get("salesorder_id");

    • Organizing contacts/members by company

      I work for a membership organization (representing businesses) and am trying to use Zoho CRM more effectively for managing the points of contact for our members. Currently, our members are listed in our CRM by the primary point of contact's name, but

    • Allow Stripe Credit Card and Stripe ACH payment methods to be enabled separately on an invoice.

      I need to be able to pick at the invoice level whether Stripe Credit Card and/or Stripe ACH payment methods are available. Currently, I'm not able to select from the two Stripe payment methods individually on an invoice. However, there are some larger

    • Unable to search in Zoho Email

      I've started using Zoho Email (free version) recently and realized that it doesn't have email search functionality. Am I missing anything here? I've gone through the Zoho tutorial which does show the search bar on the right top of the Zoho UI. But in

    • Response Time Report

      From data to decisions: A deep dive into ticketing system reports Every organization that interacts with its customers should have an established timeframe for how soon an agent is expected to send the first response and any reply to any follow-up messages.

    • Next Page