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

    • Change work hours per day for employees

      Hello, Is there a way to modify the work hours per day for employees in Zoho projects? This would be helpful for resource allocation to more accurately see when an employee who works 35 hours a week vs 40 hours has a full schedule. Thanks.

    • PROBLEMA AL CONECTAR EL DOMINIO

      hola buenas tardes hoy estoy tratando de crear mi registro y no me deja conectar el dominio  me dice que el dominio ya está vinculado a una cuenta y la verdad no tiene conectado el dominio a ninguna cuenta  tengo acceso al hosting y cpanel que se compro pero al revisar los dns estan apuntando al mismo hosting del panel  del proveedor del domini ... como hago para poder crear la cuenta con ese dominio, incluso cree un registro pero no  me deja vincularlo el dominio es integrasoft.co agradezco me ayuden  

    • Delay in delivery of emails

      I'm experiencing random delays for emails sent from Zoho account. Headers show that the message reached mx.zohomail.com almost instantly, followed by a delay of anywhere from 3-15 minutes (and counting). Please confirm whether this is a system-wide

    • Zoho Mail not working. Constant OTP

      Firstly, my emails have been playing up for over a year. They are struggling to send and I have to press Send a few time to make them going. They mostly hover with a loading note saying Sending. I emailed Zoho and they got it working, but now it is doing

    • Zoho Mail Storage Usage Discrepancy – Incorrect Storage Reporting

      Dear Zoho Support Team and Community, I previously raised a concern about inaccurate storage usage reporting in Zoho Mail but did not receive a clear or satisfactory response. To investigate further, I meticulously calculated the storage used by all folders

    • What Is ZOHO-Workplace? Why was I charged?

      Hi, Today my PayPal account was charged $12.72 for ZOHO-Workplace. The transaction ID is 15S32484H3826544W. What is this charge for? It is the first time I am seeing it.

    • Building a custom site

      do we have an option in Zoho to build custom sites like adding custom functionalities? want to make a site like https://trackscourier.com/jnt-tracking-ph/. Is it doable? Please assist.

    • Missing Payload Details

      Hi All, Does anyone know how to fix missing webhook payload data in the next step of the flow? Payload comes into the webhook -- All details here When i go to use the webhook data in the next step -- the majority of the payload data is missing

    • Numeric options in Decision

      Zoho really needs to add options for numeric comparisons in the Decision action. These are the ones that should be implemented: Greater than Less than Greater than or equal to Less than or equal to Equal to (although this is actually handled already)

    • Supercharge your VoC analyses with data from anywhere: Modules are now sources for VoC

      Dear customers, We hope you're well! Your customers talk about your brand, praise your service, criticize your offerings, or promote your business—literally from anywhere on the internet—and it has become strategically necessary to factor in all possible

    • Nouveautés Zoho Flow - Intégration SAP S/4HANA et SAP HANA

      Bonne nouvelle! Deux applications très attendues dans la galerie d’intégrations de Zoho Flow sont désormais disponibles : ✨ SAP S/4HANA ✨ SAP HANA Que vous gériez des opérations d’entreprise ou des systèmes de données, ces intégrations vous permettent

    • Record/edit view to pop-up simultaneously with button click from report of a different form

      I have two forms: Form A & Form B. Form B contains all of the same fields of Form A, plus a few additional fields. I've created a button in the report view of Form A that creates a new record in Form B and populates all the applicable fields, (I've posted the code I used below), but visually nothing happens on the screen. If I want to finish filling out the remaining fields in Form B, I have to navigate to the report and open the record. How do I get this new record to just pop-up when I click the

    • How to get NSE/BSE Stock Prices in Zoho sheets?

      I've been looking for a function that provides me with the NSE/BSE listed stocks price in Zoho Sheets like GOOGLEFINANCE in Google sheets, but I found none. Please help if there is any way to het stock prices?

    • INVOICE DONT HAVE AN INCOME ACCOUNT FIELD TO POST TRANSACTIONS

      INVOICE DON'T HAVE AN INCOME ACCOUNT LIKE THE EXPENSE ACCOUNT FIELD IN THE EXPENSE MODULE. PLEASE CAN YOU TELL ME WHAT TO DO TO ADD THIS FIELD AND FUNCTION TO POST IT TO THE RIGHT INCOME ACCOUNT. THANK YOU VERY MUCH

    • Error in Deluge script, but all should be OK

      I get an error when using the following deluge script (sensitive info changed with ***). This script should parse a projectnumber out of the subject or body text and put it in a custom field of the ticket. The error: Validation failed for the condition

    • Problems with clipboard paste into ticket comments

      Problem as title. Using Chrome get to paste contents of clipboard but submit gives 'you've exceeded the character limit of 30,000 for this comment' irrelevant of actual number of characters. Edge just pastes txt 'undefined' irrelevant of actual contents of clipboard All other areas of Zoho desk work fine with clipboard paste (i.e. new ticket description) it's just comments on existing tickets that seem to have problem. Was all working fine until early yesterday (14th) Client is Windows 10 Pro 1803

    • Mapping Issue

      since, Tickets are already mapped with the Requestors and when we map Requestors with Organization, then Tickets are not visible under that Organization. Kindly solve this issue.

    • New features and improvements in Desk's integration with Zia powered by GPT 

      Hi everyone, We’re pleased to announce several new enhancements in Zia Powered by GPT integration. These updates bring more customization options, improved response generation, and additional language support. Below is an overview of the enhancements

    • Painéis do Zoho CRM ajudam na Gestão Comercial?

      A gestão do departamento comercial é uma questão fundamental para qualquer empresa. Uma boa gestão proporciona previsibilidade, alinhamento e melhores resultados. Acredito que todos que adquirem uma plataforma de CRM buscam uma gestão ágil e eficiente

    • Adding transferwise.com as an online payment method

      Hi, I am not a fan of using Paypal or google pay, can we look at introducing transferwise.com as a payment method as i think it will work better in the corporate world. https://transferwise.com/ Cheers

    • How to Bulk-Update Sales Orders in CRM

      Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to

    • How do mass change start date and end date?

      You can mass do everything else, so maybe I'm missing something. But if I have a bunch of tasks and want to assign multiple tasks within a date set, how do I do that without doing them one by one?

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

      Hello Community, Trident for macOS has quite a few new features that will improve your business email communication. Let's take a quick look at them. Creating templates Earlier, you could save email drafts as templates in Trident. With the current update,

    • Products in time entry

      Morning, Is there a way to add the product field to the time entry layout? Giving us the ability to identify a product per time entry. Thanks Rudy

    • Zoho.eu and U.S. Cloud Act? Can U.S. request Zoho.eu data?

      Given the current political situation in the U.S. and possible near future implications for data privacy and security, I am curious about Zoho’s obligation to comply with the U.S. cloud act or other U.S. requests for private customer information from

    • Zoholics Europe Awards

      We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! This is your chance to shout about the amazing things you've created, connected, or achieved with Zoho's developer application!

    • Why "balance due" for the VOIDED INVOICE is not zero?

      We wonder why the "balance due" for the VOIDED INVOICE is not zero? For example our case, we issued invoice for a client for MYR1000, then after client request for cancellation. Client haven't make payment yet. So we marked the invoice as void. We think

    • Format handling error

      Hi, I'm having an issue when merging a document using a custom function when with decimal numbers. In my template preview, it's seems correct ,but when I do the merge and attach the file to a record, all types of docs aren't displaying the number correctly.

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

      Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Change the "From" email address easily. When composing or replying to an email,

    • Announcing new features in Trident for Windows (v.1.27.6.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your email communication. Let’s dive into what’s new! View and manage .pst files. A .pst (Personal Storage Table) file is an Outlook Data Storage file format for storing

    • Email limit reached

      I'm assessing whether zoho crm will work for our startup, however I tried to send emails to my leads and after 12 emails got the notification that email limit has been reached. That is ridiculously low. Whats wrong and how can you fix that. I am still

    • Importing Into Zoho CRM

      Do you have a list in Excel that you would like to import into Zoho CRM? If your administrator has not restricted your ability to import, the process is fairly easy to accomplish, but understanding the options can make everything go smoother. First you may need to prepare the spreadsheet Remove any extra rows from the top of the spreadsheet, like titles or blank lines. Row 1 should be the column headers. Row 2 should be where the data starts. Make sure that there is a column for any required fields

    • Analyze the Name of the Deal Owner and Created by

      I need to display the Name of the User who created a deal and the Deal Owner. Since both fields are lookups to the same table (Users), it defaults to the user record of the Deal Owner and I cannot display the name of who created it. I can generate the

    • Date Import Problems

      I'm trying to import products from csv/xls files, but I can't get the Sales Start Date field to import. I know the import is working because all the other information is imported, but the Sales Start Date field is left empty. I think it must be a format

    • Canvas and Related lists

      Hi, As much as I like canvas, when adding in a asection with related lists,it doesnt mimic the same functionality as the standard view within the CRM e.g left hand panel will show the module and total number of records. Is there a way of indicating this

    • New Search Function

      Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display which

    • Problem with the "Search" function

      Hi, I've been using Workdrive for a few days and lately, the files I added in Workdrive don't appear in the search. It looks like my latest files aren't indexed. Are you aware of this issue ? 

    • Getting error "invalid warehouse_id" when trying to update any transaction in Zoho books

      I got a message from Zoho saying that the Warehouse and Branch has been merged into one category "Locations" Once I migrated to this setup I was no longer able to edit any invoice / create creadit notes - got an error saying "invalid warehouse_id" I never

    • Return "kit_quantity" when fetching Kit items via "List all the items" API call

      I have been appreciating the new Kits feature quite a bit, it is exactly what we were looking for in Zoho to solve many pain points. However, there is 1 problem I am running into and that is the fact there is no stock information that can be pulled for

    • Automating Pricing in Zoho Inventory Based on Brandline Quantity

      I am currently setting up my Zoho Inventory system and would like to implement an automatic pricing feature for sales orders. We have created a custom field called "brandline" for our items. All products with the same brandline value should have the same

    • Next Page