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
- Custom Fields - Working with Custom Fields and Working with Picklist Field
- Widget - An Overview, CLI Installation, Working with Widgets, JS SDKs, Mobile Compatibility of Widgets and Kaizens
- Core APIs - GET Records, POST Records and UPDATE Records
- Client Script - An Overview, Creating a Client Script, Best Practices and Troubleshooting
-----------------------------------------------------------------------------------------------------------------
Previous Kaizen: Client Script Support for Subforms | Kaizen Collection: Directory
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Kiruthiga G
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 FAQsKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Revenue Management: #2 How to compute revenue?
In our previous post, we discussed the revenue recognition standards under IFRS 15 and ASC 606 and the five-step model. Now, let's examine three distinct business scenarios to see how the standards and model work in practice. This will help you understandExternal lookup in CRM (as in Books)
Hello Context: We have a CRM module, similar to Deals, but for Purchasing. Once the PO is created, a link to this PO should be updated in that "deal". In Books, you can add a custom 'external' field which can look up into CRM modules. I'm asked to have"Undo Send" Feature
Would love it if TeamInbox had an "Undo Send" feature, that gives you 10 seconds or so to "undo" the sending of an email. Many other email clients already have this feature, and my clients really miss it, as it has saved them many times in the past whenBetter Notes Commenting
Hi, I'd like to suggest better collaboration tools for NOTES. The current notes section for Accounts, Contacts and Deals is not ideally suitable for any degree of communication or collaboration. When responding to a note, there is no ability to leaveZoho Sites
Does anyone have experience building Zoho sites or know how I can find someone who does?Zoho Crm Lagging
Hi Zoho Support Team, Starting from today, my Zoho CRM has been extremely slow and laggy when accessing any pages or modules. This is affecting my work and overall productivity. Could you please help to check if there are any ongoing issues or if there’sIs there a way to reference/attach mails to deals/contacts when the mails haven't come through their contacts normal email and the mail comes through software / app who use their mail system
There are often system mails that come through systems or other software which use their email addresses since they use their own mail servers to mail. This causes an issue as it does not record the mail in the history of the CRM since the email is notRecommendation
I give up on Zoho. It's never going to be an all in one solution, their own apps don't even connect. Can any one recommend an alternative at least for the crm / people.CRM - Site/Location
Hi Zoho, One massive oversight of the Zoho CRM is the inability to add multiple sites or locations to one account. Many organisations have several (in some cases, hundreds) of sites across the country or even the globe. The workaround to this, of course,An unknown error occurred. Please contact support
Whenever I visit this page I see this. I changed browser and still the same. Can someone from Zoho help me please?How to Streamline Pick & Ship
Is there a way to streamline the built-in pick and ship process? I guess mostly on the ship side. Our current process allows us to choose shipping super fast. It's an EasyPost plugin for WooCommerce. You have to populate the boxes / weights / shippingHow to add, delete or rename the "payment method" drop down?
When we recorded payment in invoice, there's a "payment method" drop down with choices like cash, bank transfer... We want to add and delete or rename some new selection. How to do such adjustment? Please advice.Smarter data gathering with Query component in Wizards
Dear All, Introducing the Query Component in Wizards for CRM! A smart search field that saves you time and effort, and helps you manage and gather data more efficiently than ever before. Long and complex record entries can be overwhelming and prone toIntroducing teamspaces and team modules in Zoho CRM mobile app
Hello everyone, We have an exciting update to share in the Zoho CRM mobile app. As part of CRM For Everyone—a new set of features that reflect our vision to democratize CRM and make it accessible for all—teamspaces and team modules are now available onClient Script - change page and/or section background colours
Hello, Would anyone be willing to help me with a bit of Client Scripting code? I have had a go myself but only been able to alter the form field styles, not the overall page/section/heading styles. I want to set a different page background colour forClient Script | Update - Introducing Subform Events and Actions
Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduceZoho SalesIQのチャットボット、ブロックのコピー機能
Zoho SalesIQのチャットボットの構築でドラッグアンドドロップで作成を行っているます。 内容は同じブロックのコピーペースト機能がないみたいなのですが、同一のブロック、同一の複数のブロックをいくつも作成する場合は、皆様はどのように行われていますか？ 例えば添付の４つのブロックをまとめてコピーして、別のフローの先につなげる場合です。 教えていただけますと幸いです。よろしくお願いいたします。Questions About Zoho Commerce Member Portal
Hello, A couple questions about the Zoho Commerce Member Portal: 1. Can I add only specific pages be added to the Members Portal, and not the entire website? 2. When a customer signs up on my Zoho Commerce site, is there a setting that gives me a chanceCancel and refund
Hi, Yesterday I paid for the Zoho email subscription. Within a few minutes, I realized that the subscription counts one email ID as one user. To make another email ID for the same domain name, I'd have to pay for another user. I emailed right away toOnline Payment Fees
We don't take many online credit card payments so the merchant service provider (PayPal) charges us the 2.9% fee for processing the amount. I would like the ability for the fee to be automatically added to the total amount for "ease of payment". We'dError occured. please try again!!!
I created a new list. Added two new contact's email addresses. I try to EDIT either one of them to add their first name, last name and phone number. Whatever I try to edit and update, I get the error message Error occured. please try again!!! And it doesn't update any of their info. I tried just editing first and last name. Still get the error. No matter what I try to update, I get the error. I tried creating a new list, and adding just one email address and then edit it and also get the error."Send email as" not work
Hi team, I currently use ZOHO MAIL services on the MAKE platform (formerly INTEGROMAT). In MAKE I entered my ZOHO MAIL credentials but the problem is that when the emails are sent from the automation in MAKE, the emails do not come in with the name set*UPDATE: ISSUE RESOLVED, SEE HOW FOR HELP* Issue imbedding Youtube Videos
**UPDATE: RESOLVED** For anyone that is having a similar issue, try this workaround before attempting to have the Zoho techs fix it. I have been in communication with them for weeks about this and they can't seem to fix the issue. Thinking it may have just been my computer or my browser, I tried two different computers on two different networks, each running different versions of Windows, and tried it on Chrome, Firefox and IE; nothing worked. So, needless to say, it's an issue with Zoho somewhere.Backorder For Composite Items
Hello If i released SO for composite item and use backorder feature of zoho inventory then it should backorder child item items of composite and not composite item.This is basic of backordering.I conveyed this to zoho call center but no solution yet.Paid Support
We are in the process of creating tiers for our support offerings. There will be three tiers of support available - 2 paid and 1 free. The paid tiers will be purchased in allotted hours. I need to figure out how to a) work in the out of the box SLA, ContractsWhere is the desktop app for Zoho Projects???
As a project manager, I need a desktop app for the projects I manage. Yes, there's the web app, which is AWESOME for cross browser and platform compatibility... but I need a real desktop app for Projects that allow me to enter offline information whereAutomatically CC supervisor
Hello, in our organization agents are replying to tickets and they are required to CC their supervisor on all emails to and from customers. is there a way to have an email address automatically populate in the CC field when reply to a ticket? thaZoho One - White Label
Releasing a white-label feature for Zoho One, or any software or service, can offer several advantages and benefits for both the company providing the software (Zoho in this case) and its users. Here are some key reasons for releasing a white-label featureAre this Features included in the Road Map
1. Sync between description/short description in Zoho Books/Inventory and Zoho Commerce: I am unsure how it works now. I belive the description is not pulled. 2. Pick Up: This feature is great. It is added on Zoho Commerce but not on Books/Inventory whichReconciliation - Show Transactions After End Date
I did a quick search, and I've only seen this brought up indirectly. In the reconciliation interface, transactions dated up to a week after the end date should be available for being reconciled. The use case is pretty simple... many times, transactionsAuto populate email field in zoho form
Hi, Is there a way the email field in zoho forms can be auto populated based on the name selected from a drop down list?Option to accept and pay for estimate from Public Estimate link?
Is there any way that our customers can get the Estimate in their email, click on "View Estimate" and from the public link, click Accept and Pay? When they click that, in the background Zoho would create the invoice record in the so that the payment wouldKaizen #125 Manipulating Multi-Select Lookup fields (MxN) using Zoho CRM APIs
Hello everyone! Welcome back to another week of Kaizen. In last week's post in the Kaizen series, we discussed how subforms work in Zoho CRM and how to manipulate subform data using Zoho CRM APIs. In this post, we will discuss how to manipulate a multi-selectEasily track referrals with Zoho Forms
Referral tracking can be a powerful way for businesses to understand where their leads are coming from. With Zoho Forms, tracking the referral sources of your leads is an easy and straightforward process. Here are some tips to help you make the most ofAdd an email to an existing ticket is not working
I noticed that in Zoho Desk the funcionality to add an email to an existing ticket is not working using the syntax [##12345##], has the method changed? In red is the syntax we use to add email to an existing ticket As you can see, he did not add the emailNew CRM to Campaigns Sync Doesn't Continue Making Updates
Changes made in CRM are not appearing in mapped fields in matching Campaign records after migrating to the new sync process. The only way we've found to get records to update is to call into Support and point out the problem. After convincing SupportZoho Integration with UPS
I have 2 questions: Firstly, is there a way to notify UPS that we have a package to collect once we have done the shipping label? Secondly, how do I get the tracking number and shipment method onto the Invoice and Package Slip for the customer? ThanCannot log in to IMAP account as of last night
Hey I've been using MFA with an authenticator for a while and have had to use application passwords for Outlook and Edison Mail on my Android devices. Last night the app passwords started to be rejected on my Android devices so I created new ones forLow Stock View
We use the Low Stock view frequently as a guide to inform us when to reorder items, but the view is misleading because it does not take into account Purchase Orders that have already been raised. Unless you are aware and check item by item, this can leadImprove History Feature in Zoho Inventory
At present there is a "history" tab on Zoho Inventory Items, however this only shows a date and time stamp along with the users name. It doesn't say what was changed. What is the value of this if you can't see what was changed? My Ideal is to includeNext Page