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



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ






                                ご検討中の方

                                  • Recent Topics

                                  • Upgrade the Lato font to the Lato 2 font

                                    While there's not a major difference, I noticed that Zoho doesn't use the upgraded Lato 2 font but it instead uses the standard one. Lato 2 enhances the look of letters and numbers when you italicize them, among little things that get tweaked. Is it possible

                                  • Validation Rule (Date)

                                    Hi There,  Can any anyone help me with the validation rule? I'm trying to fire a rule whereby the End Date cannot be before Start Date.  Any takers?  Manoj Nair

                                  • Masked Field Type with Permission-Controlled Visibility in Zoho CRM

                                    Dear Zoho CRM Team, Greetings, We would like to request a new feature that would enhance data security and access control within Zoho CRM, especially when handling sensitive internal information. Use Case: Our team occasionally needs to store sensitive

                                  • TDS Filing

                                    Is there any option for automatic 26Q and 24Q filing in Zoho books. Even Tally has this option. Why don't Zoho has this ? Is there any customisation available for this ?

                                  • How to properly setup Databridge on Linux Server?

                                    Hello guys, i am running a Linux server on which I am installing the Zoho Databridge via command line. The Zoho tutorial ( https://help.zoho.com/portal/en/kb/analytics/user-guide/import-connect-to-data/databases-and-datalakes/articles/postgresql-3-3-2021#1_How_do_I_install_Zoho_Databridge

                                  • Running Balance in Account Statement.

                                    Running balance should come by default in the accounting statements but in ZOHO we need to customize every time to get the running balance in accounting statement. I did not understand, when the bank account statement opened from Bank Menu can show the

                                  • Haven't used banking function for years and now want to reconcile and clean up my account

                                    I'm in the UK and have been using Zoho Books for my private mental health practice since 2018. Up until recently, I've entered everything manually and not reconciled any items with my bank account. Every year, I run a report for that year and use that

                                  • invalid element hsn_or_SAC

                                    Hi, I am trying to record expense in Zoho expense. when submitting I am facing this issue invalid "element hsn_or_SAC" please help me with this. Regards, Abdul Hameed M

                                  • Configuración

                                    Hola acabo de instalar Zoho CRM y quiero configurarlo correctamente. Al respecto me surgen algunas dudas tales como la diferencia entre: Cuentas, posibles Clientes y Contactos. ¿Conceptualmente que son cada uno? ¿Como se se relacionan entre ellos? Si

                                  • Plug Sample #14: Automate Invoice Queries with SalesIQ Chatbot

                                    Hi everyone! We're back with a powerful plug to make your Zobot smarter and your support faster. This time, we're solving a common friction point for finance teams by giving customers quick access to their invoices. We are going to be automating invoice

                                  • Recap - Desk Story Series

                                    In our exploration of the Wheels of Ticketing Series, we kicked things off by diving into a fundamental element of Desk Ticketing: the fields. These fields serve as the building blocks that gather essential information about tickets, customers, organisations,

                                  • Customization of Chat Transcript Emails in Zoho SalesIQ

                                    Hi Zoho SalesIQ Team, I hope you're doing well. We would like to request the ability to customize the email template that is sent to clients when they request a chat transcript from SalesIQ. Currently, when a client clicks the button to receive their

                                  • Tip of the Week #60– Reduce response time with shared inboxes!

                                    When customer messages are scattered across different platforms and team members aren't sure who's responding, delays are inevitable. Slow responses frustrate customers and create a poor experience for your brand, especially when expectations are high.

                                  • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

                                    Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals

                                  • Hybrid project management in IT and software development services

                                    Project management models serve a wide range of audience, however the highest takers for Agile project management methodology are the IT and software services industry. The flexibility to develop and release software iteratively with continuous improvement,

                                  • Introducing Forms in Zoho Sheet

                                    We hereby bring you the power of ​forms in Zoho Sheet. ​Now, build and create your own customized forms using Zoho Sheet. Be it compiling a questionnaire or rolling out a survey, Zoho Sheet can do it all for you. Forms is an excellent feature that helps you collect information in the simplest of ways and having it in Zoho Sheet takes it a notch higher. Build Simple yet Powerful forms Building forms using Zoho Sheet is fairly simple. The exclusive 'Form' tab lets you create one quickly. Whether you

                                  • How to overcome Zoho Deluge's time limit?

                                    I have built a function according to the following scheme: pages = {1,2,3,4,5,6,7,8,9,10}; for each page in pages { entriesPerPage = zoho.crm.getRecords("Accounts",page,200); for each entry in entriesPerPage { … } } Unfortunately, we have too many entries

                                  • 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,

                                  • Issue with Missing Scope for Creating Service Report via Zoho FSM API

                                    Hello @Latha Velu , I am currently working on creating a connection to create a Service Report in Zoho FSM using the API. However, while configuring the required scopes, I noticed that the scope ZohoFSM.modules.ServiceReports.CREATE which

                                  • What's New in Zoho Inventory | January - March 2025

                                    Hello users, We are back with exciting new enhancements in Zoho Inventory to make managing your inventory smoother than ever! Check out the latest features for the first quarter of 2025. Watch out for this space for even more updates. Email Insights for

                                  • Overdue payments pending approval max

                                    I needed to validate update the email to pay for goods sold out, travel expenses and cars and vehicles for office, office supplies, properties purchase etc

                                  • How do I mass edit time entries?

                                    Since you can not filter or sort time entries by what has and has not been invoiced (you can only see the icon but not separate invoiced from non-invoiced), I would like all time to initially be entered in as un-billable and I can change to billable as I bill them. (since you can see this separation)  So my question is HOW do I mass edit this? Can it be done?

                                  • Zoho Booking Page Footer

                                    Is there any option available to add social media, like LinkedIn, on the Zoho Booking page?

                                  • Global Sets for Multi-Select pick lists

                                    When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

                                  • Custom SMTP is now available in Zoho Sign

                                    Hi there! Want to send Zoho Sign emails from your organization's or personal email server? Look no further! Zoho Sign has introduced custom Simple Mail Transfer Protocol (SMTP) for Enterprise users across all data centers. By enabling custom SMTP, you

                                  • Subform edits don't appear in parent record timeline?

                                    Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

                                  • Allow breakdown of per diem for meals provided

                                    Would it be possible to break the per diem down into what you get for each meal. The reason for this is we want to offer per diem but if a meal is provided by a customer or sales we need to remove this from the per diem bucket for that day. We break down

                                  • Bigin iOS and macOS app update: Link email messages to pipeline records.

                                    Hello everyone! In the latest version of the Bigin iOS(v1.11.9) and macOS(1.8.9) app, we have brought in support for an option to link email to pipeline records. This helps you to view emails specific to a deal, especially when a contact is associated

                                  • Help with SEO

                                    Hi There, I have recently published a site and added some Keywords in the SEO settings. Searching Google I currently don't find my site though. When do these settings take effect? In the SEO settings there is also a section "Sitemap" I can change settings for "frequency" and "Priority" What do these settings do? Kind regards

                                  • Assessment Field in Custom View

                                    Zoho recruit finally added the ability to filter Job Applications by Assessment Answers This is a very valuable addition to the Recruit But this is currently missing from the custom view This should be added to the custom view as well

                                  • Report Level Button

                                    Currently I couldn't find a way to add a report level button I think currently we can only add buttons/actions for records, but having custom report level button would be really beneficial Usecases Click to import/sync Data from On Prem Systems Click

                                  • Create collection from start integer to end integer

                                    I want create some ticket number. Starts at 1 and end at 10. I want the result to be a string 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10. Trying something like this but need the correct way write the start and end part. start = 1; end = 3; sequence = List();

                                  • Experience effortless record management in CRM For Everyone with the all-new Grid View!

                                    Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and

                                  • Importing Subform Data is Removed in Zoho Creator 6

                                    Previously It was possible to import Data to the Subform in Creator 5 This basic and mandatory Feature was completely removed from Creator 6 with no Timeline to add support for it How are we supposed to add our data if we want to use Creator? Manually?

                                  • Smart Document Automation:: From Zoho Projects to Zoho Writer – Merge, Edit, and Share

                                    Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

                                  • Zoho Desk - Cannot Invite or Register New User

                                    Hi who may concern, we encountered a problem that we cannot invite user or the visitor cannot register for a user at all through our help center portal, with the snapshot shown as below and the attachement. It always pops up that "Sorry, Unable to process

                                  • [ZohoDesk] Improve Status View with a new editeble kanban view

                                    A kanban view with more information about the ticket and the contact who created the ticket would be valueble. I would like to edit the fields with the ones i like to see at one glance. Like in CRM where you can edit the canvas view, i would like to edit

                                  • Knowledgeable Image Quality is very poor, any recommendations how to improve this?

                                    Hi All, We are looking at migrating our current knowledge base to Zoho so it can be kept in one location. Our current KB utilises a lot of images to try and make it easier for users and less wordy. Unfortunately, when I upload an image within an article,

                                  • Desk - CRM Integration: SPAM Contacts (Auto Delete)

                                    SPAM contacts is a useful feature, but when the CRM sync is used, it is very frustrating. When a contact is marked as SPAM on Desk, I wish to do the same on CRM. When a SPAM contact is deleted, I would like it deleted from CRM. The feature looks half-baked.

                                  • Create a draft in reply to an email via Emails API

                                    Hi, I’d like to use the outgoing webhook to automatically create a draft reply to incoming mail. How can I use the Emails API to create a draft reply that is linked to an existing email thread? I couldn’t find the relevant method in the documentation.

                                  • Next Page