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

    • UPI QR Code in Invoices

      Hi, It would be easier to make payment, if UPI Qr code is generated by Zoho Books and shown in the invoice itself.  This will promote digital payments and also makes it easier for customers to pay. It would be even helpful, if QR code contains the invoice

    • WebDAV support

      I need WebDAV support so that I can upload/download (and modify) documents from my local file system. Is anything planned in his direction?

    • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

      We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

    • Zoho Inventory Item History

      Hi Zoho Inventory Team, I 've been testing the History feature on Inventory Items in a demo system and I noticed that when I changed the value of a field to a new value, the history just says "updated by - user1", it doesn't say what what field was changed

    • Filter Images in Work Drive

      Hi, what is the best way to be able to filter files by multiple descriptions, for example, the name of a person in the photo as well as, an item in the photo and other descriptions? With labels it looks like you can only select one label at once but this

    • Flow not working when trying to Create a Merged Doc with info from a custom CRM module w/ subform

      I am having a problem creating a flow that gets its info from a webhook connected to a button in a custom module in Zoho CRM. I have made a template in Writer that follows: This is a clone of  the template in the CRM mail merge which works perfectly if i do it manually through there. My flow gets the custom module entry id through a webhook, then fetches the module entry data, and creates a merge document from that data. I know the webhook and the fetch work because if i replace the "create merge

    • Smart Scheduling via Agent Confirmation

      We’re excited to introduce a smarter and more streamlined way to manage dispatched service appointments in Zoho FSM! Feature Highlights Field agents can now approve or reject service appointments assigned to them—helping reduce unnecessary workload and

    • How to delete Inactive users?

      We want to delete inactive users from our system, but went you deactivate still the names are shown at the inactive section. How to get really rid off these names? Thanks for your response! Fabian van den Barselaar

    • Help me format my signature in zoho mail

      I need to set up my signature in zoho mail then send the format to other colegues to set it up by themselves. I have isues setting up my 5 logos one after another as I am not able to give sapce between logos. After setting up my signature with logos there

    • Can i integrate bigin with google voice?

       I make all my calling through google voice to seprate my personal line from business. I want to log my calls with customers automatically but i domt see anywhere where i can do that. Any help? Im pretty sure i wont be able to. Sad

    • Custom Field for Customer ID in Zoho Commerce's Customer Section

      Hi everyone, I’m wondering if it’s possible to add a custom field in the "Customer" section of Zoho Commerce. Specifically, I need to include a "NIF" or "Customer ID" field, as it's mandatory for invoicing in Spain. I know this can be done in Zoho Inventory,

    • Introducing Zoho CRM for Everyone: A reimagined UI, next-gen Ask Zia, timeline view, and more

      Hello Everyone, Your customers may not directly observe your processes or tools, but they can perceive the gaps, missed hand-offs, and frustration that negatively impact their experience. While it is possible to achieve a great customer experience by

    • API Self Client Authtoken conversion always returns "invalid_client".

      I am having a problem when trying to convert an Authtoken to OAuth for a Self Client script.  I have made sure that the client Id, secret, and organisation are correct, and the domain is definitely ".com"/ This is the python code I am using to create

    • [Webinar] Live demos and user Q&A with Zoho Writer product experts

      Join us on June 12, 2025 for live demos based on your use cases and real-world scenarios raised via form. This is also an opportunity to get your questions answered directly by product experts from the Zoho Writer team. Webinar agenda Live demos based

    • My client requires me to have custom pdf file names to except payment for invoices, how can I customize this before emailing.

      Hello! I love the program so far but there are a few things that are standing in the way. I hope you guys can code them in so I can keep the program for years to come. My client requires I customize the pdf file names I send in for billing. Can you please

    • Schedule mass emails, view mass emails status and more!

      Hello everyone, Mass emails help you communicate with multiple customers in a couple of clicks. We have introduced a Mass Emails dashboard in Bigin so that users can see the status of the mass emails like how many emails were opened, clicked and bounced.

    • Multiple Selection/Select All for Approvals

      I have a suggestion from users regarding Approvals. In our environment, our Regional Managers can receive multiple requests for Approval or Rejection. They find it tedious to approve (or reject) each individual record. They would like to have a way to

    • How to report and analyze a multi-select field entries distinctly ?

      As many of CRM users I have many multi-select fields that allows me to choose more than one chose in one cell for a specific filed Like: Field A - A;BC - A;C -B;C But when reporting the field it will handle each cell as a "String" not multiple entries

    • Merge invoices

      This has come up three times in a month of me using the system. a client whom i do work for on a regular bases asked me to invoice separate jobs on a single invoice. I would then go and cancel the old invoices and make a new one. It would be great if i could just select the invoices and click merge to create a single invoice.

    • Zoho CRM Two currencies on one record

      Hello all, Our country is planning to transition to Euro from our local currency. The government is planning to mandate that all companies show their invoices, quotes, etc. in both currencies for a period of one year in order to protect from speculation.

    • How to get values from both tables in Join in COQL query in Zoho API

      In this below query I can get value either from Deal Table or from Contact table. If I wanted data from both the table it is not working. Can you please help me with this. Thanks in advance. {     "select_query": "select ,A.Deal_Name,B.First_Name,B.Last_Name,

    • 【Zoho CRM】日時のフィルター機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、各タブで利用可能な日時のフィルター機能のアップデートをご紹介します。 日付項目と日時項目のフィルター及びカスタムビューに、「前へ(Previous)」「次へ(Next)」の選択肢が追加されました。 ⬛︎[前へ(Previous)]：作成日時に基づきレコードをフィルターにより抽出する場合 例1. 前へ6ヶ月：当月を除く直近6ヶ月間のレコードを抽出 例2. 前へ3年：今年を除く直近3年間のレコードを抽出

    • How can I notate on check stub when a vendors credit has been applied to an invoice payment?

      I'm looking for a way of printing vendor credit memo use on a check stub when its been applied to other invoices. To let my vendors know I'm using credit memo XYZ in the amount of $xx.xx. Currently I am having to handwrite it on the stub to show my vendor

    • Is there a Waiting Room Before The Webinar Starts?

      It appears that there is no waiting room before a webinar starts. For example, with most webinar software you can collaborate with your co-presenter, set up your presentation and check to make sure everything sounds right before you go live. Zoho Meeting/Webinar

    • Optimizing Zoho CRM Integration – Tips & Insights Needed

      I hope you're all doing great! I'm currently working on integrating Zoho CRM with our platform, which helps users get iPhone Free of cost through verified government programs. Everything's coming together nicely so far, but I'd really appreciate some

    • Forms - Workflow

      Apologies if this has been asked before. I would like to know if there is a way to setup a form where a customer completes the fields/questions on Page 1 and then it is forwarded to an internal department employee who completes the fields/questions on

    • Using the "Like" operator in Custom Formula

      HI there, Can someone please explain the way to use the "LIKE" operator in an IF statement to compare strings? I have tried the following but am not getting the results I'm after. if( "CurrentStatus" like 'Rejected*','Unsuccessful','Pipeline') Thanks Matt

    • ABA Files payment description

      Hi, is there a way to automate the payment description on the ABA file creation. When you paying many vendors having to put this in each time is very time-consuming. I couldn't see if there was a way to workflow this to automate using deluge.

    • GDPR Contd. - Handling Lawful Bases for Your Customers using Zoho CRM.

      Hello folks,   Continuing from our previous GDPR post, we bring to you the first cut of GDPR centric enhancements that are released for handling lawful bases for your customers in Zoho CRM. For your understanding we have split the entire process into three sections: Identifying Data Processing Basis Updating the Data Processing Basis in Zoho CRM  Consent Management in Zoho CRM 1. Identifying Data Processing Basis The fundamental principle to handle the personal data of your data subjects is to process

    • 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

    • 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

    • 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

    • 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

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

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

    • 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

    • 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

    • Next Page