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

    • Default/Private Departments in Zoho Desk

      1) How does one configure a department to be private? 2) Also, how does one change the default department? 1) On the list of my company's Zoho Departments, I see that we have a default department, but I am unable to choose which department should be default. 2) From the Zoho documentation I see that in order to create a private department, one should uncheck "Display in customer portal" on the Add Department screen. However, is there a way to change this setting after the department has been created?

    • What's New in Zoho Inventory | Q2 2025

      Hello Customers, The second quarter have been exciting months for Zoho Inventory! We’ve introduced impactful new features and enhancements to help you manage inventory operations with even greater precision and control. While we have many more exciting

    • "Spreadsheet Mode" for Fast Bulk Edits

      One of the challenges with using Zoho Inventory is when bulk edits need to be done via the UI, and each value that needs to be changed is different. A very common use case here is price changes. Often, a price increase will need to be implemented, and

    • Cloning Item With Images Or The Option With Images

      Hello, when I clone an item, I expect the images to carry over to the cloned item, however this is not the case in Inventory. Please make it possible for the images to get cloned or at least can we get a pop up asking if we want to clone the images as

    • ZOHO BOOKS - RECEIVING MORE ITEMS THAN ORDERED

      Hello, When trying to enter a vendor's bill that contains items with bigger quantity than ordered in the PO (it happens quite often) - The system would not let us save the bill and show this error: "Quantity recorded cannot be more than quantity ordered." 

    • Stock count by bin location

      Is there a configuration to make a stock count by bin or area and not by product. these is useful to manage count by area Regards

    • Server-based Appication API access for Social, Sites, Flow, Pages.

      Hello, I am trying to hook up API access for a number of apps and I have hit a wall trying to add these scopes to the API feed. We cannot find the correct way to list the scope for these Zoho apps; Social, Sites, Flow, Writer. Error on web-page comes

    • Zoho Survey: Bulk Exporting Raw Data (CSV/Excel) from 100+ Individual Survey Projects

      Hi Zoho Community, I am currently managing a 360-degree evaluation process that involves 100+ individual survey projects (one separate survey for each employee being evaluated). I need to download the raw response data (CSV or Excel) for all 100 surveys.

    • ERROR: Product type cannot be changed for Items having transactions.

      I have mistakenly added a product type as goods for an item that was a digital service. Now when HSN/SAC became mandatory, this brought my attention to this error I did. So I tried changing the product type but it displayed this error message Product

    • Combine and hide invoice lines

      In quickbooks we are able to create a invoice line that combines and hides invoices lines below. eg. Brochure design         $1000 (total of lines below, the client can see this line) Graphic Design           $600 (hidden but entered to reporting and

    • Include Notes in email templates for task

      Hi there,  I am setting up some automated email reminders via "setup-automation-workflow" to be send out when a task is being edited. I would like to include the "task notes" in the email. Is that possible? I do not find that field in the dropdown table when setting up the email template. Is it also possible to trigger the workflow rule when a new note is added to the task? In my opinion that should be quite essential, since a task update is often done by adding a new note to the task.... Also i

    • [Free webinar] Custom domains for portals in Zoho Creator - Creator Tech Connect

      Hello everyone, We’re excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar featuring in-depth technical sessions designed for developers, administrators,

    • Marking a meeting 'done'.

      I would like to somehow mark a meeting 'done' and placed under the contact's page rather than deleting it and having no record of it. Am I missing a button that does this?

    • Partial payments for retainer invoices

      When a customer does not pay the entire retainer invoice there is no way to apply a partial payment. PLEASE add this function.

    • Can I export to PDF in Zoho Learn

      I have seen help pages where export to pdf options are available but I do not see that option available from the application. I see that exprt is available in my free trial version but that is only to html pages. I need to be able to export my manuals

    • Service line items

      Hello Latha, Could you please let me know the maximum number of service line items that can be added to a single work order? Thanks, Chethiya.

    • Sending emails via Books

      Anyone else getting similar problems recently ??..... Hi, Your message to the following recipient was not delivered. Please find the details below.  Bounce Details: Bounced Address : someone@google.com Bounce Reason : other ; Status : 5.0.0 (undefined status) ; Daignostic-Code : smtp;542 someone@google.com Rejected ; Bounced Time : Sep 05, 2017 06:37 PM BST Regards, Zoho Team The email addresses were fine only a few days ago but are now being rejected ?

    • PDF Generator Upgrade

      Hi Team, What will happen if I don't make any changes for existing template. Zoho just ask us upgrade but haven't tell the benefit. Zoho Corporation

    • No Need To Fix Something That Is Working

      Zoho Books is a great financial tool which helps businesses to become more efficient and productive with day-to-day operations. As such, every change, upgrade, improvement needs to be carefully thought before implemented in the software and I'm sure Zoho

    • Total Cost in reports showing zero

      The image below shows my issue. The column Total Cost should show the cost to our company based on hours logged and the employee's rate. For instance, if the person working on Subtask 1 is paid 20/hr, then Total Cost should display $160 ($20x8 logged

    • Zoho Books (and other finance suite apps) - Retrospective Linking of Invoice and Sales Orders to Quotes.

      In some cases, Quotes and Invoies may be created sperately instead of using the convert feature. In this feature request I am asking for the Finance Suite team to consider adding a lookup field to reference the quote on Invoices and Sales Orders, or some

    • Bring real app analytics into Zoho Creator apps with Zoho Apptics

      We’re kicking off the year with a release we’ve been looking forward to for a long time. After being in the works for a while, Zoho Creator and Zoho Apptics are now officially integrated, bringing in-depth product analytics directly into the Zoho Creator

    • Early Access: Check Printing in Zoho Books

      Hello Everyone,   Are you constantly writing checks to pay your vendors?   We've got a great news to share with you! You can now pay your vendors by writing and printing a check directly from Zoho Books. The feature is ready and we'll be rolling it out to our customers in phases.  It is available in the  US Edition of Zoho Books and also in the Global edition, where the country is selected as USA and the currency is USD.   Here’s a summary of what’s possible:   1. Write and print a check. 2. Make

    • ZohoMail's outbound webhook sends incorrect folderId and messageId

      I used a webhook (outbound) from within ZohoMail to send message details when a new message arrives that meets specific criteria. I received this data correctly. Now I want to get the attachment from this email message. When I made an api call using folder

    • Use URL field to populate Image in a Email Template

      We have two records Record 1: Appointments (with a Lookup to Doctors module) Related Record 2: Doctors (with a URL field that is an image of the doctor) We would like to populate a CRM email template with the image of the URL field for the related doctor

    • Ability to add VAT to Retainer Invoices

      Hello, I've had a telephone conversation a month ago with Dinesh on this topic and my request to allow for the addition of VAT on Retainer Invoices.  It's currently not possible to add VAT to Retainer Invoices and it was mutually agreed that there is absolutely no reason why there shouldn't be, especially as TAX LAW makes VAT mandatory on each invoice in Europe!   So basically, what i'm saying is that if you don't allow us to add VAT to Retainer Invoices, than the whole Retainer Invoices becomes

    • Zoho Bookings Forge: A hands-on workshop series

      Hello all! We’re hosting a five-part, hands-on workshop series to help you optimize Zoho Bookings for your business. In these sessions, we’ll cover key features, practical use cases, and clear steps to get started or improve your current setup. Here are

    • Delete button

      Hi, The delete button were hide into the three dot button. Can I display outside? why Zoho make this update?

    • Zoho Vault CLI for Developers and Automations

      Hi everyone, If you're managing credentials in scripts, CI/CD pipelines, or automation workflows, Zoho Vault's Command Line Interface (CLI) can help you securely access and manage secrets directly from your terminal. Zoho Vault was launched in 2013 as

    • Zoho Subscriptions -- Zoho Commerce integration

      Is there integration between Zoho Subscriptions and Zoho Commerce? I would like to create subscription plans in Zoho Subscritpions and list them for on my Zoho Commerce store.

    • Synching changes to Stripe when changes are made in Zoho Billing

      We have a situation where we have merged customers in Zoho BIlling and then found out later that the payment in Stripe was not updated and still associated with the old customer record. The card gets updated and billed, but that payment is still associated

    • How can I link Products in a Deal Subform to the Products Module

      Hello, I have a pricing subform on our Deals page and use a lookup field to associate a product with each line. I want to be able to look at a product page within the Products module and see a list of the deals connected to that product. I have this working

    • Help Center and SEO: Any Benefit to My Domain-Mapped Website Ranking?

      First of, I love the Help Center which I've just decided to integrate into my website to replace its old-fashioned FAQs. So much more to achieve there now! Lots of new benefits to the site visitors and to me in terms of organizing and delivering all the

    • Business Hours with lunch break

      Our business hours are: mon - fri 08:30 - 13:00, 15:00 - 18:30. How can I handle the lunch break? If I use 8:30 - 18:30 it obviously breaks SLA. Thanks

    • Enable Free External Collaboration on Notecards in Zoho Notebook

      Hi Zoho Notebook Team, I would like to suggest a feature enhancement regarding external collaboration in Zoho Notebook. Currently, we can share notes with external users, and they are able to view the content without any issue. However, when these external

    • Zoho Commerce

      Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if not

    • Multi-currency in Zoho CRM Forecast and Reports

      As a company we have branches in 4 different countries with as many different currencies. Our Sales Teams would like to work with their local currency as much as possible. The Forecast module using only 1 currency is practically usable only by the sales

    • Zoho Projects Android and iOS app update: Conditional layout rules for Tasks

      Hello everyone! Task conditional layout rules configured on the web app(projects.zoho.com) are now applied on the Zoho Projects Android and iOS app. Conditional layout rules can be set for the Add/ edit task form and it allows you to change the property

    • How to account for vat with postponed VAT accounting

      Hi everyone, looking for some help with postponed VAT accounting, I use DHL express for my imports and they used to pay the VAT for me and then invoice me. I could then log this as a bill and the VAT element from import was recorded as input VAT, all

    • Zoho CRM WooCommerce Integrtation

      Looking for a solution for my 50 client to show detailed analytics on source of traffic that led to events, leads, conversions. Hi all, I have not been able to find a workable guide or solution to how exactly step by step integrate the Zoho CRM with WooCommerce

    • Next Page