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
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 #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 areKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achievedKaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.
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
Performance is degrading
We have used Mail and Cliq for about three years now. I used to use both on the browser. Both have, over the past 6 months, had a severe degradation in performance. I switched to desktop email, which appeared to improve things somewhat, although initialHow to set page defaults in zoho writer?
hi, everytime i open the zoho writer i have to change the default page settings to - A4 from letter, margins to narrow and header and footer to 0. I cannot set this as default as that option is grayed out! so I am unable to click it. I saved the documentAdd Israel & Jewish Holidays to Zoho People Holidays Gallery
Greetings, We hope you are doing well. We are writing to request an enhancement to the Holidays Gallery in Zoho People. Currently, there are several holidays available, but none for Israel and none for Jewish holidays (which are not necessarily the sameUnable to Send Different Email Templates for Different Documents in Zoho Sign
Hello Zoho Community, I am facing a limitation with Zoho Sign regarding email notifications sent to customers when a document is sent for signing. Currently, whenever I send any template/document for signing, the email notification that goes to the customerEnable History Tracking for Picklist Values Not Available
When I create a custom picklist field in Deals, the "Enable History Tracking for Picklist Values" option is not available in the Edit Properties area of the picklist. When I create a picklist in any other Module, that option is available. Is there a specific reason why this isn't available for fields in the Deals Module?ZO25: The refreshed, more unified, and intelligent OS for business
Hello all, Greetings from Zoho One! 2025 has been a remarkable year, packed with new features that will take your Zoho One experience to the next level! From sleek, customizable dashboards to an all-new action panel for instant task management, we’veVault crashes on Android Devices
Vault is continuously closing after entering the master password on my Android device. After several attempts I get a system message that says there is a bug in the app. I've uninstalled and reinstalled the app, and cleared the app cache, but nothing¿Cómo puedo configurar las contraseñas creadas bajo una directiva para que nunca caduquen y no aparezcan como caducadas en los informes?
¿Cómo puedo configurar las contraseñas creadas bajo una directiva para que nunca caduquen y no aparezcan como caducadas en los informes? La razón por la cual contraseña estas no deben caducar es porque su actualización depende de mi cliente y no de mí.Camera access
My picture doesn't appear in a group discussion. (The audio is fine.) The guide says "Click the lock icon on address bar," but I can't find it. Advise, pleaseAre static links available
I'm still using Zoho Meeting in trial mode. My previous webinar software provided a static link, and I made the mistaken assumption that I could send out my link and start a meeting later. Mass confusion, but my fault. With a paid version do you get aPower up your Kiosk Studio with Real-Time Data Capture, Client Scripts & More!
Hello Everyone, We’re thrilled to announce a powerful set of enhancements to Kiosk Studio in Zoho CRM. These new updates give you more flexibility, faster record handling, and real-time data capture, making your Kiosk flows smarter and more efficientWhy is Zoho Meeting quality so poor?
I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going onHow to print a label from zoho creator app?
Hello, I would like to print a label from zoho creator app record similar to attached one. Size 74mm x 102mm. I tried record template. It leaves plenty of space around the content and also I couldn't set the height of the page. So it is not printing properly. Could someone please direct me to right direction for this requirement?Integration between "Zoho Sprints Stories" and "Zoho Projects Tasks/Subtasks"
We have two separate teams in our organization using Zoho for project management: The Development team uses Zoho Sprints and follows Agile/Scrum methodology. The Infrastructure team uses Zoho Projects for traditional task-based project management. InWhere can we specify custom CSS in Zoho Forms custom theme ?
I'm using a form with a dark theme. The OTP popup window is unreadable, because for some reason, the OTP popup background fixes color to white, but still takes the font color specified in the custom theme. This ends up as white on white for me, renderingTeam Gamification
Would love to motivate, engage and encourage our team with our social media posts. Would like to include Gamification features of Social Media in Zoho Social or Marketing Automation. And also bring in Social Advocacy tools/tracking/management to these,Sync Data from MA to CRM
Currently, it's a one-way sync of data from the CRM to MA. I believe we should have the ability to select fields to sync from MA to the CRM. The lead score is a perfect example of this. In an ideal world we would be able to impact the lead score of aUpdate CRM record action
Currently, MA only offers a "Push Data" action to push data to a CRM module. This action is built to cover the need to both create a new record and update an existing record. Because it has been implemented this way all required fields on the CRM modulePro Lite Upgrade - Quick Access Tray
Hello, I was going to upgrade to Pro Lite but the Quick Access Tray feature isn't available for Windows. Of the four features not available for Windows, the QAT is what I'm most interested in. Are there plans to add this feature for Windows anytime soon?Boost your CRM communication with new font types, sizes, and default reply-to options while composing emails
Hello Everyone, We’re excited to introduce a series of impactful enhancements to the email composer settings in Zoho CRM. These updates enable you to personalize and optimize your customer interactions with greater efficiency. So what's new? Add custom3 year sick leave cycle
How do you set up a sick leave cycle for South Africa? In SA the sick works like this for the first 6 months you get 0.83 paid sick days a month, then after 6 months you sick leave balance is reset to 30 days that can be used over a 36 month cycle. ThisWorkDrive and CRM not in sync
1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (hereIs Zoho Communityspaces now part of Zoho One?
Is Zoho Communityspaces now part of Zoho One?How to update "Lead Status" to more than 100 records
Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, JonathanBigin’s 2025 Evolution: Highlights from 2025 and What’s Ahead in 2026
Dear Biginners, Wishing you a very happy New Year! As we stand at the cusp of endless possibilities in 2026, we would like to take a moment to reflect on what we achieved together in 2025. Your continued support, thoughtful feedback, and kind words ofSend Supervisor Rule Emails Within Ticket Context in Zoho Desk
Dear Zoho Desk Team, I hope this message finds you well. Currently, emails sent via Supervisor Rules in Zoho Desk are sent outside of the ticket context. As a result, if a client replies to such emails, their response creates a new ticket instead of appendingZoho Desk - Change Time Zone for all users and set default for new user
Hi, Is there a way to set a default time zone so that when user creates an account via the Zoho Desk invitation, they don't need to select the time zone via the hundreds of choice? And, for already created users, can we edit the incorrect time zone selected by the user at the account creation ? Thanks ! FredIntroducing WhatsApp integration in Bigin
Greetings! In today's business landscape, messaging apps play a significant role in customer operations. Customers can engage with businesses, seek support, ask questions, receive personalized recommendations, read reviews, and even make purchases—allAllow Manual Popup Canvas Size Control
Hello Zoho PageSense Team, We hope you're doing well. We would like to request an enhancement to the PageSense popup editor regarding popup sizing. Current Limitation: Currently, the size (width and height) of a popup is strictly controlled by the selectedWhy does Zoho’s diff viewer highlight parts of unchanged lines?
Hi everyone, I’ve noticed something odd in the Zoho editor’s diff view. When I delete a single line, the diff doesn’t just mark that line as removed. Instead, it highlights parts of the next line as if they changed, even though they are identical. Example:CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive
Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage filesPassing the CRM
Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine whenAutomating Employee Birthday Notifications in Zoho Cliq
Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition ofDrop Down Value
Hi, May I know why Zoho Flow treat this drop down as number and not as string. If so, how can I fetch the right value for filtering. This field is from Creator, in Creator upon checking by default it is a string since it's not a lookup field.Zoho Survey reminder settings are extremely confusing
Hi, I just want to set 3 reminders, one week apart from the first email out. Your form is too confusing and I don't understand. Can you simplify and be more specific regarding the language used on the form ?Add deluge function to shorten URLs
Zoho Social contains a nice feature to shorten URLs using zurl.co. It would be really helpful to have similar functionality in a Deluge call please, either as an inbuilt function or a standard integration. My Creator app sends an email with a personalisedform data load issue when saving as duplicate record is made
Hello. I have a form with a lookup when a value is selected the data from the corresponding record is filled into all of the fields in the form. But the form is loaded in such a state that if any value is changed it will take all of the values pre loadedRecurring Tasks and Reminders in Projects
Recurring tasks are tasks that are created once, and then recreated automatically after a designated time period. For example, the invoice for your billable tasks is due every week. You can set that task to recreate itself every week. Also, the futureUnable to remove the “Automatically Assigned” territory from existing records
Hello Zoho Community Team, We are currently using Territory Management in Zoho CRM and have encountered an issue with automatically assigned territories on Account records. Once any account is created the territory is assigned automatically, the AutomaticallyGoogle Fonts Integration in Pagesense Popup Editor
Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance Zoho Pagesense’s popup editor with Google Fonts support. Current Limitation: Currently, Pagesense offers a limited set of default fonts. Google FontsNext Page