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

    • How to search (web API) for a Calls record by phone number?

      Using v8 /Calls/search web api I'm unable to to complete a search request no matter how I use the api: When I try using "criteria=" I get: response: <Response [400]> response_json: { "code": "INVALID_QUERY", "details": { "reason": "the field is not available

    • [Free Webinar] Product Release Updates - 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

    • Zoho GenAI API Error Not a valid response from zia.

      Zoho GenAI API Error Not a valid response from zia.

    • Help me to retreive my Document

      Please help me to retrieve my documents from any date between 1st February, 2025 to 20th,March 2025 .it got mistakenly deleted on the 21 of March 2025 due to phone screen malfunction I earnestly await your positive response .thank you

    • how to change the page signers see after signing a document in zoho sign

      Hello, How can I please change the page a signer sees after signing a document in Zoho Sign? I cannot seem to find it. As it is now, it shows a default landing page "return to Zoho Sign Home". Thanks!

    • Look Up Field Type not available for events and tasks?

      Look Up Field Type not available for events and tasks?    

    • I cannot check out to Zoho People.

      When I tried to check out today, there's prompt that inhibits me to check out: To add entry in Attendance, log time for any of your jobs

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

      Bonjour à toutes et à tous, Ce mois-ci encore, tout s’est enchaîné à toute vitesse ! On vous fait un petit récap de ce qui a marqué ces dernières semaines. Zoho RPA est une solution robuste d’automatisation des processus, conçue pour s’intégrer aux systèmes

    • Different Transaction Series for Different Types of Sales

      Is there any way I can create multiple transaction series for different type of Sales? Say B2B-001 and B2C -001 for respective type of Sales.?

    • Unable to charge GST on shipping/packing & Forwarding charges in INDIA

      Currently, tax rates only apply to items. It does not apply tax to any shipping or packing & forwarding charges that may be on the order as well. However, these charges are taxable under GST in India. Please add the ability to apply tax to these charges.

    • Customer Advance Zoho Book API

      All I could find was Customer Payment API, it does not have facility to add customer advances, where those are not linked to any invoice as such. How to do it?

    • Even though the received amount+tax is equal to or lesser than the invoice value, zoho doesnt allow to record

      Even though the received amount+tax is equal to or lesser than the invoice value, Zoho mentioned the error- you've recorded more payment than the actual invoice balance. please check again. screenshot also attached.  You've recorded more payment than

    • Multiple deductions in invoice

      I issue invoices to a customer that include multiple deductions that I would like to track in different expense accounts. But that is not possible in Zoho Books as there is only one Deduction field and even that I don't have control over to assign it

    • #BiginnersTips | How to bulk update closing dates for multiple deals in Bigin

      Hello Biginners! Keeping your CRM data accurate is crucial for any business- big or small. One key aspect is ensuring that closing dates for deals are always up to date. Why? Because if a deal is closed but not updated, your dashboards and reports would

    • 采购里出现付款通知 的错误

      采购里面出现付款通知错误，怎么调整，我找不到路径，好像是ZOHO 自动生成的，请问怎么调整

    • {"code":1002,"message":"Statement of Accounts does not exist."}

      Hello Zoho team, I faced an issue while trying to POST a sales order from sap to zoho books, using the below data packet: {   "customer_id": "4322967000027451968",   "line_items": [     {       "item_id": "2154170000010847685",       "rate": "752.00",

    • Add Custom Fields only in Customer module and not on supplier module!? Is not there a way to do that!?

      I am trying to create custom fields on clients module but it also gets created on suppliers module; which of course does not make sense at all as a lot of custom fields are client or supplier specific but never both. I am missing something? This seems

    • Logging website service fees

      Hello, I do a lot of freelance work on sites like Upwork and Wyzant and others and those companies take a small cut from what I pay or what I earn and I am wondering what is the correct way to log this in my books. For example if I charge $55 per hour

    • How do i clear a liability account without making a payment?

      I have a liability account with a provision for an expected bill from previous years. However the bill never arrived and the provision/liability account with Cr balance has been carried forward for many years now. How do i know clear the provision made

    • 2 Transactions for single Expense

      I have make 2 payments and have 1 Invoice containing both the items. My Bank Feeds show 2 Transactions, How can i associate them with Single Expense? I tried adding them to Advance Payment, but advance payment I can only apply to Bills It seems. Why cant

    • Everything AI in Zoho Recruit – Webinar Recording Available!

      AI is transforming the way recruiters find, engage, and hire top talent. In our latest webinar, we explored how Zoho Recruit’s AI-powered features can help streamline hiring, automate workflows, and improve decision-making. Missed the session? No worries

    • Introducing the FTP task in Deluge

      Hello everyone, We're excited to announce the launch of the FTP task, a powerful addition to Deluge that enables you to effortlessly transfer files between various Zoho apps and your own servers. Unlike the invokeUrl task, which supports various HTTP

    • Custom widgets on Zoho one dashboard

      Is it possible to create custom widgets on the Zoho One dashboard? I see there is a widget name My Open Tickets to display open tickets in my view, but I would also like to have a widget to display unassigned tickets. A widget to display unfinished projects

    • Data privacy concerns

      Does Zoho team have access to my data in the database e.g. Balance Sheet, Bank account transactions, Profit & Loss statement etc.

    • Ability to Remove/Change Zoho Creator Admins via Zoho One Interface

      Dear Zoho One Team, Greetings, We would like to request a feature enhancement in Zoho One. Currently, it is not possible to remove or downgrade a user with the Admin role in Zoho Creator from the Zoho One admin interface. Unlike other Zoho apps where

    • Zoho Sheets

      Are they ever going to set up the feature "where I left off" just as you can do in Microsoft Excel online ? For me that is the only feature missing from Zoho sheets other than that I think they are terrific and use them every day. I only occasionally

    • Canvas Detail View Related List Sorting

      Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

    • Mass Update in Zoho CRM

      Hello, I want to update my past update records by using deluge on some conditions. anyone can please tell me how can I do it.

    • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

      Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?

    • Action requested: Retain your sales journey configuration in Path Finder

      Dear Customers, We hope you're well! As you might know, we're completely overhauling our journey management suite, CommandCenter, and are in the last leg of it. As a means of getting ready to go live, we will be announcing a series of requests and updates

    • search layout in new version

      Hello where is the menu for customizing search fields (module search layout) in the new zoho version (2016) ?? thanks nono

    • Zoho Marketplace Analytcis

      Hi Team, Our Zoho Marketplace Dashboard is not showing any data. What do you think we could do?

    • if i have zoho one can i upgrade some of my staff from crm to crm plus within my organisation?

      if i have zoho one can i upgrade some of my staff from crm to crm plus within my organisation? Or because I have many licenses of ZOHO ONE , IF I upgrade some staff to ZOGO CRUM PLUS. they will not be on the same organisat

    • The problem with Commerce ownership changing

      Hi, I am changing the ownership of the company and trying to delete the previous user-owner. I changed the owner of the company from user Tatiana to user Eugene. Eugene is the owner of the organization. It's OK. I am now trying to remove the user Tatiana.

    • Secondary Emails

      I am having issues deleting a secondary email address from a couple of our users and need help. When in Directory, manage email addresses, I click the trash icon by the email address and confirm I am trying to delete the email. I click continue and I

    • Kaizen #121 : Customize List Views using Client Script

      Hello everyone! Welcome back to another interesting Kaizen post. In this post, we can discuss how to customize List Views using Client Script. This post will answer the questions Ability to remove public views by the super admin in the Zoho CRM and Is

    • Zoho Books | Product updates | June 2025

      Hello Users, We’ve rolled out new features and enhancements in Zoho Books, from the option to record advances for purchase orders to dynamic lookup fields, all designed to help you stay on top of your finances with ease. Introducing Change Comparators

    • Widget Upload to CRM Fails with “Page Not Found” – Even with Correct Index Path

      I'm building a simple widget to export Contact data to CSV in Zoho CRM, triggered via a custom button. The widget uploads cleanly, appears in the widget list, and is successfully assigned to a Contact detail view via a custom button. But when clicked,

    • Account disabled

      I have an issue I need help with. Whilst trialing ZOHO CRM I created the following: Account1 (-------------) using m__ame@m__rg___s__i__.___.__ and 2 personal emails Account2 (-------------) using a personal email and 2 users _al__1@______________._o_.__

    • How can we manage the tags in ticket

      Allowing agents to use Tags indiscriminately can cause havoc. We could not find tag management where 1. The admin can create Tags beforehand for use by Agents 2. Permission can be allocated which roles/profiles can use existing tags or add new tags 3.

    • Next Page