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

    • Looking to Hire: Zoho Creator Developer for Vendor Dashboard Portal

      We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-time

    • Create your own convert feature in Zoho CRM | Kiosk Studio Session #7

      In a nutshell: Want to replicate the leads-to-contacts conversion flow for your custom modules? Use Kiosk Studio to build a convert feature in less than one day—with zero code—that enables the following: Conditional approvals Dynamic module mapping Automatic

    • Split View for Zoho CRM : Break down Your Module Data for Smarter Selling

      Hello Everyone, We’re excited to unveil Split View, a powerful new way to explore and interact with your data in CRM For Everyone. In addition to the recent new module views --- Chart View, Timeline View & Grid View, we've added Split View as well to

    • Some website items no longer centered.

      At some point (probably after some Zoho Sites updates) my items on the website stopped being centered. I just noticed it now so unsure when that change happened: Strange as it is - I entered the editor and I can not find the option to move them back in

    • Swipe, Snap, and Submit Instantly with Zoho Expense's Real-time Feeds

      It's time your employees enjoy the smoothest expense reporting experience ever. It's time to switch to Real-time Feeds by Zoho Expense. Upgrade your Zoho Expense experience with real-time corporate card management for the fastest, easiest, and most accurate

    • how to set the recency in segmentation rules in the last X days?

      I just change the segmentation rules recency to be like this: I want score 5 if the deal won time is in the last 30 days I want score 4 if the deal won time is in the last 60 days I want score 3 if the deal won time is in the last 90 days I want score

    • Issue with Schedule Workflows – "Usage Limit Crossed" Error

      Hi Zoho Support, We are currently facing an issue with the scheduled workflows in our Zoho Creator application. We are receiving the following error: "Usage limit crossed" for schedules. However, when we checked the usage statistics for our Creator app,

    • Card Scanner app creating duplicate Accounts

      Hi all, I recently added Card Scanner app by ZOHO on my phone. I scanned several business cards, and realized that there were some newly added Accounts. Let's say there is an Account named ABC (US) CO., LTD in our system already. The app scanned the business

    • How do I create a time field?

      I want a field that only records time. I can only see how to create a date-time field. If I do that and enter a time, without a date, nothing is recorded. If I create a number or decimal field, I cannot use it in time calculations. All I want is a field

    • Introducing Image Upload Field

      Hello everyone, In this post we will discuss about the benefits and usage of the Image upload field. The field is available for standard and custom modules.  Usage: This field can be used to upload a gallery of images to a record and share the record with peers or customers. The record can be made accessible to users outside of Zoho CRM via Portals, where they can upload the necessary images. Preview, editing, and deleting images: The uploaded images can be directly edited and saved from the record

    • Zoho Forms CRM Field Mapping

      Using the Zoho CRM Field in Zoho Forms, there is no direct integration between the Zoho Forms Time field, and Zoho CRM. We use this single field in most of our client-side forms to collect information. Initially reading this request, you might think that

    • How to Improve the Speed of the Website Zoho Commerce

      Is there another way to improve the speed of the website in Zoho Commerce that was created?

    • Free Webinar - Fundamentals of Zoho Sign: Overview and latest updates for new users and evaluators.

      Hello there! Want to get the most out of your favorite digital signature provider? Did you miss our last session on Zoho Sign features but eager to learn more? We have just the thing for you! Join us for the second edition of our free monthly webinar:

    • 【Desk ナレッジベース】　記事自体のフッターのカスタマイズについて

      お世話になります。 サービスのヘルプセンター構築のために、Deskとナレッジベースを使い始めていますが、 構築にあたり以下の質問があります。 ・質問 記事自体のフッターにある「評価」と「共有リンク」（添付ファイル参照）を非表示にしたいのですが、 これを非表示にするのはどうしたらよいでしょうか。 ヘルプセンター自体ののヘッダー、フッターはカスタムできるのですが、 記事そのもののフッターはカスタムできるところが見つかっていません。 もしご存知の方がいらっしゃいましたら、教えて下さい。

    • Timeline View in CRM - a linear way to visualize records over time

      Hello all, We would like to introduce the next phase in our quest to deliver a seamless user experience as part of the CRM for Everyone: the Timeline View. It allows you to visualize your records plotted across a given timeline. You can view the records

    • SalesIQ not loading on mobile

      We have installed the snipped through Google Tag Manager and it's working as it should on PC but the widget is not loading on mobile. Is there something we're doing wrong from our side? Edit: Widget seems to be loading just fine on Android and the problem

    • Is there a way to disable the Activity Reminders Pop-Up Window every time I log in?

      Just wondering if there is a setting to disable the window from opening every time I open my CRM? Thanks Chris

    • Unable to make calls at the moment.

      One of our employees has been getting this message all day when trying to make an outgoing call. We use the zoho phone bridge, and all other employee calling works as intended. 

    • Importing multiple Zoho backstage events at once

      Currently it seems it's only possible to import data from one Zoho backstage event into Zoho Analytics using. This means that if you have 10 events, you have to import them all separately into Zoho backstage. What I would like is to import all events

    • How can an employee edit their tax withoholdings / w4

      I have an employee who has already been onboarded and wants to adjust his tax withholdings / W4. I would prefer that employees have access to make this change themselves without relying on an admin. How can they do this?

    • 【Zoho CRM】 「自動メール送信」機能廃止のお知らせ

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、自動メール送信機能廃止についてお知らせします。 Zoho CRMの「自動メール送信」機能は2025年9月30日をもって利用できなくなります。 自動メール送信機能でフォローアップを自動化している場合は2025年6月30日までに 「ケイデンス」に移行することを強くお勧めします。 本記事で言及している「自動メール送信」機能は、こちらの機能を指しております。 ワークフロールールで設定している通知メール送信処理やカスタム関数で設定しているメール送信機能とは異なります。

    • Quick timeline for each field

      Hi, The timeline feature is great, and so is its API. However, both aren't suitable for day-to-day quick fetch of a specific field timeline/history. A very good example of a similar feature can be found with the "show edit history" in Google Sheets. Ideally,

    • How to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes

      Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.

    • [Free Webinar] Building Data Relationships Using Subforms - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Is it possible for using Zoho Creator as a public application without login?

      Hi there, I recently had a client who was looking at building a learning resource on Zoho Creator. However he had a requirement that course content that he builds may be publicly accessible. My question is that, is it possible to have public pages with

    • OpenAI Alert! Plug Sample #11 - Next-generation chatbots, Zobot + ChatGPT Assistant

      Hi Everyone! We have great news for all AI enthusiasts and ChatGPT users! The much anticipated Zobot integration with ChatGPT Assistant is now available with Plugs. Note: SalesIQ offers native integration with OpenAI, supporting several ChatGPT models,

    • COQL Query using multiple Lookup conditions causes SYNTAX_ERROR

      Hi everyone, I'm trying to build a COQL query that includes conditions on multiple lookup fields. Each condition works perfectly on its own — and also the condition on the Payment_Date field works fine. But when I try to combine two lookup conditions

    • Zoho Books | Product updates | May 2025

      Hello users, We’ve rolled out new features and enhancements to elevate your accounting experience. From configuring approval at the module level to allocating landed costs to multiple bills, these updates are designed to help you stay on top of your finances

    • Beyond Email: #1 Stay in Sync with Calendar

      Weekly Tips: Beyond Email As we approach the International day of Productivity, we are excited to bring you something extra special! Alongside our usual weekly tips, we have curated a dedicated series focused entirely on productivity apps available within

    • Zoho Booking > Enquiry Status change automatically

      Hello, We have a Zoho Booking link, we want the following to happen when it is complete: 1) it finds the person in Zoho CRM who submitted the booking and updates the Enquiry Status Column to 'Self Booked'. 2) is it possible to customise the booking form

    • Zoho Bookings and cancellations/reschedules

      Hi, I noticed that when someone books, they can reschedule/cancel; on the booking page that pops up and the option is in the upper right-hand corner. Is there a way for this option to also be available in the email that the client receives?

    • API question - adding a thread to an existing ticket

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

    • Bookings page very slow to load

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

    • Presenting the brand new Zoho Bookings!

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

    • Zoho Desk API - Influence which layout is used

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

    • Zoho API Deal Creation and Pipeline

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

    • Intermittently high CPU usage

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

    • Transfer to agent not working on flutter app after integration

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

    • Zoho Blog from Zoho Sites

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

    • Help Center Home Tab Search Bar Description

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

    • Next Page