Kaizen 223 - File Manager in CRM Widget Using ZRC Methods
Hello, CRM Wizards!
Here is what we are improving this week with Kaizen.
we will explore the new ZRC (Zoho Request Client) introduced in Widget SDK v1.5, and learn how to use it to build a Related List Widget that integrates with Zoho WorkDrive. It helps users to preview and upload files directly from the record’s detail page.
Why ZRC?
ZRC is a unified client for making REST calls across all developer-facing components in Zoho CRM. It is currently supported in Widgets and CScript, and will soon be available for other features within the Developer Hub as well.
It simplifies external API usage with:
- async/await support
- Auto JSON parsing
- Unified API client for Zoho CRM developer tools (currently supported for CScript and widgets)
- Stronger error handling
Business Problem
Zylker, a real-estate company, stores documents, images, and property videos for each lead in a third-party cloud storage platform.
However, some of these files exceed 20 MB, making the CRM’s built-in file upload field unsuitable. Their team also needs the ability to preview and upload files directly from the Lead detail page.
Solution Overview
Zylker can build a Related List Widget integrated with their third-party cloud storage platform using ZRC methods.
This widget will allow users to:
- Fetch and display files inside the folder linked to the Lead.
- Preview files (images, PDFs, videos) inside the widget.
- Upload new documents to the same folder.
- Create new subfolders to keep the data organized.
- Navigate subfolders using breadcrumbs.
To keep the demo simple, let us walk you through on building this widget for listing, previewing and uploading files using Zoho WorkDrive.
Prerequisites
1. Create a Custom Field
Create a Single Line field named WorkDrive Folder ID in the Leads module. Check out the Working with Custom Fields document for guidance.
This stores the folder ID created for each lead through workflow rule that we build in the next steps.
2. Create WorkDrive and CRM Connection
- Go to Setup > Developer Hub > Connections and click Create Connection.
- Choose Zoho WorkDrive with the scopes WorkDrive.files.CREATE and WorkDrive.files.READ.
- Click the Create and Connect button and proceed to authorize the connection.
- Similarly, choose Zoho CRM with the ZohoCRM.modules.ALL scope and create the connection.
Refer to the Connections help doc for more information. Store the Connection Link Name to use while making API calls.
3. Automate WorkDrive Folder Creation
- Go to Automation > Workflow Rules in the Setup page and click Create Rule.
- Create a Workflow Rule with the following details:
Module: Leads
Trigger: On Record Creation
Condition: All Records
Action: Custom Action (Deluge Function)
Function Logic:
1. Create a new folder in the WorkDrive combining the lead's record ID and First Name as the folder's name. Use the Invoke URL task to make the Create Folder API call.
responseMap = Map(); attributeInfo = Map(); dataInfo = Map(); headerMap = Map(); headerMap.put("Accept","application/vnd.api+json"); // First Name and Record ID from the argument AttributeInfo.put("name",Name + recordId); // Parent folder ID under which you want to maintain the lead folders attributeInfo.put("parent_id","e8gn06f2d7b3a48044090b7217524be95c9ac"); dataInfo.put("attributes",attributeInfo); dataInfo.put("type","files"); responseMap.put("data",dataInfo); folderCreateResponse = invokeurl [ url :"https://zohoapis.in/workdrive/api/v1/files" type :POST parameters:responseMap.toString() headers:headerMap connection:"workdrive_oauth_connection" // Connection Link Name created in the prerequisites ]; info folderCreateResponse; |
2. Retrieve the folder ID from the API response.
3. Update the Lead’s WorkDrive Folder ID field with this folder ID using Update Records API call.
requestBody = Map(); dataList = List(); record = Map(); // Set field values record.put("WorkDrive_Folder_ID",driveId); // Add record to list dataList.add(record); // Wrap data requestBody.put("data",dataList); updateLead = invokeurl [ url :"https://zohoapis.in/crm/v8/Leads/" + recordId type :PUT parameters:requestBody.toString() connection:"crm_oauth_connection" ]; info updateLead; |
Assign values to the arguments using merge fields while associating the function with Workflow Rule.
Now every Lead has its own WorkDrive folder before the widget loads.
Note:
The complete code snippet for the deluge function is attached to the post for your reference.
Building the Related List Widget
Step 1: Initialize the Widget Project
Review the basics from our earlier Kaizen on CLI Installation, Creating a Widget Project, and Internal hosting of the same.
Step 2: Develop your Widget
After setting up the widget project using CLI, implement the following code logic for the case we are discussing:
- Get the current record's ID from the PageLoad event.
- With the record ID, fetch the lead details using the GET Records API call using the GET ZRC method as shown here.
// data.Entity and data.EntitiyId are the module and record ID from PageLoad const response = await zrc.get( "/crm/v8/" + data.Entity + "/" + data.EntityId ); var workdriveFolderId = response.data.data[0].WorkDrive_Folder_ID; |
- Extract the WorkDrive Folder ID from the response to get the list of files from the folder.
- Since we'll be using WorkDrive APIs multiple times, let’s create a reusable instance with the Connection Link Name and API's base URL. This way, we avoid repeating the same setup for every API call.
Following is sample of how to create a custom instance:
workDriveZrc = zrc.createInstance({ baseUrl: "https://www.zohoapis.in/workdrive/api/v1", connection: "workdrive_oauth_connection", }); |
You can also check out the Create Instance in the requestConfig help section to learn more.
- Now, let us make the GET List of Files/Folder API call using the newly created ZRC instance.
let apiResponse = await workDriveZrc.get( "/files/" + workdriveFolderId + "/files", { headers: { Accept: "application/vnd.api+json", }, } ); |
- Display the file details like File Name, Type and Modified Time in a table from the API response. Save the File ID in a variable for displaying preview.
- When user clicks a particular file, use the file ID to fetch the preview URL using the GET Preview Meta Data API. Then load the preview URL in an iframe to display the file.
try { const previewResponse = await workDriveZrc.get( "/files/" + resourceId + "/previewinfo", { headers: { Accept: "application/vnd.api+json", }, } ); parsed = JSON.parse(previewResponse.data); console.log("Preview Data:", parsed); // Extract the preview_url from the expected location previewUrl = parsed && parsed.data && parsed.data.attributes && parsed.data.attributes.preview_url || null; // Remove surrounding quotes if server wrapped the url in quotes if (typeof previewUrl === "string") { previewUrl = previewUrl.replace(/^"(.*)"$/, "$1").trim(); } } catch (err) { console.error("Error fetching preview info for resource:", resourceId, err); } function showPreview(previewUrl, fileName, permalink) { var modal = document.getElementById("modal-container"); var thumbnailFrame = document.getElementById("thumbnail-img"); var caption = document.getElementById("caption"); var workdriveLink = document.querySelector(".redirect-workdrive"); // Load the preview URL into the iframe thumbnailFrame.src = previewUrl; // Set the file name in caption and workdrive link caption.textContent = fileName; workdriveLink.setAttribute("data-link", permalink); // Show the modal modal.style.display = "block"; } |
- Create an Upload button for users to select files from their local. Convert the streamed files to blob and execute Upload API call using the custom ZRC instance.
async function workdriveUpload(file, fileType, fileName, folderId) { const fileBlob = new Blob([file], { type: fileType }); try { const formData = new FormData(); formData.append("filename", fileName); formData.append("parent_id", String(folderId).trim()); formData.append("content", fileBlob); const uploadResponse = await workDriveZrc.post( "/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, } ); console.log("Upload response:", uploadResponse.data); return uploadResponse; } catch (error) { console.error("Error uploading file:", error); throw error; } } |
Step 3: Validate and Pack
Follow the steps given in the Widget help page to validate and package the widget.
Step 4: Upload to Zoho CRM
- Go to Zoho CRM > Setup > Developer Hub > Widgets and click Create New Widget.
- Fill in the required details such as:
Name: Zoho WorkDrive
Type: Related List
Hosting: Zoho
File Upload: Upload the ZIP created in the dist folder within the widget project directory after packaging in the Step 3.
Index page: /widget.html
- Create a related list in the Leads module and associate this widget. Refer to the Customize Related Lists help page for more information on creating a related list.
Try it Out!
A complete working code sample of this widget is attached at the bottom of this post for reference.
Now let us see how this works from the Lead's detail page:
1. Listing the available files from Zoho WorkDrive on page load.
2. Uploading new files to the folder.
3. Previewing all the listed files.
We hope this Kaizen helps you explore the new ZRC capabilities and build seamless file-management experiences in Zoho CRM.
Have questions or suggestions? Drop them in the comments or write to us at support@zohocrm.com.
We will circle back to you next Friday with another interesting topic.
On to Better Building!
------------------------------------------------------------------------------------------------------
Related Reading
1. Widgets - An Overview, CLI Installation, Working with Widgets, ZRC Methods, Mobile Compatibility of Widgets and Kaizens
2. Connections - An Overview
6. CRM Customizations - Related Lists and Custom Fields.
------------------------------------------------------------------------------------------------------
Previous Kaizen: Client Script Support for Notes Related List | Kaizen Collection: Home
Access your files securely from anywhere
Zoho FSM Video Tutorials
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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
Doug Tereba
Jaya Suriya J
Sticky Posts
Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!
We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCodeKaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM
Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In theKaizen #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.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Billing 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
Bank Transaction Rules Link Under Each Bank Account
Hello, can you'll move the "transaction rules" button or link back under each bank account? It is now on Bank Overview, if I am working on a specific bank account, I don't want to go out to overview to check the rules. That button displays rules for allNested notebooks
Dear Sir/Madam, I would like to know if it is possible to nest notebooks. It would be very helpful when there are too many, as it would improve organization. Thank you for your response. Best regards.Zia Agents looks promising, but I still cannot deploy my first agent or connect WhatsApp after weeks of support tickets
Hi Everyone, I am posting here because I am stuck and need practical help from someone who has successfully deployed a Zia Agent with WhatsApp. Zia Agents looks like a very promising product. I have watched the platform expand quickly, and I have noticedZoho CRM
Cuándo voy a adjuntar un archivo .pdf en un registro en el campo Archivo obtengo el siguiente error:Implement Meeting Polls in Zoho Bookings
Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement related to appointment scheduling within Zoho Bookings. Current Functionality: Zoho Bookings excels at streamlining individual appointment scheduling. Users can set availabilityRecording Salaries and wages in zoho books with bank fees
Hello Community, I am posting this questions to understand the best way to record the salary and payroll expenses in zoho books. The way it works here, For example if I have 3 employees and each employee salary is lets say $1000. I usually use the bankAPI - Available Stock Definitions
Okay, Zoho team... your copywriters fell down on the job for this one :) I think these warrant a bit more explanation as to what they include and what they don't.[BUG] WebTabs in ZohoCRM now have a spurious "\" displayed along with some additional HTML Head code included
An example of the issue can be seen below:CNIL - Suivi de Pixel
Bonjour à tous, À la suite de la nouvelle recommandation de la CNIL sur les pixels de suivi dans les e-mails, savez-vous si Zoho Campaigns permet : de conditionner le suivi des ouvertures au consentement de chaque contact ; de proposer un lien permettantScheduled import
The tutorial shows a scheduled import option but this option doesn't appear to be available when using Zoho DB.#4 Choosing How My Invoice Should Look
Day 4: Meera had the basics sorted. Her business name was there, the address looked right, and her logo finally appeared where it should. But the invoice still did not quite look like hers. Her old studio used invoices that were clean, tightly laid out,Transaction rules for "Owner's Contribution" ?
I have a bank account where a lot of the deposits are "Owner's Contributions" (i.e., the business owner investing money in the company). Is it possible to create a Transaction Rule to automatically recognize these? They all have the same verbiage fromDYK 12: Turn Email into Work Items
Did you know you can add work items to your Zoho Projects portal directly from your inbox? The initial step of important collaborations start over an email, and most of these require an immediate follow-up by creating a task, or reporting an issue. DuringCustom Function not getting package details when triggered from Workflow Rules.
I have a custom function for Packages that submits a form in our Creator app that we use to generate custom shipping labels (internal staff complete deliveries so we cannot generate shipping labels straight from Inventory). When the function is executedhow to Solve Conflict Invoices in Zoho POS
Hello Team, I am facing a repeated issue in Zoho POS while saving a sale that contains service-based items. My products are intentionally created as Service (Non-Inventory) items because I do not want to track stock for them. However, every time I try¿Cuándo estará disponible la edición de Zoho POS para México?
He estado revisando las capacidades de Zoho POS y su evolución dentro de la estrategia de Zoho for Retail, y me parece que existe una oportunidad muy interesante para el mercado mexicano. Zoho POS ya ofrece funcionalidades para gestionar ventas, inventario,Important update for Zoho RPA Windows Agent users
Hi everyone, We would like to share an important update for Zoho RPA Windows Agent users running Windows Server 2016 or Windows Server 2019. The new Zoho RPA Windows Agent 6.0.0 and later versions are not supported on Windows Server 2016 and Windows ServerMulti-Option Estimates: One Estimate, Multiple Choices
Every service request can have multiple solutions. Multi-Option Estimates help you present these different solutions in a single estimate with its own name, parts, price, and total. Each option can differ in scope, approach, or price — whatever choicesMarketing Tip #32: Improve SEO and customer confidence with an FAQ section
Before making a purchase, customers often have simple questions about delivery times, returns, product usage, or sizing. If they can’t quickly find answers, they may leave your store without buying. Adding a clear FAQ (Frequently Asked Questions) sectionZOHO Campaigns in ZOHO Analytics - Campaigns vs Contacts Table
There seems to be information in the Zoho Campaigns table such as Unique Opens and Unique Clicks that can't be found in the Campaigns vs Contacts table where only Opens and Clicks are shown on a per contact level. Is there a way to bring Unique OpensHow to change an employee mail id
Hi, Does the administrator have the rights to edit an employees mail id.Cousin Domain Verification in Zoho Mail: Identify and block look-alike domains
Phishing attacks often rely on domain names that closely resemble legitimate ones. This makes it difficult for users to identify fraudulent emails at first glance. Zoho Mail's Cousin Domain Verification feature allows administrators to define trustedHow do I add 2 agents under the same email?
I have 2 agents who use the same email address. I added one, but when adding the second agent, it says that the email is already registered. How do I configure this properly?Zoho Desk API modifiedTimeRange returns HTTP 500 around 2026-03-08T02:00:00.000Z
Hello Zoho Support Team, We are experiencing a reproducible HTTP 500 Internal Server Error when querying the Zoho Desk API search endpoint with a specific modifiedTimeRange boundary. ### API Endpoint GET /api/v1/tickets/search ### Reproduction Steps &Updating an Invoice Line Item's Discount Account via API Call / Deluge Custom Function
I need help updating an invoice line item's discount account via API. Below is a screenshot of the line item field I am referring to. Now the field to the left of the highlighted field (discount account) is the sales income account. I am able to modifyAssociate project with timer on iPhone
When I start the timer without first associating a project (on my iPhone), its starts fine but now when I need to associate a project, and click on the link, I get a list of EVERY project I've ever put into Zoho Books. It used to just show active projects.Sales Tax Refund on Commerce Order
I've looked high and low. Relatively new to ZOHO but not to systems in general. How do we produce a refund for sales tax charged and paid for by a customer in error? This does not impact inventory stock. Simply for accounting and getting the $ back toImporting Chart of Accounts from Quickbooks -- "Debit or Credit"?
I'm trying to switch from QB to Zoho Books. I've prepped my chart of accounts and put it into the format following the structure of the sample CSV file. But one thing that does not exist at all on the Quickbooks side is the Zoho column for "Debit or Credit".Long term pricing for customers managing multiple organizations
I've been using Zoho extensively for quite some time and genuinely think it's one of the most powerful and customizable business platforms available. Between Zoho Books and Zoho Analytics, I've invested a significant amount of time building automations,Default Status for Appointments to Completed
We use Zoho Bookings integrated with Zoho Desk to book time for tech support sessions, we've configured it to only allow for a contact to book a single session to avoid customers overbooking time that may not be needed. The trouble is, once a sessionCustomer User Fields for use in Rules
Hi, I would like to be able to add custom fields to the users, such as Department or Role, which can then be used in Rules, Reports, etc. as a condition. A use case is limiting Global lists or Choices based on the users Custom Field, so one form can beAdd ZeptoMail to Zoho One
Hi Zoho Team, I would like to request that ZeptoMail be added as a fully included application within Zoho One. Why this is important Zoho One is positioned as a unified business operating system that brings the applications an organization needs underItem image on document
I know what I am asking may not be possible, but I will ask anyway, maybe I will get lucky, and someone else is doing it. My business is based on special orders only from various online stores. When I send a quote to a client, I generate a separate quoteDashboard Metric Drill-Down Shows Stale Data
Summary: When clicking between different metric components on a custom dashboard, the drill-down list shows data from the previously opened metric instead of the one just clicked. Steps to Reproduce: Create a custom dashboard with multiple pre-defined/templatizedAllow Reauthorizing CRM Connections Without Revoking First
Currently, when a Zoho CRM connection needs to be reauthorized or authorized with another account, we first have to revoke the existing authorization and then authorize it again. This creates a gap where the connection is unavailable, and any functions,Programmatic Itemized Expenses?
It does not appear that it is possible to create itemized expenses programmatically (via the API)? Is this correct, or am I misunderstanding the situation?Zoho Marketing Automation Cannot Sync Lookiup Fields
Hello all, It seems that Zoho MA cannot sync Lookup fields from the CRM. Can you confirm if this is the case? Is there a workaround? Do you know if Campaigns can sync with custom modules and also with Lookup field in the CRM? Thank you!Specific ListView Canvas on Canvas Home Page Always Loads Most Recent ListView, Not the One Specified
I had mentioned this to ZOHO, but I mainly wanted to see if others in the Community are also facing this problem. I created a Canvas ListView for a Custom Module, and then created a Canvas Home page (technically on a tab item, but I'm not sure if thatZoho Campaigns EU Topics API returns HTTP 200 with empty topicDetails
Hello, Our Zoho Campaigns EU organisation has two custom topics visible in the Campaigns UI, and contacts are subscribed to them. However, an OAuth request with ZohoCampaigns.contact.READ to https://campaigns.zoho.eu/api/v1.1/topics returns HTTP 200 withCaso de Éxito: Cómo Toyota Financial Services unificó la atención al cliente con Zoho
"Después de seis meses con el CRM en producción estamos encantados." Miriam Cárdenas, Responsable Departamento ATC Toyota Financial Services es la división financiera de Toyota encargada de gestionar la financiación de vehículos y, junto con KINTO España,Next Page