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

    • Passing the image/file uploaded in form to openai api

      I'm trying to use the OpenAI's new vision feature where we can send image through Api. What I want is the user to upload an image in the form and send this image to OpenAI. But I can't access this image properly in deluge script. There are also some constraints

    • Calendar Year View?

      Is there a way I can view the calendar in year view? Maybe create a page with a view like this?

    • ABN Amro

      Hi, We are trying to add Abn AMRO as a bank in Zoho Books. However we get the following error: Type of Error: User Action Required Description: The request cannot be completed because the site is no longer supported for data updates. Possible workaround: Please deactivate or remove the account. Suggested Action: The site will no longer be supported by Zoho Books and should be removed. Does that mean it's no longer supported? Thanks!

    • Add bank transfers via a webhook or API

      Hello ZOHO Books Community, is there anyway to add single transactions to bank accounts via an API or webhook? I found in docs to upload a bank statement. But i want to add a transaction from an external (unsupported bank) in the moment there is a transaction

    • Books does not allow 19% tax rate for invoice - Please help!

      Hi there, I need to do an import of invoices into Zoho Books. The process worked smoothly before we migrated to the Books Germany Edition in December 2024. It does import 13 out of 14 invoices from my csv-file. For the one it does not import I get the

    • When will Zoho Books offer native NFS-e issuing, now with Brazil's National Standard?

      Hello Zoho Team and Community, I'd like to follow up on my previous suggestion regarding the critical need for Zoho Books to natively issue Brazilian Service Invoices (NFS-e). My original idea was that this could be achieved by extending the same integration

    • API 500 Error

      Hello amazing ZOHO Projects Community, I get this message. How can we solve this? { "error": { "status_code": "500", "method": "GET", "instance": "/api/v3/portal/2010147XXXX/projects/2679160000003XXXX/timesheet", "title": "INTERNAL_SERVER_ERROR", "error_type":

    • Admin Access to Subscriber Information for System/Default Bots in Zoho Cliq

      Dear Zoho Cliq Team, Greetings, We would like to request an enhancement to Zoho Cliq's bot management capabilities. Specifically, we are asking for the ability for organization administrators to view the list of subscribers for system/default bots, such

    • zoho webmail keeps opening an empty tab when on log in/vist webmail

      as the the title says, whenever i log in or visit the page in a new tab, zoho webmail with open a new tab, but it errors out (see attachment). how do you stop it from doing this?

    • FSM work order creation on books quote approval

      I have followed https://help.zoho.com/portal/en/kb/fsm/custom-integrations/zoho-books/articles/perform-actions-in-zoho-fsm-on-estimate-approval-in-zoho-books#Step_1_Create_a_connection_for_Zoho_FSM_in_Zoho_Books in order to create a work order in FSM

    • Tip of the week #46 - Stay more organized by moving threads between inboxes

      Have you ever come across a thread in your inbox that should have been handled by a different team or inbox? Or maybe you've wrapped up your part of the conversation, but another team needs to step in to finish the task or assist further? Keeping such

    • Text summarization and field detection with Zia, Zoho's AI assistant

      Have lengthy documents that take forever to read and sign? Tired of placing fields into hundreds of pages? Here's a single solution to solve both challenges: Zia, Zoho's AI assistant. With Zia's integration with OpenAI, you can summarize long documents

    • Sending Links to Functions in CRM

      Maybe I'm crazy, but currently there's no way to send someone a link to a custom function. The only link you can get is to the myfunctions page, which is very frustrating. This should work like workflow rules where when you click on one, it should have

    • zohoからの自動メールについて

      zohoからの自動メールにおいてちょっと困ったことが起こっており、サポートにも相談中なのですが ほかの方にも同現象が発生していないか相談したい。 ▼事象 zohoからの自動メールにおいて時折「このメールが送信者からのものであると確認できないため、このメールに安全に返信できない可能性があります」とメーラーから警告が出る。 ▼状況 発信元：設定した独自ドメイン SPF/DKIM設定：済 利用メーラー：outlook 発生頻度：稀（連続するときもあるが、パタッとでなくなる時もある） サポートへの連絡：ただいま継続相談中

    • Using Deluge scripting to create/update data in TabularSections

      I am having following Form structure with some other usual fields, and a tabular section which allows putting question, self rating and lead rating. (pic below) I am trying to create a record of this form via Deluge, but can't figure out way to populate

    • Zoho Recruit: How to link lookup fields using record ID instead of name during import?

      Hi, I'm having an issue with lookup fields in Zoho Recruit during data import. When I import records into a module that includes a lookup field (e.g., to an Interview record), Zoho Recruit matches the lookup by the display name (string) instead of the

    • Add a "Success" Route to the "Forward to Operator" Card in Zobot

      Hello Zoho SalesIQ Team, We hope you're doing well. We would like to request an enhancement to the "Forward to Operator" card in Zobot. Current Limitation: At present, the "Forward to Operator" card provides the following routes: Operator Not Available

    • Power of Automation :: Auto-update Project status based on Tasklist completion

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:

    • Multi Module Lookup Fields

      🎯 Use Case: In many custom implementations, especially those involving financial tracking, service operations, or project-based work, a single record (e.g. an invoice or bill) often relates to one of several different modules — but only one at a time.

    • How to Download a File from Zoho WorkDrive Using a Public Link

      How to Download a File from Zoho WorkDrive Using a Public Link If you're working with Zoho WorkDrive and want to download a file using a public link, here's a simple method to do so using API or a basic script. This approach helps developers or teams

    • Facturation électronique 2026 - obligation dès le 1er septembre 2026

      Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,

    • Introducing AI Modeler—a no-code approach to adding AI to your business applications

      Forward-thinking businesses today are embracing AI to make life easier for themselves, their employees, and their customers. But if you haven't started yet, you might be concerned that your business will be left behind. Or maybe you're worried because

    • Tip #20 - Three things you probably didn't know you can do with picklists

      Hello Zoho Sheet users! We’re back with another quick tip to help you make your spreadsheets smarter. Picklists are a great tool to maintain consistency in your spreadsheet. Manually entering data is time-consuming and often leaves typos and irregular

    • Zoho People how do i view the history of leave taken

      Hi All What is the report that i am unable to view the history of the leave taken for an individual and team?

    • UK Registration for VAT with existing stock/inventory

      We have an existing inventory of stock and are investigating how to handle the conversion from a UK VAT unregistered company to a UK VAT registered company. Enabling VAT registered status looks extremely easy, but we cannot find any way within Books to

    • Trigger action after workflow

      I would like to trigger a deluge function after the approval workflow is complete. Is this possible? The objective is to take the approved document and move it over to Zoho Contracts to send out to our customer for review and signature. The reason we

    • Is it possible to create a meeting in Zoho Crm which automatically creates a Google Meet link?

      We are using Google's own "Zoho CRM for Google" integration and also Zoho's "Google Apps Sync" tools, but none of them provide us with the ability to create a meeting in Zoho CRM that then adds a Google Meet link into the meeting. Is this something that

    • Unable To Enable Google Calendar Sync

      Hi Folks, I am unable to enable google calendar sync. I get Internal Error, Problem Occurred Internally. Screenshot attached. How do I solve this?

    • Export to Zoho CRM Not Triggering Workflow Rules

      Hello, I have set up an automated export from DataPrep to Leads in CRM but none of my Workflow Rules are triggering once the leads are created. The Timeline history is completely empty in every lead. How can I fix this issue? Do I need to set up a Schedule

    • 【Zoho Projects】サンドボックス機能（テスト環境）リリースのお知らせ

      本投稿は、本社のZoho コミュニティに投稿された以下の記事を参照し作成したものです。 Sandbox - Your Secure Testing Space in Zoho Projects ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 本投稿では、Zoho Projects のサンドボックス機能リリースについてご紹介します。 サンドボックス（テスト環境）とは？ Zoho Projects の「サンドボックス」は、新たな設定を作成、検証、そして既存の処理を妨げることなく本番環境に適用することができるテスト環境です。

    • Sending from domain alias

      In the Control Panel/Domains, I have set up some domains as aliases for my main domain. Only my main domain has mail hosting. The other domains are verified as aliases for the main domain, and emails sent to <user>@<alias domain> arrive successfully at

    • Difficult to Purchase More users

      It's surprisingly difficult and un-intuitive to purchase more user licenses in Zoho One under the new UI. It's not actually possible to do it anywhere from the admin interface. You have to leave the admin/directory section, then click your profile icon,

    • How to link web sales payments through Stripe to invoices?

      I have just set up an online shop website which accepts payments through Stripe.  The payment appears in Zoho Books through the Stripe feed as 'Sales without invoices'.  In order to keep Zoho Inventory in step, I manually (for now) create a Sales Invoice

    • Announcing New Features in Trident for macOS (v.1.22.0)

      Hello everyone! Trident for macOS (v.1.22.0) is here with thoughtful updates to improve your daily workflow. Here's a quick look at what's new. Switch email response type easily. You can now switch between Reply, Reply All, and Forward directly in the

    • Layout Rules / Quick create

      Hello, is there a way to create a layout rule for quick create option? Regards, Katarzyna

    • Zoho Notebook Will Not Open After App Install

      I am a new user of Notebook. I was able to successfully import my data from Evernote and the product is working well on a Windows 11 computer and Pixel device. I have also installed Notebook on a Samsung S6 lite tablet however the software freezes on

    • Leads, contacts, deals table view is not sorting

      i am unable to sort the table view of leads, contacts and deals

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Zoho CRM Multi-select values not translated

      Hello! I have some issue with translate custom multi-select fields in zoho CRM in other language. I download export file, but it has all my custom fields and picklist values exept multi-select fields picklist values.  Please, help me to undestand, is

    • Unable to Download Invoices via API – Code 57 Authorization Error

      I’m integrating the Zoho Billing API with the scopes ZohoInvoice.invoices.CREATE,ZohoInvoice.invoices.READ. I’ve completed the OAuth2 flow successfully, including generating the auth code, access token, and refresh token. All tokens are valid and fresh.

    • Next Page