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

      • This festive season, offer discounts with coupon code support in Stripe Checkout

        Hello form builders! It’s the festive season, the perfect time to spread joy and great deals! Now, with Zoho Forms’ latest enhancement for Stripe Checkout, you can do exactly that with coupon codes! Your payment forms integrated with Stripe Checkout can

      • Cómo creo una factura negativa o de abono?

        NEcesito anular una factura y crear una nueva igual pero en negativo. El sistema no me lo permite

      • Power of Automation::Streamline log hours to work hours upon task completion.

        Hello Everyone, A Custom Function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as to when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-

      • CRM : Function to add user name to text field

        I have a lookup field in a module that is linked to the CRM users so we can assign a Project Lead to the customer. Sadly Zoho Marketing Automation doesn't sync Lookup fields so I need to extract information from the lookup to text fields: Lookup field

      • Zoho CRM - Restrict Login based on work hours

        Hi there, I'm wondering if we can restrict users to login during works - For example the users would be able to login from 8am to 5pm. I have seen the IP address restriction - the only downfall is what if the customer has dynamic IP. thanks Jiri

      • Tips and Tricks #46: Customize themes and templates using Show's Master View

        Hi All!  Let's say you want to revamp your presentation and make changes to its visual design. You can do this easily using the Master Slide and its associated layouts. The Master Slide stores information about all the layouts used in the presentation.

      • Sheet View in CRM portal

        Hi, When will it be possible for my CRM portal users to edit/add records with Sheet View? George

      • What's New in Zoho Invoice | July - September 2025

        Hello everyone! We’re back with the latest updates and enhancements we’ve rolled out in Zoho Invoice from July to September 2025. Here’s what’s new this quarter: Introducing the Singapore Edition in Zoho Invoice Share Invoices through WhatsApp GST 2.0

      • Alert: Audio Call Support to be discontinued for Old Live Chat Widget from December 31, 2025

        Action Required: Upgrade to the New SalesIQ Live Chat Widget We're reaching out with an important update regarding the SalesIQ Live Chat Widget that requires your immediate attention. Effective December 31, 2025, audio call functionality will no longer

      • multiple contacts for one account

        We currently use Zoho CRM where each Account represents a club or organization, and each Contact represents a manager or owner. However, some of our managers own or manage multiple clubs, and Zoho only allows a contact to be linked to one account at a

      • Rich text Merge field - Not using font specified in HTML

        I have a rich text merge field in a writer template which is creating a table. I have chosen to use this method instead of a repeat region because I need to specify specific cell background colours which change every time the document is created. The

      • ヒートマップ詳細設定について

        はじめまして マーケティング担当の浅田です。 PageSenceのヒートマップ設定について質問です。 単一ページ毎の設定は上手くできるのですが 詳細設定にて、トップページのURLを含ませ全体のヒートマップを計測できないか試したところ お知らせ：データを受信していません。と表示されてしまいます。 トップページURLで始まるページの条件も試しております。 全頁を反映させたいと思い、詳細設定を上手く設定できたらと考えております。 どなたか詳しい方がいらっしゃいましたら、教えて頂けませんでしょうか 宜

      • Automatic category assignment

        Hi, I’d like to ask if there is a way to automatically assign an expense category based on the recognized Merchant. What would be the simplest way to set up automatic category assignment? Alternatively, is there an option to first choose the category

      • Experience with Zoho Vertical Studio

        I'm considering Zoho Vertical and would love to hear from some devs who've been using it. The Zoho ecosystem is pretty solid, so I assume the experience has been pretty good, but sometimes Zoho has its quirks. Overall, has your experience been positive?

      • LinkedIn Chrome Extension

        Hello - I believe it is a known issue that the LinkedIn extension Resume Extractor has stopped working and they are working on potential fixes. Wondering how others users are finding this issue and if there are any better workarounds for this issue? It

      • Advance PDF creation from CRM data

        I'm trying to create a PDF export of data in the CRM. My problem is I want a pretty complicated format for the data. I'm trying to export multiple modules worth of data, with nested one-to-many relationships between the modules. Along with that, I want

      • Sub-Form Padding in CSV Export

        Hi, When you use the Sub-Form, and for example you have a Date Field on the Main Page, then Option 1 and Option 2 fields on the Subform, when you export this to CSV the Date column will only have the Date in 1 row, the first row, it would be nice to pad

      • More Formula Functions

        Hi, I would like for example to be able to have a Date Field and Formula Fields, and then in the Formula Fields I would like to grab just the Month of the above Date Field or the Week Number of the above Date Field. So more "Functions" than the current

      • File upload size limits

        I am designing a contact form in Zoho Creator with File upload facility. I am not sure where and how to set the following properties for the same: Allowed File Types Maximum Size of the Attachment Number of Attachments

      • Composite Services and Account Tracking

        I am looking to garner support/request the ability to make composite services. A quick search in the forums brings up multiple requests for this feature. I fail to see why an item is mandatory while services are optional. I also would like to see the

      • All operation codes getting Not applied in WO-TT22J1025WOR0471, SR-TT22J1025PRE0423,FOR VIN-W1K6G2AB2SL005130.

        Dear Support Team, Please refer attached screenshot. All operation codes getting not applied in work order. Request you to please check and update ASAP.

      • Exclude Segment from Campaign Recipients

        I've created two Segments in order to separate Non-Marketing Contacts from Marketing Contacts. I'd like to send an Eblast to all Marketing contacts in my lists, but when I go to select Recipients, I have two options: 1. To Choose Lists to Send to; 2.

      • Reschedule Multiple/Mass Calls at Once

        When we go into a Call record, we have the option to "Reschedule Call." How can we select multiple Calls at once from the Activities tab and Reschedule them? The big use case for us: We have many leads that our reps are supposed to call on a daily basis.

      • Option to Empty Entire Mailbox or Folder in Zoho Mail

        Hello Zoho Mail Team, How are you? We would like to request an enhancement to Zoho Mail that would allow administrators and users to quickly clear out entire folders or mailboxes, including shared mailboxes. Current Limitation: At present, Zoho Mail only

      • I want to Make the due date of the project appears automatically

        hello everyone I want to know if the zoho projects app can add automatically the END DATE of the project I added the duration, start after dates of each tasks in the project template & the starting date of the project itself and the end date of it doesn't

      • Drag 'n' Drop Fields to a Sub-Form and "Move Field To" Option

        Hi, I would like to be able to move fields from the Main Page to a Sub-Form or from a Sub-Form to either the Main Page or another Sub-Form. Today if you change the design you have to delete and recreate every field, not just move them. Would be nice to

      • Deluge Tips & Tricks: Mastering dates and times

        Hello everyone! We're bringing back our Deluge Tips & Tricks series, where we show you how to make the most of Deluge for achieving a wide range of use cases. Working with dates and times is a fundamental part of almost any business application. Whether

      • Adding a Button in a Form in Zoho Creator App

        Hi I want to know how can I add a Button in Zoho Creator form. I have options that I select from a multiselect options and I want the button to add those selected options in a Subform. I do not want to add on a Page Builder I want it inside a specific

      • Internal Exception for Creator function

        I have been running a script successfully for several days using the scheduler in my application. Now today it suddenly creates and Internal Exception error. Nothing has changed about the script. The data is still retrievable from the web service it is using. Why would this suddenly be happening for no apparent reason? Also noticed that my usage logs are not up to date. Is something changing behind the scenes?

      • How to Set Up a Custom Domain and Customize Homepage

        Hello, I am experimenting with Zoho Creator to build applications for my own use case and have encountered a couple of issues: 1. Custom Domain Access: Is it possible to access my Zoho Creator application through a domain that I own? If so, how does the

      • Announcing new features in Trident for Mac (1.26.0)

        Hello everyone! Trident for macOS (v1.26.0) is here with new updates to securely manage your passwords, locally save your emails, and protect against emails with suspicious URLs. Let's take a quick look at them. Manage passwords with Zoho Vault eWidget.

      • Default Value on a Number

        Hi, I would be nice to also be able to set the Default Value for a Number Field, not just the Initial Value shown, so if not on the screen so not enetred it can have a value of 0 for example. Thanks Dan

      • Having trouble fetching contents of Zoho Connect Feeds using the API, requesting alternative API documentation.

        I'm trying to retrieve feed/post data from Zoho Connect using the API but facing challenges with the current documentation. What I've tried: OAuth authentication is working correctly (getting 200 OK responses) Tested multiple endpoints: /pulse/nativeapi/v2/feeds,

      • Tip#45: Custom Tags and Cluster Tags

        Tagging your work items helps categorize and label work items within your Zoho Sprints workspace. Now, this feature is expanded across multiple modules, along with the introduction of cluster tags that offer an advanced tagging mechanism. Manage Tags

      • Extensions 101 webinar series: Build, integrate, and monetize with extensions

        Attention developers! Are you ready to take your extension development skills to the next level? We're excited to bring back the Extensions 101 webinar series with an expanded lineup of Zoho products and an introduction to more platform features. Last

      • [Free Webinar] User Management in Zoho Creator - 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

      • A couple of minor enhancements to Workflows

        Last updated on September 17, 2024: These enhancements were initially available for early access, and we've now enabled them for all users. We are elated to announce a couple of enhancements to custom functions in our Workflows! Say hello to: "Source"

      • Business Continuity - Disaster Recovery

        I know about the Zoho CRM backup .zip files, however, this doesn't include any of the infrastructure with like custom fields or custom modules. I am curious on what everyone has in place for a true backup or what your plan is if your Zoho instance were

      • Narrative 11: Are your customers happy?

        Behind the scenes of a successful ticketing system: BTS Series Narrative 11: Are your customers happy? Happiness isn't just something you experience; it's something you remember. Hear your customers' voices by enabling customer happiness ratings in Zoho

      • 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

      • Next Page