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

    • Zoholics Europe 2025: Your Ultimate Data Analysis (Zoho Analytics) Workshop Experience

      Why should you attend? This year, Zoholics Europe 2025 is putting data analysis centre stage. With a dedicated workshop designed to answer all your data-related questions, you’ll gain practical skills, real-time solutions, and expert insights that you

    • UK payroll entries

      Hey guys, Nett payroll payments are imported direct into the bank, using an external payroll system (will be glad for Zoho to have a UK payroll app) At present I have monthly recurring bills for HMRC which are auto entered & paid when due. This seems

    • Closing Accounting Periods - Invoice/Posting dates

      Hi, I have seen in another thread but I'm unsure on how the 'transaction locking' works with regards to new and old transactions. When producing monthly accounts if I close December 24 accounts on 8th Jan 25 will transaction locking prevent me from posting

    • Invoice status on write-off is "Paid" - how do I change this to "Written off"

      HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

    • Reverse Charge Services (Non-EU) Showing Correctly in 84/85 and 67, But Missing in Box 46 - Germany

      Hi, I'm located in Germany and I’ve set up my expenses for non-EU services (e.g., OpenAI, DeepSeek) under the reverse charge mechanism (§ 13b UStG) in Zoho Books, and I noticed some discrepancies in the VAT Summary Report. What’s Correct: Reverse Charge

    • Zoho Live Chat/Support

      What is going on with Zoho support lately? I've tried to use the live chat feature 4 different times and it refuses to connect to any (despite waiting over 30 minutes one of the tries). I finally gave up and emailed my question nearly a week ago and still

    • Can we have a module to records Certificate No and TDS rates for Lower TDS Certificates by the vendors ?

      Can we have a module to records Certificate No and TDS rates for Lower TDS Certificates by the vendors ?

    • Tip #38- Track Organizational Changes: A Guide to Using Action Log Viewer- 'Insider Insights'

      Hello Zoho Assist Community! Ever needed to trace who did what and when within your remote support operations? Let’s say your support team is growing, and you want to monitor key activities like settings updates, user invites, module changes, or permission

    • Tip of the Week #67– Avoid confusion – Mark duplicate threads.

      When customers send the same message to multiple email addresses, such as support@ and sales@, your team may end up seeing the same message in different inboxes. This creates confusion, risks double replies, and clutters your workspace. Use the Mark as

    • Tax in Quote

      Each row item in a quote has a tax value.  At the total numbers at the bottom, there is also a Tax entry. If you select tax in both of the (line item, and the total), the tax doubles. My assumption is that the Tax total should be totalling the tax from

    • Final Reminder: Discontinuation of Older ASAP Widgets and Mobile SDK Support

      We launched the new ASAP Help Widget last year, introducing a unified and enhanced experience. Since then, older configurations have been placed in read-only mode, with all major updates and improvements built exclusively on the new version. As part of

    • Zoho Subscriptions -- Zoho Commerce integration

      Is there integration between Zoho Subscriptions and Zoho Commerce? I would like to create subscription plans in Zoho Subscritpions and list them for on my Zoho Commerce store.

    • Website show Blank white screen

      Customer called me to tell me my website is currently down upon review it shows a white screen however I can access everything via editor. JITCADCAM.com

    • How manufacturing analytics can transform your enterprise with Zoho Projects Plus

      Did you know that every single car is made up of 30,000 to 40,000 individual parts? All of these are manufactured meticulously in various facilities before being assembled into one. The global manufacturing industry spans a wide range from delivering

    • Projects custom colors replaced by default orange

      Since yesterday, projects uploaded to Zoho, to which I had assigned a custom color, have lost the customization and reverted to the default color (orange). Has anyone else had the same problem? If so, how did you resolve it?

    • Customize your SalesIQ live chat with Custom CSS and blend it with your website design

      Hi everyone. Hope you all are having a great day! SalesIQ offers various inbuilt customization choices for your chat widget and window like changes in colour, theme, font etc. Although these choices are many, sometimes they may not match with the design

    • From Email Address When Replaying to Missed Chats

      One of the most common things we do is follow up on every missed chat.  Missed chats are like money in the bank, people just waiting for your response and to start a relationship with our companies. However, SalesIQ only lets you respond from 1 email address from your entire account?! We have happily paid for 4 subscriptions, but our users cannot reply from their own email address?  How are we supposed to build customer relationships? The fix to this issue is so simple, just load in the logged in

    • how to treat a same person as customer and vendor in zoho

      hi team, in my company, few persons acting as creditors as well as debtors (which means sometimes we pay them... some times we paid by them). in that case i would like to maintain a same ledger for that person.in zoho books it is treating creditor and

    • Narrative 6 - The impact of rebranding

      Behind the scenes of a successful ticketing system - BTS Series Narrative 6 - The impact of rebranding Every organization has invested in branding to set itself apart, and that should be reflected in the help desk. Zoho Desk enables organizations to apply

    • 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

    • Next Page