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

    • Multiple images

      Hi Is there a way to insert multiple images in one image record or any way that instead of one image, I could upload 5 to 10 images together. Looking forward for a solution. Regards

    • Zoho Projects - Custom Objects

      Hello, is there the ability now, or in the near future, to add custom objects to Zoho Projects? The requirement here would be to have the ability to track change requests to a project's budget. The idea here is to have the ability to create a custom Object

    • Access CRM Variables from Formula field

      Is it possible to use a CRM variable (defined in Developer Space -> CRM Variables) in a formula field for calculations ?

    • Announcing Bigin India Meetups Across 8 Cities: July 29 - Aug 07

      Hello Biginners, We've got some exciting news to share! We're hosting our first round of Customer Meetups for 2025 in India, from 29th July - 9th August. Whether you're a Bigin newbie or a seasoned pro, this is your chance to meet customers from your

    • Why isn't there an Expense description field / column?

      Hello! I'm new to Zoho Books and accounting. I'm surprised there isn't a proper expense description field (and column in the overview "all expenses" page)? I thought this was a given in accounting, as visualizing expenses facilitates tracking them down?

    • New in Zoho PDF Editor: Watermarks, password protection, signature collection, and more.

      Hi Zoho Sign users! We are delighted to introduce the latest enhancements to Zoho PDF Editor, designed based on user feedback and feature requests. This update enables you to reorder, extract, and rotate PDF pages, add watermarks, and collect signatures.

    • Cant't update custom field when custom field is external lookup in Zoho Books

      Hello I use that : po = zoho.books.updateRecord("purchaseorders",XXXX,purchaseorder_id,updateCustomFieldseMap,"el_books_connection"); c_f_Map2 = Map(); c_f_Map2.put("label","EL ORDER ID"); c_f_Map2.put("value",el_order_id); c_f_List.add(c_f_Map2); updateCustomFieldseMap

    • Printed Reports, Increase Font SIZE

      I need to send some printed copies of financial reports to my attorney. The reports print out with microscopic fonts. How do I increase the font size so that a normal human can read the text? Every other accounting app can do this so I imagine I have

    • Avoid email sending!

      Hello, Thanks you Zoho for the wonderful apps you provide. Question: Is there a way to disable sending emails when: - creating an estimate or billing. Thanks Tommy

    • Need to show discount before total after subtotal

      Need to show discount before total after subtotal on my estimate template (see attachment)

    • Email a "thank you" note for this payment is NOW checked by default

      Hello Team, Just noticed that Email a "thank you" note for this payment is now checked by default. I tried searching in Preferences and there is no way to turn this off. I do not want this to be the default. Is there a way to turn this off?

    • End-to-end services hours

      We are trying to determine the best method of quoting service hours on quotes but only present the sum amount to a customer, without losing the tracking of quantity of hours for invoicing purposes. Does anyone have a good method they have determined?

    • Specific Approval Question

      Hi everyone, Just a quick question here. I have located the "Approval Type" in the preferences, which is great, and I am sure we could make use of it. However, I am trying to understand how I can implement an approval "workflow". The business call it

    • Zoho Books - Show Discount Totals When Greater Than Zero

      Hi Books Team, I understand that to show or hide discount amount on a Quote or Invoice, I need to use different templates. It would be a great quality of life improvement for users if we had an option to show or hide the discount amount at line item and

    • Specifying a filename for Schedule Reports

      Is it possible to specify a filename to use with scheduled reports? For example: With a general ledger report, instead of general_ledger.pdf I would like to include the date the report was generated in the filename so it is called general_ledger_202

    • Need to upsert "Created Time" field in Leads Module

      I am in the process of implementing Zoho CRM for my business. I need to modify the "Created By' field to reflect the actual date/time the lead was captured in my original Excel file. Otherwise, my conversion velocity data will always be inaccurate, which

    • HTML for confirmation email

      Hi, After a prospect submitted the Zoho form, we want to send a confirmation mail. In this mail we want to add our email signature. However, while this is possible in Zoho CRM this doesn't seem to be an option in Zoho Forms. Also an html editor is not

    • Fire a webhook when the user gets access to portal

      Hello, We would like to know if there is any way in which we can automate a webhook call if the user accepts the portal invitation that Zoho sends by email. The customer module does have the option to trigger webhooks when a customer is created, updated,

    • Enable History Tracking for Picklist Values Not Available

      When I create a custom picklist field in Deals, the "Enable History Tracking for Picklist Values" option is not available in the Edit Properties area of the picklist. When I create a picklist in any other Module, that option is available. Is there a specific reason why this isn't available for fields in the Deals Module?

    • Creating Payrun summary by fetching values from the employee payruns and adding them

      I am trying to make a processing payrun module. I want on Form load to autofill payrun summary eg Total Deductions, Total employer contributions etc by fetching one value after the other in the employee payrun information. So it should loop through the

    • Feature Request - Zoho Books - Add Retainer Invoices to CRM/Books integration

      Hi Books Team, My feature request is to include Retainer Invoices in the finance suite integration with Zoho CRM. This way we will be able to see if retainer invoices have been issued and paid. I have also noticed that when the generate retainer invoice

    • Books <-> CRM synchronisation with custom Fields

      Hello, We are synchronising Books Customers with CRM Accounts. In CRM Accounts I set up last year a "segments" multiselect field shown below In Books, I set up a custom multi-select field with the same value as in the CRM And set up the synchronisation inside Books. Want to synchronise the Books Segments with the CRM Segments, but the later doesn't exist, and another non-existing is there ?! First, I don't understand where the field Segmentation is coming from. Second, I set CRM Segmentation to sync

    • Edit Reconciled Transactions

      I realize transaction amounts and certain accounts cannot be edited easily once reconciled, but when I audit my operational transactions quarterly and at the end of the year sometimes I need to change the expense account for a few transactions. To do

    • Request to Customize Module Bar Placement in New Zoho CRM UI

      Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive

    • Sending campaigns from other server

      Hi, Is it possible to send campaigns from another server so customers can see mail direct from our company (Corrata) and not from ZCSend.net? Thanks, Tim

    • Edit a previous reconciliation

      I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.

    • Admin and Dispatcher Users show as Field Technicians in Dispatch Module?

      Hi Zoho, Our Admin and Dispatch user both show up as Fied Technicians / Field Agents in the Dispatch module, but they most certainly should not be assigned to any of the work orders and service appointments. These users are NOT service resources. How

    • Don't understand INVALID_REQUEST_METHOD when I try to post up an attachment

      When I make the POST request (using python requests.post() for files): https://www.zohoapis.com/crm/v8/Calls/***************01/Attachments I get this response: r:{ "code": "INVALID_REQUEST_METHOD", "details": {}, "message": "The http request method type

    • Zoho Payroll: Product Updates - June 2025

      This June, we’re taking a giant step forward. One that reflects what we’ve heard from you, the businesses that power economies. For our customers using the latest version of Zoho Payroll (organizations created after Dec 12, 2024) in the United States,

    • View Products (items) in Contact and Company

      Hi, I would like to know if there is an option to view all the products /(items) that were inserted in the pipeline deal stage for exemple "Win Pipeline" within the company and contacts module section? For instance, view with the option filter for the

    • Update subform dropdown field choices - on load workflow

      Hi, I have a "Check In" form that has "Contacts" subform and a "Tickets" subform. When the form is loaded, I want to populate one contact and the number of tickets. I want the "Contact" field in the "Tickets" subform to have the choice of "Contacts."

    • Upload Zoho Inventory Item Image by API

      itemID = item.get("item_id"); organizationID = organization.get("organization_id"); resvp = zoho.inventory.getRecordsByID("items",organizationID,itemID,"zoho_inventory_conn"); info resvp; image_file = invokeurl [ url: "https://t4.ftcdn.net/jpg/03/13/59/81/360_F_313598127_M2n9aSAYVsfYuSSVytPuYpLAwSEp5lxH.jpg"

    • Salesforce to Zoho One Migration

      HI, I am about to start a migration from Salesforce to Zoho One I would like to know the best practise for this, my current thoughts to the approach is 1) Create fields, modules as required for migrating data 2) migrate Data 3) go live Will this approach

    • Zoho Expense Integration with Zoho Books

      I want to know what flexibility do i have in selecting the chart of accounts which get a hit whenever we are posting any expense or advance in zoho expense?

    • Custom Function to Update Ticket based on Subject of Ticket

      This may be pretty simple but I'm having issues with getting a custom function to fill out custom fields based on the subject of a ticket and not the body of a ticket. Basically we need to fill in the PO number and Item ID custom fields, both of this

    • Incoming 'Message' data via WhatsApp appears empty

      the Incoming 'Message' data via WhatsApp appears empty; instead of customer messages, I only see CRM system notification messages are being displayed. I have seen 3 messages like this since yesterday it seems that in 'All Message' the message snippet

    • Handling Automatic Replies in Desk

      We send out email campaigns (currently via Klaviyo) and naturally we receive "Automatic Replies" to these mass email campaigns. These responses are all being routed to Zoho Desk. We get two types of "Automatic Replies" Type 1) Customer is out of the office/holiday

    • Zoho Mail API Error EXTRA_KEY_FOUND_IN_JSON

      I have a workflow set up in Pipedream that uses the Zoho Mail API to send emails from my account. It's worked without issue for months but today I'm getting the following 404 error for every email I try to send: { "data": { "errorCode": "EXTRA_KEY_FOUND_IN_JSON"

    • 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

    • Next Page