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


    • Sticky Posts

    • Kaizen #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Nested Sub-forms (Subform within subform)

      Hi Team, Whether there is any possibilities to add sub-form with in another sub-form like Main Form       -> Sub form A             ->Sub form B If we tried this, only one level of sub form only working.  Any one having any idea about this? Thanks Selvamuthukumar R

    • Restore Trashed Records Anytime Within 30 Days

      Access the recycle bin from the Data Administration tab under the settings page in Zoho Projects, which gives better control over the trashed data. When records like projects, phases, task lists, tasks, issues, or project templates are trashed, they are

    • Avoiding Inventory Duplication When Creating Bills for Previously Added Stock

      I had created several items in Zoho Books and manually added their initial stock at the time of item creation. However, I did not record the purchase cost against those items during that process. Now, I would like to create Purchase Orders and convert

    • Applying EUR Payments to USD Invoices in Zoho Books

      Hello, I have a customer to whom I issue invoices in USD. However, this customer makes payments in both EUR and USD. I have already enabled the multi-currency feature in Zoho Books Elite, but I am facing an issue: When the customer makes a payment in

    • How to prevent users from editing mail merge templates from Zoho crm

      We want users to use public mail merge templates. They should not be able to edit templates but only preview data merge and send emails. We did prohibit "manage mail merge template" in the user profile. But they can still edit the template in the zoho

    • Customer Addresses cannot be edited/deleted in invoices

      In the invoices we have an option to change the customer address and add a new address Now I dont know why for some reason if we add an address through this field, the address doesn't appear in the customer module We cannot delete the addresses added

    • Custom Fields connected to Invoices, Customers, Quotes, CRM

      I created the exact same custom fields in Books: Invoices, Customer, Quotes, and in CRM but they don't seem to have a relationship to one another. How do I connect these fields so that the data is mapped across transactions?

    • Accelerate Github code reviews with Zoho Cliq Platform's link handlers

      Code reviews are critical, and they can get buried in conversations or lost when using multiple tools. With the Cliq Platform's link handlers, let's transform shared Github pull request links into interactive, real-time code reviews on channels. Share

    • Heads up: We're going to update the VAT Summary table's visibility (UK and Germany Editions)

      Hello users, Note: This change only applies to organisations using the UK and Germany editions of Zoho Books. Currently, if you've enabled the VAT Summary table in a template, it will be displayed only in PDFs sent to your customers whose default currency

    • Partial payment invoicing

      Greetings I have questions related to payments and retainer invoices: 1. When I want to issue a partial payment invoice, I can't specify the portion to be paid or already paid, then balance to be shown as Due. 2. Retainer invoice is only available as

    • Inputting VAT Pre-Registration expenses for first VAT Return

      Hi Zoho, I've just registered for VAT and am setting up Zoho to handle calculations and VAT return submissions. I'm struggling to figure out how to input the last 4 years worth of expenses into Zoho so that they're calculated in the VAT module. When I

    • Anyone else experiencing very slow loading of pages in Zoho Projects?

      I reported this yesterday only to be told there are no issues but is anyone else experiencing stupidly slow loading of pages. On our loading screen, it is taking often as long as 60 seconds to load a page and just stays on this screen for ages! Other

    • Zoho Desk Lookup Field Reporting

      Thank you for adding the ability to add additional lookup fields for desk tickets. My question is how do you report against these fields? For example: Associating related accounts to the primary desk ticket account, I am not able to add the lookup fields

    • Integrating asana will cause notification messages to pop up continuously

      When I create or edit a task in Asana, the Asana bot keeps updating messages to group chat, which causes the cliq to keep popping up notifications.

    • Entire notebook that had notes has disappeared

      I don't know how tf this happened. All I did was uninstall and reinstall the mobile app after fixing a bug I had. After I reinstalled the app, everything was synced back except for one folder which had a bunch of notes in it. None of those notes are in

    • My site has disappeared from web builder

      www.mproperties.uk My site above is still working. However it has completely disappeared from my Zoho sites' web builder. I am therefore unable to edit my site whatsoever. Please help.

    • Kaizen #147 - Frequently Asked Questions on Zoho CRM Widgets

      Heya! It's Kaizen time again, folks! This week, we aim to address common queries about Zoho CRM Widgets through frequently asked questions from our developer forum. Take a quick glance at these FAQs and learn from your peers' inquiries. 1. Where can I

    • Trying to trigger email notification based on rollup summary field

      Hi there, I'm trying to trigger an email notification via Workflow Rules wherever the rollup summary field "Total Shipments" goes from empty to not empty. However this field is not available from the picklist of options in the Workflow rule. Can anyone

    • zia data enrichment - switch to webamigo Extension

      Hello, I have so far used data enrichment via Zia. Now I have installed the Webamigo extension to expand personal data. Unfortunately, nothing has changed after the installation; are there any additional steps needed to switch from the previous method

    • Export Timeline

      With the new Timeline features, it would be really helpful to have the option to export a timeline. When handling customer complaints, having the full breakdown of everything that happens on a module is great but we usually have to send this to another

    • Interactions Tab in Zoho CRM: A 360° Omnichannel View of Every Customer Touchpoint

      Hello Everyone, Hope you are well! We are here today with yet another announcement in our series for the revamped Zoho CRM. Today, we introduce Interactions Tab a new way to view all customer interactions from one place inside your CRM account. Customers

    • How to resubscribe a contact marked as "Unsubscribed (Marked by Recipient)" without using a form?

      Hello, I have a question regarding Zoho Marketing Automation functionality. Is there a way for an administrator to change the subscription status of a contact marked as "Unsubscribed (Marked by Recipient)" back to "Subscribed" without using a form? Ideally,

    • Linkedin: when Zoho Social is going serious with it?

      Hi, it's been said in the past that Linkedin related features in Zoho Social were well behind those of other social networks because of limitations imposed by the platform. Now that we see around my tools (take taplio.com) frankly outpacing ZSocial on

    • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ(7/24)

      ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 7月開催のZoho ワークアウトについてお知らせします。 2ヶ月ぶりに、渋谷にて「リアル開催」します！ ▷▷詳細はこちら：https://www.zohomeetups.com/20250724Zoho ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho ワークアウト」を開催します。 Zoho サービスで完了させたい設定やカスタマイズ、環境の整備など……各自で決めた目標達成に向け、

    • How to get fields centered in a form?

      Is it possible to center fields in a form? Some of my forms do some don't and it is really not aestheticly pleasing?  Any help would be greatly appricated. Thanks, Michael McNeill 

    • Make Packages from multiple sales order of a single customer

      Our customers sends orders to us very frequently, some times what customer wants is to ship items from 5 to 6 sales orders in a single shipment. it will be very nice if, zoho can implement this function, in which we can select items from other sales orders of the customer.

    • Webhooks and Integration

      Hey, I was looking to create automation using webhooks or something equivalent of a trigger based mechanism, to connect it as an integration. But I don't find any relevant APIs to setup these webhooks/notifcations for the "Zoho Books". Can anyone please

    • Zoho Books X Zoho Expense

      Hello there, Please can you tell me if it is possible to sync from Books to Expense? I much prefer the Expense reports to that of Books and the Credit Card feeds work via expense and not Books for me. However I find books is much better to deal with the

    • ABILITY TO LOG INTO CUSTOMER PORTAL

      I think it would be very helpful to have a button in Zoho Books to be able to see the customer portal so we can see what they see to help them navigate through the portal. Many times, the customer will call about the portal, but without visibility into

    • Sort, filter & save views for BOOKS PROJECTS

      Thanks for all the updates. Our firm uses the module for simple internal project accountancy. This means we do everything from the Projects Section but this isn't user friendly at all. You can't do anything with customized your own fields which basically

    • edit input format in custom field - sales order

      hi, I want to integrate a custom field (multi line text box) in our sales order. It needs to show upper case and lower case letters, numbers, spaces, hyphens and "/". What do I need to put in the custom format to configure these signs? Thanks, Tina

    • This transaction type cannot be matched with a line on the statement.

      When using the books API https://www.zohoapis.com/books/v3/banktransactions/uncategorized/${transaction.transaction_id}/match I get this error "This transaction type cannot be matched with a line on the statement." What I'm doing is for the uncategorized

    • Full Text Customization & Translation in SalesIQ Chat Widget Settings

      Dear Zoho SalesIQ Team, Greetings, We would like to request an important enhancement to the chat widget customization options in Zoho SalesIQ. Current Limitation: At the moment, only some of the text shown in the chat widget is editable or translatable

    • Timesheets

      I wanted to create the timesheets remainder for our team mates who miss out the weekly timesheet entries. While creating the email templates, I couldn't see anything related to timesheets. Since it shows projects Can you help me find and build a one

    • Can we embed a Kanban Type of report using iframe too?

      I tried embedding a report as iFrame but it only appear as List View. It would be helpful if can also embed a Kanban Type of report.

    • Weekly Tips : Save Time with Saved Search

      Let's assume your work requires you to regularly check emails from important clients that have attachments and were sent within a specific time period. Instead of entering the same conditions every time—like sender, date range, and attachments included—you

    • Big Things Just Dropped in the SalesIQ Universe: Top Upgrades You’ll Love in Nova’25

      Nova'25 has landed, and it’s packed with meaningful upgrades to help you engage smarter, work faster, and scale with ease. Whether you're into proactive messaging, smarter automation, or better admin control, there's something here for everyone. Here's

    • Hidden Fields with Data Pre-Population and Notification Integration in Zoho Bookings Forms

      Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement for Zoho Bookings forms that would improve data management and workflow efficiency: the ability to create hidden fields with pre-populated data. Current Functionality: Zoho Bookings

    • Tip #37 – How to ensure compliance and accountability using Advanced Session Audit – ‘Insider Insights’

      Hello Zoho Assist Community! This week we will be discussing how to strengthen your remote support operations with better visibility and control. Let’s say your support team handles a growing number of remote sessions each day. At the end of the week,

    • Replace an existing zoho show file with an uploaded one.

      For Zoho WorkDrive Upload API method, I have override-name-exist option, which I can use like this: curl https://www.zohoapis.eu/workdrive/api/v1/upload \ -F "filename=mypres.pptx" \ -F "parent_id=j3tzq1ae09c0cd91540df8d01670af05b657e" \ -F "override-name-exist=true"

    • Next Page