Kaizen 223 - File Manager in CRM Widget Using ZRC Methods

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:
  1. async/await support
  2. Auto JSON parsing
  3. Unified API client for Zoho CRM developer tools (currently supported for CScript and widgets)
  4. 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:
  1. Fetch and display files inside the folder linked to the Lead.
  2. Preview files (images, PDFs, videos) inside the widget.
  3. Upload new documents to the same folder.
  4. Create new subfolders to keep the data organized. 
  5. 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

  1. Go to Setup > Developer Hub > Connections and click Create Connection. 
  2. Choose Zoho WorkDrive with the scopes WorkDrive.files.CREATE and WorkDrive.files.READ. 
  3. Click the Create and Connect button and proceed to authorize the connection.

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

  1. Go to Automation > Workflow Rules in the Setup page and click Create Rule. 
  2. 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. 

Notes
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:
  1. Get the current record's ID from the PageLoad event. 
  2. 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;
  1. Extract the WorkDrive Folder ID from the response to get the list of files from the folder. 
  2. 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. 
  1. 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",
          },
        }
 );
  1. 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. 
  2. 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";
}
  1. 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

  1. Go to Zoho CRM > Setup > Developer Hub > Widgets and click Create New Widget.
  1. 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
  1. 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

2. Connections - An Overview
4. CRM APIs - GET Records and Update Records 
6. CRM Customizations - Related Lists and Custom Fields.
------------------------------------------------------------------------------------------------------

Idea
Previous Kaizen: Client Script Support for Notes Related List | Kaizen Collection: Home


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

    • Kaizen #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 the

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

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

    Nederlandse Hulpbronnen


      • Recent Topics

      • How to select from pricebook when creating a salesorder or quote

        I am creating a sales order and when selecting the Products I do not see any where to select from pricebooks. How do i associate this to my orders?

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

      • Cross-application Deluge calls fail when application link name starts with a number

        I encountered an issue when calling a custom function in another Zoho Creator application within the same account. The target application’s URL/application link name began with a number, similar to: 27_example_application The following cross-application

      • Can I Build a Gaming Website Using Zoho? Need a Quick Roadmap

        Hi Dear Members, I want to create a gaming website using Zoho. Is it possible? My goal is to build a sleek, unique, easy-to-navigate, and fast-loading website for a gaming project. I want the site to look professional, user-friendly, and optimized for

      • Transformez vos webinaires en opérations automatisées

        Organiser un webinaire, c’est bien plus que passer en direct. Il faut gérer les inscriptions, suivre les participants, envoyer les enregistrements, mettre à jour le CRM… et s’assurer que chaque étape se déroule au bon moment. L’automatisation des workflows

      • Marketing Tip #1: Optimize item titles for SEO

        Your item title is the first thing both Google and shoppers notice. Instead of a generic “Leather Bag,” go for something detailed like “Handcrafted Leather Laptop Bag – Durable & Stylish.” This helps your items rank better in search results and instantly

      • Remove Due Date from Statements

        Is it possible to remove the Due Date on the Invoice transation line on statements? I have figured work arounds to get the Invoice detail on the Statement but cannot work out haw to simplify the stament by removing the "- due on xx/xx/2026" - it really

      • Cliq iOS can't see shared screen

        Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

      • Displaying only unread tickets in ticket view

        Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

      • How can I filter inactive/disable agent tickets?

        Hello, We have an user-agent that left the company and we inactive/disabled his agent. So, now I can no longer filter or search tickets that he is the current owner, or even create a rule to reassign tickets to another person when the ticket is reopen.

      • How do i move multiple tickets to a different department?

        Hello, i have several tickets that have been assigned to the wrong department.  I am talking about hundreds of automatically generated ones that come from a separate system. How can i select them all at once to move them to another department in one go? I can select them in "unsassigned open tickets view" but i can't find a "move to another department" option. I also can't seem to assign multiple tickets to the same agent in that same view. Could somebody advice?

      • Add Reauthentication Option for Zoho Bug Tracker Integration in Zoho Desk

        Hello Zoho Desk Team, We hope you're doing well. We would like to request an enhancement to the Zoho Bug Tracker integration within Zoho Desk. Current Limitation: At the moment, there is no option to reauthenticate the Zoho Bug Tracker integration in

      • Dashboards for Customers

        Is it possible to build dashboards for each customers in the community for their tickets?

      • Create Package From A Picklist

        Dear Zoho, Can it be made possible to create a package from a picklist? The reason our company makes a picklist is for that to become a package Our sales orders have 600-1000 items I hope that makes it clear that it's hard to delete 990 items when we

      • Migrating from Zoho Checkout to Zoho Billing

        I have an active Zoho Checkout account where I'm charging customers for subscriptions. Now I'm looking to upgrade and only use Zoho BIlling, in which my account in on read only mode at the moment. I can see is also tracking the customers and its payments.

      • API - Bank Accounts | Reconciliation Discrepancy

        Unless I'm reading it wrong, the documentation for the Bank Reconciliations API is inconsistent with itself. https://www.zoho.com/books/api/v3/bank-accounts/#create-a-bank-reconciliation The text definition says that the transaction_id should be a string,

      • another little issue

        So to get over showing prices with VAT we used the price lists and made the prices inclusive. The problem is now on the items it wants to show the orginal retail value which makes no sense. Ideas please

      • Handle Leading Zeros in a Number Field

        Hi, If I use a Number Field, set with Min 7 Digits and Max 7 Digits, and enter 0000001, it will result in 1 and an error as it removes the leading zeros, the same with entering 0012340 will result in 12340 and error. So I have to use a Text Field and

      • can't access zoho account

        I can't log in to my zoho account, can you help me

      • HTML PDF Templates / Build From Scratch option not visible for Custom Modules

        Hi everyone, I am working with Zoho Books Custom Modules and trying to create a custom 4x4 package label PDF template using HTML/CSS. According to the official Zoho Books documentation for HTML PDF Templates, there should be an option like: Settings →

      • Virtual Option for Fields

        Hi, I would like to be able to choose another option other than Read-Only or Disabled, such as Virtual. And with Virtual, the field is shown on the form and avilable in rules, but NOT saved to the Database. A use case is having multiple Large Lists of

      • Prefix & Suffix on Single Line, Number, etc.

        Hi, I would like to have the same Prefix and Suffix that was added to the Unique ID on Text and Number Fields. Use case could be as basic as temperature, as per another Idea I have to use Single Line (Text) for a number that might have leading zeros today,

      • Customer 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 be

      • Locked out of MFA due to changing phones

        I have been locked out of my Zoho Books account since i changed my mobile phone over. I can get the OTP through the ZOHO Books software but i cant confirm using my phone app as nothing appears to authorise. I need to know how to register/set up my new

      • 👍 Zoho CRM's Notes now gets Reactions and a new look

        Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

      • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

        Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

      • Zoho books and venmo

        Hi, Is there a way to hook Venmo into zoho books? I have a Venmo business account and want to be able to sync that. I know you can do it with the paypal integration but I dont want to use paypal for the fees and that doesnt allow me use/integrate my current

      • Updating Unit Code for New Item Creation, Quote and Invoicing is so inconvenient

        The Zoho Team has implemented many updates, but these updates should be optional. Before rolling out any new feature, they should already have a solution in place that allows users to remove or disable it if they choose not to use it. Just yesterday,

      • Payroll needs to automatically remit taxes, not just give me the calculations

        Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

      • Creating new Teams meeting from CRM doesn't enable Team functions in the meeting

        Hi I'm trying to set up the meeting integration and I've seen that when I create a Meeting in the CRM and set the location to Online and the Provider to Teams, and complete the boxes, add a participant etc, whilst the meeting is created in Teams, the

      • Approval Process configuration is now more flexible and fully customizable

        The Approval Process is back with an improved user experience designed to make it easier to build structured, flexible, and intuitive approval workflows. Here’s a look at some of the key enhancements: Name Your Rules & Stages You can now give each approval

      • Admin Logging in as another User

        How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Latest Update (27th April 2026): With the early

      • Introducing Approval SLA for Approval Processes

        Approvals can sometimes be delayed when approvers do not respond within the expected timeframe, which can slow down your recruitment processes. With the new Approval SLA in Zoho Recruit, you can set deadlines for approval requests and define automated

      • Introducing Microsoft Word Integration in Zoho Contracts

        We are excited to announce a new feature that brings contract authoring and negotiation in your familiar environment — the Microsoft Word Integration. What This Integration Brings The Microsoft Word Integration connects Zoho Contracts with the Microsoft

      • Map My Client Locations for Zoho CRM Extension: Turn CRM Addresses Into Action

        Hello everyone, Your CRM knows who your customers are. Now, see where they are on the interactive map directly from Zoho CRM. Introducing Map My Client Locations for Zoho CRM, an extension built for businesses that rely on sales visits, field service,

      • Scheduled and Automated Report Delivery from Zoho Projects

        Zoho Projects has useful reports including task reports, timesheet summaries, and workload charts. However, there is currently no way to schedule these reports to be automatically delivered to stakeholders on a recurring basis. This means: Project managers

      • Collaborate Visually with Whiteboard in Zoho Projects

        Whiteboard in Zoho Projects allows you to collaborate visually by creating diagrams, annotating designs, and sketching project workflows using shapes, text, and images within project modules. Team members can work simultaneously, improving productivity

      • Fields in MS-Word Template

        With the new MS-Word integration, how does one create fields in an imported MS-Word document which can then automatically be populated with an Intake Form?

      • Zoho Bookings Flow Step not Triggering on Appointment booked

        I noticed yesterday that my appointment booked flows were not triggering when we had booked appointments in Zoho Bookings. I checked the trigger and noticed the trigger values updated to be defined to a workspace and service event rather than our whole

      • UCP: Why We Killed the Multi-Portal Mess and Simplified Customer Self-Service

        Let's talk about the multi-portal mess nobody wants to admit that it exists. Your customer needs an invoice from one app, wants a ticket update from another, and has a project waiting in a third, each behind its own login, its own UI, its own "was it

      • Next Page