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

    • Add Camera Background Blur During Recording

      Hi Zoho WorkDrive Team, Hope everything is well. We would like to request an enhancement to the video recording feature in Zoho WorkDrive. Currently, the camera preview displayed during a recording does not support background blur. This is an essential
    • Make Camera Overlay & Recording Controls Visible in All Screen-Sharing Options

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an improvement to the screen-recording experience in Zoho WorkDrive. Current Limitation: At the moment the recording controls are visible only inside the Zoho WorkDrive tab. When
    • Introducing Dark Mode / Light Mode : A New Look For Your CRM

      Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience for
    • Allow Admins to Transfer Ownership of Their Own Files & Folders

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement to the ownership-transfer functionality in Zoho WorkDrive, specifically regarding administrator capabilities. As administrators, we have the ability to
    • How to update custom multi-user field in Zoho Projects?

      I'm trying to update custom multi-user fields in Zoho Projects via a Deluge function in CRM. The code I have so far is below. It works for updating standard project fields and single-line custom fields, but it does not work to update multi-user fields.
    • Has Anyone successfully integrated Zoho and Sage Intact?

      Hey all, We’re evaluating Zoho One + Sage Intacct and I’m trying to connect with anyone who has actually implemented the two together.Specifically, I’d love to know: -- Which functions you kept in Zoho vs. Intacct (e.g., Product Catalog, AR/AP, invoicing,
    • Kaizen #57 - Mass Update API in Zoho CRM

      Hello everyone! Welcome back to yet another post in the Kaizen series. This week, we will discuss the Mass Update API in Zoho CRM. In this post, we will cover the following: 1. Introduction 2. Mass Update Records API  3. Schedule Update and Get Status
    • Zero Personalization of the File Sharing Experience

      By now (2025) this is the maximum level of personalization available for a Zoho sharing link. We gently asked Zoho if we could modify at least the background, and they replied that it cannot be customized. We're truly disappointed – and surprised every
    • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

      Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple
    • Canvas Flex Box containers should not require a width/height.

      Flexbox containers are often used as organizational concepts, to ease re-flow on mobile etc. - I cannot use % for flexbox W or H - I cannot omit W or H This means that the content cannot dictate, and a Flexbox container cannot be used merely as an organizational
    • Its 2022, can our customers log into CRM on their mobiles? Zoho Response: Maybe Later

      I am a long time Zoho CRM user. I have just started using the client portal feature. On the plus side I have found it very fast and very easy (for someone used to the CRM config) to set up a subset of module views that make a potentially extremely useful
    • Automation in Zoho Sprints

      Hi. I have a Sprints board with the following statuses: ToDo, InProgress, CodeReview, Testing, Preprod, Live When a ticket is moved from e.g. Testing to Preprod, the following tags should be modified: remove 'tested OK' remove 'ready for Preprod' add
    • Zoho / Outlook Calendar sync

      The current Marketplace -> Microsoft -> Meetings integration needs 2 changes. 1. The current language for the Two-Way sync option should be changed. It currently states, "Sync both your Zoho CRM Calendar and Office 365 Calendar meetings with each other."
    • External Share > Edit: Cannot Create Zoho Files

      Hi Zoho, When we create an external share link with Edit permission, our external users are unable to create a Zoho file (Zoho Writer, Zoho Sheet and Zoho Show). They can only upload files. They can edit the Zoho files if we create them internally and
    • Custom function return type

      Hi, How do I create a custom deluge function in Zoho CRM that returns a string? e.g. Setup->Workflow->Custom Functions->Configure->Write own During create or edit of the function I don't see a way to change the default 'void' to anything else. Adding
    • Two factor authentication for helpdesk users

      The company i work for wants use the helpdesk site in Zoho desk, as a place for their distribution partners to ask question and look for information about our product. The things there is suppose to go up there is somewhat confidential between my company
    • Kiosk can't merge picklist or multiselect

      There is no ability to load a multiselect or picklikst field into a kiosk with the values that have been previously selected. So, I essentially have 3 unacceptable options: 1.)Load the value into a text string and include instructions like this: "Picklist
    • AGE field from DATE OF BIRTH Field.

      HI! I have a field called date of birth in my CRM (LEADS, CONTACT etc…)     How can I know the AGE today   I would like to create a field AGE. I now how to create a field but I don´t which calculation (CUSTOM FUCTION) to make ¿ANY HELP?
    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files
    • webhook basic authentication

      II want to use a webhook to send out a SMS. Unfortunately Twilio does not use an authToken but basic authentication. I created the webhook as POST and get this url: https://{username}:{password}@api.twilio.com/2010-04-01/Accounts/{account}/Messages?body=<BODY>&to=+155555555&from=+1555555555
    • How to update/remove file in zoho creator widgets using javascript API

      Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API
    • Contact data removes Account data when creating a quote

      Hi, Our customer has address fields in their quote layout which should be the address of the Account. They prefill the information, adding the account name - the address data is populated as per what is in the account - great. However when they then add
    • Introducing Enhanced Storage Management

      We’re excited to roll out two new enhancements in Zoho Recruit, Subscription Information and Storage Management — designed to give admins complete visibility into subscription details, feature limits, and storage consumption — all from one place inside
    • Announcing new features in Trident for Windows (v.1.34.4.0)

      Hello Community! Trident for Windows just got better! With this update we have features that make your daily work easier and more efficient. We've added some features that are exclusive to our app and we're sure you'll find them useful. Let’s dive into
    • Report Hover Setting

      Would be great if we will able to show information to the user while hovering a record in a report.
    • Vertical images displayed as horizontal

      Some pictures that originally are in vertical position are displayed in horizontal after the upload. It seems that system rotates them by 90 degrees. How can I fix this issue?
    • Zoho Desk iOS update: Custom buttons, follow/ unfollow option on tickets

      Hello everyone! In the most recent Zoho Desk iOS app update, we have brought in support to access the custom buttons configured on web app(desk.zoho.com). Using custom buttons you can seamlessly execute predefined actions directly from their mobile devices,
    • Zoho Desk iOS app update: Saved filters and sort options

      Hello everyone! Saved filters created on the web(desk.zoho.com) for tickets are now accessible on the Zoho Desk iOS app. You can easily rename, delete, or clear filters on the go. We have also introduced Sort options on the ticket listing screen, allowing
    • Introducing VeriFactu Support in Zoho Books

      Hello users, Spain has introduced the VeriFactu system under Real Decreto 1007/2023 to ensure integrity, traceability, and anti-fraud compliance in e-invoicing. Starting January 1, 2026, all B2B invoices must be reported to Agencia Estatal de Administración
    • Big Things Just Dropped in the SalesIQ Universe: Top Upgrades You’ll Love in Nova’25

      Nova'25 has landed, and it’s packed with meaningful upgrades to help you engage smarter, work faster, and scale with ease. Whether you're into proactive messaging, smarter automation, or better admin control, there's something here for everyone. Here's
    • Time Entries in Analytics

      I am trying to import a zoho sheet into zoho analytics. In my sheets one of the columns has "time Entries" in this "format HH:MM am/pm" example 11:00 PM. After import, i noticed that analytics converted the time to "00 Jan 1900 23:00:00".. how do i maintain
    • Amazon invoice in Zoho Books

      I have just made my first few sales on Amazon India. Amazon Seller account generates invoices for the sales made on Amazon. These invoices are sent to customers also. Now when I was only making offline sales, I used to create Invoices in Zoho Book. Now
    • Zoho Creator Upcoming Updates - November 2025

      Hello everyone, Welcome to your monthly roundup of new features and enhancements! We hope you've already taken a look at Release Projection 2—it details the features coming your way for the rest of the year. And this month, we're excited to start rolling
    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Latest update
    • Zoho Webinar + HubSpot : Simplifiez la gestion de vos données de webinaires

      Les webinaires sont aujourd’hui essentiels pour interagir avec vos prospects et vos clients. Cependant, la gestion des données entre plusieurs plateformes peut vite devenir complexe. Grâce à la nouvelle intégration entre Zoho Webinar et HubSpot, vos outils
    • I am trying to give access to one of our educators access to 3 forms in Zoho and she is not able to view the data - Access issue

      Hi Team, When I try to provide read access to one of our educators on Zoho for Pre-training , post training and Impact survey forms submit form access which also allows them to read , it does not show them data
    • How to book GST paid in zoho books

      hi, i am a new user to Zoho books and not able to book GST paid in books, kindly suggest how i can book it in books. thanks, siddharth
    • PUNJAB NATIONAL BANK (CORPORATE) INDIA - NOT AVAILABLE IN BANKING

      Dear sir, Kindly fix it. PUNJAB NATIONAL BANK (INDIA) is available but PUNJAB NATIONAL BANK (CORPORATE) is not available. Kindly enable this banking since we need to categorize the entries. Regards, Sanjay Jena email id/ user id : travewithmerchant@
    • Employment Contract / HRMS Documents - Zoho People

      How do I create customized HR documents for disbursal from Zoho People ? Example, say offer letters ? appointment letters ? Memos ? We want to be able to preset these in one or ther other form and issue them to employees who are in Zoho People.
    • Is it possible to create a word cloud chart in ZoHo Analystics?

      Hi there, I have a volume of transaction text that I would like to analyse using word cloud (or other approcah to detect and present word frequency in a dataset). For example, I have 50,000 records describing menu items in restaurants. I want to be able
    • Next Page