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
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
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.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 howKaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are
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
ZOHO.CRM.UI.Record.open not working properly
I have a Zoho CRM Widget and in it I have a block where it will open the blocks Meeting like below block.addEventListener("click", () => { ZOHO.CRM.UI.Record.open({ Entity: "Events", RecordID: meeting.id }).catch(err => { console.error("Open record failed:","Unlink" Advance from Bill without Deleting the Payment Record
I am writing to highlight a significant workflow issue in Zoho Books (India Edition) regarding Vendor Advances and Bills. The Scenario: I recorded an Advance Payment to a vendor. I matched/reconciled this payment in the Banking module. I received a BillEmail Parser Not Extracting Fields Correctly with Certain Label Formats
I’ve been testing the Email Parser functionality in Zoho CRM to automatically extract data from incoming emails and map it to CRM fields. During testing, I noticed that parsing sometimes fails when the email contains field labels formatted like this:Train Zoho Answer Bot Based on Customer
Hi all, Is it currently possible to mark Help Centre articles to a specific customer, and restrict the answer bot to only use relevant information if it is either marked as "General", or tagged for the specific customer in question? We currently haveIntroducing Built-in Telephony in Zoho Recruit
We’re excited to introduce Built-in Telephony in Zoho Recruit, designed to make recruiter–candidate communication faster, simpler, and fully traceable. These capabilities help you reduce app switching, handle inbound calls efficiently, and keep everyPrevent tracking users from specific countries
Currently, I’m receiving many bot visits from the United States and Malaysia. I would like these visits not to be recorded in SalesIQ. I already enabled the option to exclude traffic from cloud service providers, but I’m still receiving bot visits. Ideally,Zoho CRM Community Digest - February 2026 | Part 1
Hello Everyone! February has been off to a productive start in the Zoho CRM Community, with several thoughtful product enhancements and helpful technical discussions making their way into the forums. To help you stay up to speed, we’ve rounded up theNouvelle fonctionnalité : donnez du style à vos pages avec le Branding
Que vous prépariez un webinaire important. Vous avez investi du temps dans votre contenu, invité des intervenants de qualité, et les inscriptions commencent à affluer. Mais votre page d’inscription ? Elle ressemble à toutes les autres : générique, sansHow to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes
Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.Marketing Tip #24: Encourage customers to leave reviews
Reviews are one of the strongest trust signals in ecommerce. When shoppers see real feedback from other customers, they feel more confident about buying, especially when they’re choosing a brand for the first time. Not all reviews are equal. DetailedOrganization wide Account and Contacts Visibility/Sharing Capabilities?
Has anyone figured out a way to make visibility or sharing of Accounts and Contacts to be available across the entire organization without having to have every individual user edit their Sharing permissions? For our sales folks they need to be able toIntroducing Bigin's all new integration with Microsoft Teams
Picture this: You are on call with your team to discuss some important deals that need to be closed soon. While discussing each deal, your team has to switch back and forth between your Teams account and Bigin account to refer to details about the deal.Ability to Attach Record-Specific Files Automatically in Workflow Email Templates
Currently in Zoho CRM, email templates allow attachments to be added, but these attachments are static and remain the same for every recipient. There is no straightforward option to automatically attach a file that is stored within the specific CRM recordThis version of app doesn't support this notecard type Error
So this problem is happening for any notes created within the last week, as well as any note recently edited on Android. I can open them on my phone fine, but they don't open on the website version. They DO work on the desktop app version. It's just webIssue with Picklist Dropdown Not Opening on Mobile
Hello I am experiencing an issue with picklist values on mobile. While the arrow is visible, the dropdown to scroll through the available values often does not open. This issue occurs sporadically, it has worked occasionally, but it is very rare and quitean issue in Zoho CRM where the workflow rule is not triggering
H I’m currently facing an issue in Zoho CRM where the workflow rule is not triggering when a new lead is created through a webform. I’ve double-checked the criteria and field updates, everything seems fine but it still doesn’t fire. Has anyone faced this{Action Required} Re-authenticate your Google Accounts to Continue Data Sync
Hello Users! To align with Google’s latest updates on how apps access files in Google Drive, we’ve enhanced our integration to comply with the updated security and privacy standards, ensuring safer and more reliable access to your data. With this update,Allocating inventory to specific SO's
Is there a way that allocate inventory to a specific sales order? For example, let's say we have 90 items in stock. Customer 1 orders 100 items. This allocates all 90 items to their order, and they have a back order for the remaining 10 items which couldAutomatically Update Ticket Status in Zoho Desk Based on Actions in Zoho Projects
Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to manage tasks related to customer tickets, and it works well for linking and tracking progress. However, there are a few important automation capabilitiesAccount Review Pending - Daily Limit 100
Hi ZeptoMail Team, I'm writing to request a manual review of my account. I am currently stuck on the 100-email daily limit and cannot purchase credits. Status: My domain is already verified (DKIM/CNAME). Issue: The "Customer Validation" option is no longerIs this a SCAM email or is it really Zoho?
L.S. I received the following message. Is this from Zoho? I have had a Zoho One account for many years and my website has been online for years. If it is a scam, I think you should know about it.How to close an estimate ?
Hello, I have created estimates, and converted them to invoices to get 50% payment. Now I have 2 cases where the estimate stills shows status partially invoiced, however: 1. for one of them, project stopped half way, so the remaining part will never beUpdating Analytical Fields Data
Dear Zoho team, I'm having an issue with the recently added fields in both Analytical Desk and Analytical. How can I generate the data in Analytical when new fields are added? https://analytics.zoho.com/workspace/2436819000000007005/edit/24368190000Looking for Guidance on Building a Zoho Website
I'm exploring the possibility of building a custom website with specific features using Zoho as an alternative platform. My goal is to create something similar to https://gtasandresapk.com , with the same kind of functionality and user experience. I'dMy Zoho mail stopped receiving or sending emails about 3 hours ago
Its a pop 3 account. The emails get into the actual mailbox on the server and I can send emails directly from the server, but they are no longer in Zoho, in neither of my Zoho accounts. All green ticks under Mail Accounts under SettingsCan I hide empty Contact fields from view?
Some contacts have a lot of empty fields, others are mostly filled. Is there a way I can hide/show empty fields without changing the actual Layout? I would like to de-clutter my view, and also be able to add information later as I am able. I would beZoho Cliq not working on airplanes
Hi, My team and I have been having this constant issue of cliq not working when connected to an airplane's wifi. Is there a reason for this? We have tried on different Airlines and it doesn't work on any of them. We need assistance here since we are constantlyOption in pipeline deal to select which hotel or branch or store if client has more than one local store
Hi, I would like to know if there is an option in the deal pipeline to select which hotel, branch, or store a deal is related to—if the company has more than one location. For example, I have a client that owns several hotels under the same company, andRequest to Recover Deleted Task List – Project ID: RIV-MOD-10722
Hi Zoho Team, I hope this message finds you well. My Zoho task list associated with Project ID: RIV-MOD-10722 appears to have been deleted. When I clicked on the task link from the email notification, I received the following message: "Task has been deletedIs it possible to use HTML formatting in SMS messages sent from Zoho?
Hi everyone, I have a question regarding sending SMS from Zoho When we send emails from Zoho, we can include HTML code to format the message (like adding links, styling, etc.). Is it possible to do something similar when sending SMS messages through ZohoEmail Insights included in Bigin emals are marked as SPAM everywhere
Today I noticed that email recipients who use Office 365 never receive emails sent from Bigin. Further examination showed that all Email Insights links in email headers are marked as spam/phishing by Office 365. Example screen included. The problem isHow do I import Connected Records for a Deal?
Can you point me to an example of the CSV file that would add related records to an existing CRM Deal? I imported a Deal, then tried importing a connected record using a unique ID that references the Deal ID, but it doesn't attach it to the Deal recFile Upload Field in Zoho Forms Not Updating Existing File in Zoho CRM
Hi everyone, I’m trying to understand the behavior of a file upload field mapped from Zoho Forms to Zoho CRM. Scenario There is a File Upload field in a Zoho CRM module. A Zoho Form also has a File Upload field, which is mapped to that CRM field. WhenZoho Training
Greetings! I am trainer. My focus area is Project Management and MS Project. I have used Zoho CRM to a good extent. Though, I was interested in using ZOHO projects, as there were no live projects, I could not take it up for studies. Recently a clientDetailed list of scoring rules in Zoho CRM
Good morning Zoho community, warm greetings The reason for my message today is that I have a problem with my CRM, which I will explain below: Our organization has scoring rules designed to rate our potential customers or leads in the application basedHow to create a summary document from Projects details
Hi, Our team is creating many projects inside Zoho Project. When closing a project, they write a summary document containing data from the projects it-self (understand project budget, customers, etc...), and editable (ie the document is either a WriterHost in US Data Centre
I humble apply to be registered on US Data centreconvert the project to templet
i have some deployment ME product for different customer , i need to create a fixed template for use it rather then keeping creating this template every timeBest practices for managing Project Charters, Business Case and RAID logs within Zoho?
Hello everyone, I’m currently refining our PMO setup within Zoho Projects and I’m curious how others are handling high-level governance documentation. We’ve been using the standardized Project Charter, Business Case and RAID frameworks from projectmanagertemplate.comResource Management System built using Zoho CRM, Creator, Projects, and People:
In a Resource Management System built using Zoho CRM, Creator, Projects, and People: CRM Deal Closed → Creator Allocation Engine → Zoho Projects Task Assignment What is the recommended architecture to handle dynamic reassignment when: an employee goesNext Page