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

    • WhatsApp integration isn't very useful at all (no workflow support)

      We have set up WhatsApp through Business Messaging. It works, but there appears to be no workflow support for messages that are sent/received! Without being able to trigger a workflow when an inbound message is received, my colleagues would have to manually

    • Zoho CRM 差し込み文書テンプレート if文

      Zoho CRM の差し込み文書のテンプレートを作成しています。 フッターにページが 2ページになる場合は、「次葉へ」と言う文字を表示したいのですが、ページ数による判断はできないのでしょうか？ 現在はサブフォームの行数で判断しているのですが、複数サブフォームを差し込んでいるので、合計何行で2ページ目になるのか把握が難しく、ページ数で判断できればうれしいなと思い、質問させていただきます。 ※行総数はワークフローでレコード保存時にカスタム関数でサブフォームの行数をカウントして数値を保存しています。

    • Record payment: Payment Mode vs. Deposit To and how to "connect" them!?

      How do we set up that when we choose:  "Payment Mode"= Cash, then "Deposit to" is automatically set to Petty Cash, and if we choose  "Payment Mode"= Check, then "Deposit to" is automatically set to Undeposited Checks, and if we choose  "Payment Mode"=

    • Allow split times for business hours feature

      It would be great to be able to set business hours multiple times during the same day. For example: Monday from 9am - 1pm, and then from 2pm - 5pm This would allow calls to be sent straight to voicemail during 1pm-2pm during lunch break.

    • Add Knowledge Base KB Articles to multiple categories

      Greetings, Love you help center system. One item that would be incredibly helpful to many of us would be able to add a single Knowledge Base KB article to multiple categories in our system. It seems it could be quite easy to use a checkbox form, instead

    • Peppol integration zoho invoicefu

      Hi, Belgium will require Peppol invoicing as of 2026. I found that this is being prepared for Zoho books, to be released in Sep 2025. Will Zoho Invoice get this functionality too? I like the Invoice app for my part-time side business as bike mechanic

    • Error in formula

      Can someone PLEASE tell me what is wrong with this formula? Formula return type, I have tried string and decimal fn.Year(fn.Now())-fn.Year(${cf_purchase_date}) I keep getting the following error. Incorrect argument type passed for function Year Thanks

    • Sync “Display Author Info” Setting from Zoho Desk to Zoho SalesIQ

      Dear Zoho SalesIQ Team, We’d like to suggest a refinement to how Zoho SalesIQ displays knowledge base articles that are synced from Zoho Desk. Current Behavior Zoho Desk allows us to control whether author information (name, profile picture, etc.) is

    • Respect Help Center Visibility Settings for Knowledge Base Sync Between Zoho

      Dear Zoho SalesIQ Team, We’d like to suggest an important improvement to the integration between Zoho Desk and Zoho SalesIQ with regard to the knowledge base synchronization. Current Behavior SalesIQ offers excellent functionality by allowing us to sync

    • Enhancing Answer Bot's Capabilities

      Wouldn't it be amazing if the answer bot could directly search for answers in our database, FAQs, articles, etc., without needing to display the entire article? without relying on external tools like ChatGPT This way, it could provide concise and relevant

    • Centralize and Streamline Zobot and Flow Control Settings in Zoho SalesIQ

      Dear Zoho SalesIQ Team, We would like to suggest a crucial improvement to the current setup and configuration experience within SalesIQ. Problem Statement Zoho SalesIQ currently offers three primary mechanisms for handling customer chats: Answer Bot –

    • Client Portal ZOHO ONE

      Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

    • Custom Formula

      Good day, I am trying to create a formula field in Zoho Desk to calculate an age, but I'm having trouble figuring out how to make the formula. This is a formula I found, but it keeps telling me the wrong field name. Can someone please help me? Field name:

    • Click to edit fields with Canvas layout

      Hi, I have integrated new layouts using Canvas and its been going well so far. Although I cant seem to figure out how to change the fields so you can click anywhere on it to select or edit the field. Now a small pencil will appear next to the field you

    • Show Custom CSS Changes in SalesIQ Preview

      Hello Zoho SalesIQ Team, We truly appreciate the ability to customize the chat window using custom CSS via: Settings > Brands > [Select Brand] > Personalization > Appearance > Upload Custom CSS. This flexibility is extremely helpful in aligning the chat

    • Light Agents for External Users

      We are currently on the Zoho One version of desk and cannot create any light agents. We would like to create light agents for external users in order for them to see their tickets and approve changes.

    • Inquiry Regarding Accessing Multi-Select Field in Pivot Chart

      I'm currently working on a project and would appreciate guidance on accessing and utilizing a multi-select field within a pivot chart in Zoho Creator. Could you provide instructions or resources to help me implement this feature efficiently? Your assistance

    • What should I be using Salesinbox or Zoho Mail

      Hi everyone, I again find myself a little confused by the Zoho offering.  I am a long time Zoho CRM and Zoho mail user. About a year and a half ago, Zoho mail had a major update and things like streams were added. We have learned to use the new features, although I am sure not to their fullest.  Now while getting help with an issue that I had with emails associated with Contacts in CRM, I now have just discovered that I have Salesinbox. OK, so it looks pretty cool, but now I find myself again in

    • {"error":"invalid_client"}

      Im sending POST query to https://accounts.zoho.com/oauth/v2/token like this described in https://www.zoho.com/crm/help/api/v2/#generate-access article, but got error {"error":"invalid_client"}. Im first thinking that this my mistake, but after this I

    • Digest Mai - Un résumé de ce qui s'est passé le mois dernier sur Community

      Chers utilisateurs, Encore un mois vient de filer à toute vitesse chez Zoho Community France ! Jetons un œil à ce qu’il s’est passé. Vos données non structurées méritent mieux qu’un simple stockage. Avec WorkDrive 5.0, Zoho vous propose une solution intelligente,

    • 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?

    • Next Page