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

    • 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

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

    • Recent Topics

    • Career site URL - Suggestion to modify URL of non-english job posting

      Hi, I would like to suggest making a few modification to career sites that are not in english. Currently, the URL are a mix of different languages and are very long. It makes for very unprofessional looking URLs... Here is an example of one of our URL

    • Introducing Contract Settings & Backdated Contracts in Zoho Contracts

      We are rolling out updates that give you more control over how contracts are created and managed in Zoho Contracts. From defining default workflows with Contract Settings to aligning agreements with real timelines using Backdated Contracts, these enhancements

    • Celebrating our customers on International Client's Day

      Hi everyone, Every customer is part of our Zoho Desk family, and we wouldn’t want to miss celebrating you on this special day. This International Client's Day, we’d like to take a moment to appreciate every customer who has helped us grow and build meaningful

    • Faster Ticket Response with use of Snippets in comments

      Hello everyone, Responding to tickets often involves repeating the same messages, whether it is sharing updates with customers or leaving notes for internal collaboration. To make this easier and more consistent, we are allowing agents to use snippets

    • Improving Zoho Creator's email deliverability

      Hi all, We're pleased to announce updates to email handling in Zoho Creator to improve the deliverability of the emails sent from the Creator platform. These updates have been designed keeping in mind the fact that emails from domains with strong sender

    • What's New in Zoho Billing | February 2026

      February brings a powerful set of updates to Zoho Billing, from smarter subscription management and flexible payment options to better reporting and more control over your hosted pages. Here's everything that's new this February. Create Subscriptions

    • Reassign Partially Saved Entries

      Hi, I would like to be able to go to Partially Saved Entries and like the option to delete them I would like the option to multi-select and be able to reassign them to another user to complete (Such as when a user has left the company). Thanks Dan

    • 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

    • Issue creating a YTD report with last years numbers

      I am looking to create a widget to compare the YTD leads we have in 2023 to the YTD leads we had in 2022. I'm having issues with the aggregate formula creation to gain access to the 2022 Leads YTD data point. Feeling like this is a common view of data

    • Brand Studio Projects in Analytics

      Hi All, Currently pulling my hair out over trying to link together some social media posts for a reporting dashboard in Analytics, so I thought I'd see if anyone on here had a solution. Our Marketing Team created a LinkedIn campaign in Zoho Brand Studio,

    • Manage Testing Process in Zoho Sprints

      Agile framework supports a robust quality assurance system that incorporates continuous testing throughout the development lifecycle of the product. The agile testing team focuses on planning the testing around the development, identifying defects early

    • Announcing the Zohotshots of the ZDC Hackathon 2025

      Hey everyone, The wait is finally over! After weeks of building, experimenting, and pushing creative boundaries, we’re excited to announce the winners of the second edition of the ZDC Hackathon. This edition brought together an incredible community of

    • ZOHO CRM Button Integration

      Hi Team, I’m currently working with Zoho CRM along with a custom application where I fetch deal details from the CRM and use them based on my requirements for each deal. Now, I want to enhance this setup. I plan to create a button on the Deal Detail page

    • Major journey crash and not loading. Zoho Marketing Automation

      Hi all. Last night (19MAR, 2026) Marketing Automation for a specific journey completely crashed, and since the crash the specific journey has failed to load at all (blank journey canvas, no journey appears, no menu accessible) but other separate journey's

    • Subtotals per Header

      Hey, we would like to display subtotals per header in our invoices:

    • Candidate Assessments, no workflows.

      I have an issue where I would like to trigger a workflow based on a candidate assessment being completed. Sometimes a returning candidate will complete a second assessment, on completion the status of the candidate will be updated to "Unqualified" if

    • Mail Merge in Zoho Desk

      Hello Team, Do we have an option of mail merge within Zoho Desk like we have in Zoho CRM? We have a requirement to generate some pdf file in the form of mail merge doc from the ticket.

    • Support Required for Integrating Zoho SalesIQ in Flutter Web

      Hi Team, I have developed a Flutter application and I am currently using the salesiq_mobilisten: ^6.5.4 package. As per the package documentation ( https://pub.dev/packages/salesiq_mobilisten ), it supports only Android and iOS, and it is working fine

    • Zoho vault filling in a form it's not supposed to fill in

      Hey there, I have a problem with ZOHO Vault autofill. In a software package, we have these options: For some reason zoho vault always replaces what's in the top option and fills a 2fa password in there, and then saves that value.. Meaning whatever was

    • Zoho Booking Integration with Desk

      Just wanting to share something in case it helps someone else who may run into a similar use case as we did. Issue: Currently, the Zoho Booking integration with desk will drop a comment into the ticket when a customer books a time, however it won't change

    • Let us view and export the full price books data from CRM

      I quote out of CRM, some of my clients have specialised pricing for specific products - therefore we use Price Books to manage these special prices. I can only see the breakdown of the products listed in the price book and the specialised pricing for

    • Syncing calendar with Google Calendar doesn't work when events are sent to auto repeat

      Hi... The ZOHO CRM -- GOOGLE CALENDAR sync is broken. If I create a single event on either side, sync works, but if I create an event with auto repeat on either side it doesn't work. Furthermore, events created before the sync don't show up in the calendar.

    • Organization 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 to

    • Notification of Interaction Assignment

      If a user is assigned an interaction, they should be notified via email. These are almost useless because if I assign an interaction for someone to respond to, they dont know that I assigned it to them without me telling them or them logging in and discovering

    • Countries List Global Set- Complete with Phone Country Code and Continent.

      Dear Zoho Team I saw your recent addition to the Global Sets regarding the Countries list and states. While working on it, why didn't you also add things like Continent and Phone Country Code? Also, some ISO codes from some Countries/regions are mis

    • Custom Display Field for Lookup Dropdowns in Zoho CRM

      Could Zoho CRM support changing the display field in lookup dropdowns, like Zoho Creator does? This would make it much easier to select the right record by showing a more useful field instead of only the default one. It would improve speed, clarity, and

    • Message as bot

      I would like to be able to send a Cliq message truly as a bot. the current implementation of this function, while it sends the message as a bot it sends that message inside a chat from the user how authenticated the flow cliq connection instead of directly

    • A2P 10DLC Opt-in Rejection Issue with Zoho Creator Public Form

      Hi everyone, I’m working on an A2P 10DLC SMS campaign and running into repeated rejections due to opt-in issues. I’m using Zoho Creator for the registration flow. The form is public (no login required). Users enter their phone number and there is an unchecked

    • Trouble with using Apostrophe in Name of Customers and Vendors

      We have had an ongoing issue with how the system recognizes an apostrophe in the name of customers and vendors. The search will not return any results for a name that includes the mark; ie one of our vendors names is "L'Heritage" and when entering the

    • Books <-> CRM synchronisation with custom Fields

      Hello, We are synchronising Books Customers with CRM Accounts. In CRM Accounts I set up last year a "segments" multiselect field shown below In Books, I set up a custom multi-select field with the same value as in the CRM And set up the synchronisation inside Books. Want to synchronise the Books Segments with the CRM Segments, but the later doesn't exist, and another non-existing is there ?! First, I don't understand where the field Segmentation is coming from. Second, I set CRM Segmentation to sync

    • Recording overpayment?

      So a customer just overpaid me and how do I record this? I can't enter an amount that is higher than the invoice amount. Eg. Invoice is $195 and he sent $200. He's a reccuring customer so is there a way to record so that he has a $5 advance for future invoice?

    • Introducing the New Zoho Assist Quick Support Plugin

      We are thrilled to announce the new Zoho Assist Quick Support Plugin, the upgraded and enhanced version of the Zoho Assist Customer Plugin. This new plugin allows organizations and IT administrators to deploy it directly onto their customers’ devices,

    • Automate your signing workflows with Zoho Sign + n8n

      Hello! We're excited to announce that Zoho Sign is now available as a community node on n8n, a popular open-source workflow automation platform used by tens of thousands of teams worldwide. n8n lets you connect apps, APIs, and services through a visual

    • Retainer invoice in Zoho Finance modlue

      Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.

    • Spotlight #27: Embed visual collaboration Spaces in your presentations using the Vani add-on

      Hello everyone! This month’s spotlight feature is the Vani add-on for Zoho Show. Every time you pause your presentation to open another tab or pull up supporting material, you lose a bit of momentum. At Zoho Show, we design features that keep everything

    • CRM

      Is anyone else experiencing this issue? Our company is not moving out of using Gmail's web app. It just has more features and is a better email program than Zoho Mail. Gmail has an extension (Zoho CRM for Gmail) that we're using but we've found some serious

    • Good news! Calendar in Zoho CRM gets a face lift

      Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities

    • Global Search / Command Palette in Live App

      Zoho Creator applications can contain many forms, reports, pages, and dashboards. While navigation inside the app is smooth, users still need to move through multiple menus or screens to find specific records or open particular modules. Currently, in

    • New 2026 Application Themes

      Love the new themes - shame you can't get a little more granular with the colours, ie 3 different colours so one for the dropdown menu background. Also, I did have our logo above the application name but it appears you can't change logo placement position

    • Smarter appointment allocation with round-robin distribution

      Greetings from the Zoho Bookings team! We’re excited to introduce the Appointment Distribution feature, a new way to decide how appointments are assigned among users. By default, appointments are distributed evenly across all event types, but this enhancement

    • Next Page