Kaizen 202 - Answering Your Questions | Testing and Using REST APIs in Widgets

Kaizen 202 - Answering Your Questions | Testing and Using REST APIs in Widgets



Hello Developers!

Welcome back to a fresh week of Kaizen! 

Thank you for your active participation in sharing feedback and queries for the 200th milestone. This week, we will look at the following queries related to widget:
  • Widget Testing 
  • Using REST API in Canvas Widgets: Make HTTP calls in widgets (e.g., to external tax or product APIs)
Here are the queries that we have already answered for you from this milestone:
  1. Kaizen #200 - Answering Your Questions | Token generation using the Python SDK
  2. Kaizen #201 - Answering Your Questions | Webhooks, Functions, and Schedules

Widget Testing

One of the queries we received was simply stated
Quote
Widget Testing
 without any specific context. Since the user has not provided detailed input, we are assuming this is about how to test a widget during development.

You can test your Zoho CRM widget locally using the Zoho CLI. Run the following command from the root directory of your widget project:

zet run

This launches the widget on a local server where you can validate the UI and functionality before pushing it live.


Since the localhost connection opens in a new tab and is not private, you will need to manually authorize it. 

Click Advanced, then choose Proceed to 127.0.0.1 (unsafe) to continue. 

Notes
Note

If your widget needs to access data from your Zoho CRM organization, such as fetching or updating records, it must be deployed within a Zoho CRM iframe. To do this, you should upload the widget through the Zoho CRM Widgets setup page.

We recommend using the sandbox environment in such cases before deploying the widget to your production environment.

Making HTTP Calls from Widget

Following is a query we received from a user:
Quote
Using REST API in Canvas Widgets: Make HTTP calls in widgets (e.g., to external tax or product APIs)
Yes. You can make HTTP requests to external services from any type of Zoho CRM widget using the ZOHO.CRM.HTTP object from the Widget JS SDK.

Canvas Widget - What's Supported? 

Though full widget support within Canvas is on our roadmap, currently, you can invoke widgets from a Canvas view using Client Script. This lets you render widgets inside fly-outs or pop-ups. Here is a quick start guide on how you can achieve it:

Create a Widget

1. Create a widget project and code your logic using Zoho CLI as explained in our widget help page.

2. In Zoho CRM Developer Hub, create a new widget and set the type as Button.



Create a Client Script

3. Navigate to Client Scripts in Developer Hub and click New Script.

4. You can create your script either in the Modules or Commands category based on your use case. 

For assistance, refer to the step-by-step guide on Creating Client Script and Commands.



In the Category Details section, ensure to select Canvas as the page type. Canvas views are supported in the following page contexts: List, Detail, Create, and Clone. 

Choose the one that aligns with where your widget needs to appear.


5. Here is the sample script to render widget in a pop-up. 

ZDK.Client.openPopup({
api_name: 'Canvas_Widget',
type: 'widget',
animation_type: 4, 
height: '450px',
width: '450px',
},
{
data: 'sample data to be passed to "PageLoad" event of widget'
}); 

Here is the sample script to render widget in a fly-out. 

ZDK.Client.createFlyout('myFlyout', { 
animation_type: 4, 
height: '600px', 
width: '500px'
}
);
ZDK.Client.getFlyout('myFlyout').open({ api_name: 'Canvas_Widget', type: 'widget' });

For detailed guidance, check out our Client API documentation on Pop-up and Fly-out.

You can also check out the Kaizen #99 on Rendering Widgets using Client Script for a detailed guide based on a real-time use case. 

Using REST APIs from External Applications

The ZOHO.CRM.HTTP object enables you to make secure API calls directly from the Zoho CRM widget. It acts as a proxy, routing requests through Zoho servers, which eliminates the need for external applications to support CORS.

While this SDK is primarily used for integrating third-party services, it also supports Zoho CRM API calls. This provides you with greater flexibility to:
  • Customize header and parameter structures
  • Maintain a consistent calling pattern for both internal and external APIs within the widget.
Here is a basic syntax of the SDK:

ZOHO.CRM.HTTP.<method>({
  url: "<request-url>",
  headers: {
       // Request headers as Key-value pairs
    "Authorization": "Bearer <token>" // example
  },
  params: {
    // Request params as Key-value pairs

   "ids": "1234567890" // example
  },
  body: "<stringified JSON>", // Required for POST, PUT and PATCH
})
.then(function(response) {
  console.log("Response:", response);
});

Supported Methods
  • ZOHO.CRM.HTTP.get({ ... })
  • ZOHO.CRM.HTTP.post({ ... })
  • ZOHO.CRM.HTTP.put({ ... })
  • ZOHO.CRM.HTTP.patch({ ... })
  • ZOHO.CRM.HTTP.delete({ ... })
For more detail check out the HTTP method section of JS SDK help page.

Samples using Zoho CRM Contact Roles API

Let us explore a complete CRUD (Create, Read, Update, Delete) example using Zoho CRM’s Contact Roles API.

These structures have to be used within the JS function where you are executing your code logic. 

POST Contact Roles


// Prepare the API request
        var request = {
          url: "https://www.zohoapis.com/crm/v8/Contacts/roles",
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          },
          body: {
            "contact_roles": [
              {
                "name": "Sales Lead",
                "sequence_number": 1
              }
            ]
          }
        };
         // Make API call 
        ZOHO.CRM.HTTP.post(request).then(function(data) {
          console.log(data);
 })

GET Contact Roles


// Prepare the API request
var request = {
          url: "https://www.zohoapis.com/crm/v8/Contacts/roles",
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          }
        };
        // Make API call 
        ZOHO.CRM.HTTP.get(request)
          .then(function(response) {
 console.log(response);
})

UPDATE Contact Roles

// Prepare the API request
        var request = {
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          },
          body: {
            "contact_roles": [
              {
                "name": "Evaluator",
                "id": "5545974000000006871"
              }
            ]
          }
        };
        // Make API call 
        ZOHO.CRM.HTTP.put(request).then(function(data) {
          console.log(data);
 })

DELETE Contact Roles


// Prepare the API request
        var request = {
          params: {
            ids: "5545974000002617002"
          },
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          }
        };
        // Make API call 
        ZOHO.CRM.HTTP.delete(request).then(function(data) {
          console.log(data);
 })

We hope you found this post useful. 

Let us know if you have any questions in the comments or drop us an email at support@zohocrm.com.

Cheers!

------------------------------------------------------------------------------------------------------------------------

Related Reading


------------------------------------------------------------------------------------------------------------------------

    • Sticky Posts

    • Kaizen #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! 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.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Update date field custom module using Zoho Inventory Update Record

      I'm trying to update a date field in a custom module inside zoho inventory but keep getting this error: "code": 6, "message": "syntax.error.invalid.json" This is how my code looks: campo_sku = Map(); campo_sku.put("cf_sku_master",i_sku); campo_sku.put("cf_sku_common",i_sku_common);

    • Are we able to bring FontAwesome icons into a Zoho Page?

      The OOTB Zoho icons are insufficient. Also, are we able to pull in standard emojis?

    • CRM Hack #3: How to update formula functions for already created records.

      Hello everyone! It’s Wednesday and we are back with yet another hack.. I'm sure you've used formula fields to meet some requirements specific to your business. Let's consider an example each for external (customer-facing) and internal facing scenarios

    • Inventory Blocking for serial number tracking.

      Hi We are using multiple channels to get orders which adds the product to committed stock. But is there a method to block serial number of products based on FIFO automatically when an order is created, or when SO is approved?

    • CRM List view for text fields that check "Does not start with" or "Does not end with"

      So these filter options are available when making reports and such, but they don't seem be available when creating a filtered view.  The text filter options there are are: "contains", "does not contain", "starts with", "ends with". Is there an easy technique to recreate the "Does not start with" and "Does not end with" functionality that I'm missing?

    • Is PageSense included in Zoho One?

      PageSense is marketed as part of the Zoho One product suite, but when I login to PageSense it prompts me to upgrade (in 31 days I suppose) even though I am on a Zoho One subscription. Is PageSense included or not? If not, then please don't market it as

    • [Product Update] Introduction of Task Lists Module in Zoho Projects Integration

      Dear Customers, As part of our ongoing efforts to enhance our integrations, we’re introducing support for the "Task Lists" module in the Zoho Projects integration with Zoho Analytics. Currently, Task List-related information is available within the Tasks

    • Marketing Automation Access

      Hello, Is anyone having issues getting started with Marketing Automation? I keep getting an internal error during the start up screens. I've been trying and it hasn't been resolved in a week. Is the app worth waiting for or should I just use campaigns?

    • Best Way to Integrate a Shared Sales Inbox with Zoho CRM

      I’m setting up a shared email inbox (e.g., sales@mycompany.com) for our sales team and want to integrate it with Zoho CRM Leads and Deals so that multiple team members can collaborate efficiently. Since Zoho CRM doesn’t support IMAP for shared inboxes,

    • 【Zoho CRM】詳細ページからサブフォーム行追加の禁止

      ■概要 いつの時点からか確認ができなかったのですが、サブフォームの行を編集ページではなく詳細ページから直接追加出来るようになっていました。便利な機能追加なのですが、サブフォームでクライアントスクリプトを使ってフィールドの読み取り専用設定などをしている環境だと、詳細ページから行挿入されるとクライアントスクリプトが動作しないので想定していたフィールドの読み取り専用設定が効かない状態になってしまいます。クライアントスクリプトを使って、詳細ページから行挿入されると保存できないようにすることで間接的に詳細ページから行挿入を禁止する方法をご紹介します。

    • The Social Wall: April 2025

      Hey everyone, Welcome to the April edition of the Social Wall, where we keep you in loop about the latest feature updates, changes, and more. Let's see how April went by: Manage and respond to comments on your Threads posts from Inbox With the latest

    • link non- VAT tax invoice to Fatoora portal

      Hi all Actually I have VAT tax invoice and non- VAT tax invoice About VAT tax invoice I have no problem I can link any invoice to Fatoora portal But the problem in the non VAT tax invoice because I have customers outside of Saudi Arabia No VAT ID no CRN

    • Pdf/A-3 ( embedded with xml)

      Mr. Abdur rahman, Please give me answer of my questions. Does your software generate PDF/A-3 (with embedded XML) and XML formats, fully compliant with ZATCA Phase 2 for B2B invoices? Are Phase 2 fields (e.g., UUID, Previous Invoice Hash, Invoice Counter

    • Updating field from the UI or from function take more that 1 minute to be updated

      I have activity order model with dropdown status field, I've changed the status from Completed to Canceled on the CRM like on the attached image: But once I fetch the record on function the record didn't updated behind the scene The strange thing in here

    • Zoho Voice & Zoho CRM

      I was using Twillio to send automated messages to my clients when a new lead comes in Zoho CRM. The twillio integration was stopped by Zoho and hence I used Zoho Telephony which doesn't support SMS. Now someone from Zoho told me to use Zoho Voice. I bought

    • Deleting unwanted ticket replies

      Hello, In a Zoho Desk Ticket thread, sometimes one of the recipients has auto-reply activated. This creates a new message in the Ticket thread that not only pollutes the thread, but most importantly cannot be replied properly because usually auto-reply e-mails don't do "reply all", so the other recipients are not included. I want to delete such a message in the Ticket thread. I searched the help of Zoho Desk, but only found a way to mark as Spam (https://help.zoho.com/portal/kb/articles/marking-support-tickets-as-spam)

    • Why Format section gets disabled when we create Merge Template over PDF

      I need some assistance I have a Client who is going to give certificates to users who passes his exam. So, I am using mail merge but in ZOHO writer after I upload the PDF and create merge Template over PDF the format Section gets disabled. My problem

    • Import contacts - invalid pattern with encrypted emails

      Hello, I have a list of encrypted emails provided by an external partner. They need to be imported into a custom list. Problem is, the import process is ignoring the entire list, maybe because of the weird format? Since they are encrypted, they all look like this example: d+NDd5wqi3neiQWEwquie1bnwquien@example.com What can I do to import this list? Also, is there a way to allow my user to add contacts without this "ignore filter" from now on? The fact is that our partner will provide us a new list

    • Important: Microsoft Outlook Bulk Email Updates

      Dear Marketers, We want to bring your attention to an important upcoming change announced by Microsoft (Outlook) that will impact users sending bulk emails to Outlook.com, Hotmail.com, and other Microsoft-hosted inboxes. This update focuses on strengthening

    • UI and other enhancements in Community module

      Hello everyone, The Community module has undergone a UI revamp to improve user experience. In addition, we have introduced Status Board and Bulk Approval of posts to provide better engagement. Improved User Interface The new interface brings the following

    • Add Pre-Trigger Filter Capability for Webhook Triggers in Zoho Flow

      Dear Zoho Flow Team, Greetings, We’ve been working extensively with Zoho Flow and appreciate the flexibility it offers for automation across our tools. We’d like to request a feature enhancement specifically related to Webhook triggers: Use Case: Currently,

    • Getting data from subforms

      Bonjour, I have a Product form that has a subform with 2 fields : Unit (Kg, boxes...) and Price. In an Order form, I select an item from Product, and I already managed to input the Unit choices in a dropdown field with the following script: RefProduit

    • Support for Transparent, Shadowless Panels in Zoho Creator Pages

      Hi Zoho Creator Team, Hope you're doing well. We would like to request more design flexibility in Zoho Creator, specifically the ability to create panels with no background, border, or shadow. Use Case: In our app, we’re designing a dashboard that uses

    • Looping issues

      Can someone please explain why this doesn't infinitely loop, but the second one does? How can I get around this? This one loops ⬇️

    • Automation#33: Automate Splitting Names for Existing Contact Records

      An organized directory – who doesn't love one? Previously, we explored how to split contact names into First Name and Last Name for new contacts in Zoho Desk. But what about existing contacts already in your database? This week, we bring you a custom

    • Automation#31: Automate Splitting Names for New Contact Records

      Hello Everyone, This week, we present to you a custom function, which allows you to split the first and last names from the user's email ID based on the separator used in the ID. Having grown into a large firm, Zylker Techfix aims to optimize its processes,

    • Shopify sales orders creating a new account in Zoho

      Hi all, I am having a slight issue with the shopify integration. Whenever a customer purchases from the store, shopify automatically creates a sales order in inventory. The issue is that it creates a new account for the customer's name instead of attaching

    • Bar left hand side iphone app

      Hi, using the Zoho Mail app on my iphone and I can see that some emails in the list have a thin, pale bar at the left but I have no idea what this signifies? See image. Any idea? Thanks

    • automatic time stamp and field age

      Hi, I am trying to note the time when a certain field is updated in Zoho CRM. I've been able to create a rule that would trigger the respective field update. However, for the field where I'd like the current time stamp to be automatically recorded, I'm not being able to add a dynamically generated time. I can only add some static text. Is there a way to dynamically generate time stamps? Subsequently, I'd like to know how to show the age of the field once I've generated the time stamp (for e.g.2 months

    • NOW Zoho Creator still cannot bulk download Image or File Upload Field

      The filedownloader has been deprecated for 5 years. Until now, we still cannot have a replacement tool. How can we bulk download the file that we uploaded to Zoho Creator. Previously, it was so simple to bulk download all those files. But now failed to

    • Zoho Creator delete validation seems like does not support <br> html code

      Validation Workflow in Create or Edit, We can use this styling code eg: <br>, <b>, <u> Those very simple code in those validation (in Create or Edit) But, for Validation (In Delete) Zoho Creator seems like does not support it. The alert task just shown

    • How to unvoid sales order ?

      Helo, We need to make a credit not from a voided invoice, which is linked to a voided sale order. I can't find a way to unvoid a sale order. There only a way to convert it to a Purchase order instead... The invoice can't be send back to draft because of the voided sale order. From a accountancy point of view, and treacability, we can't make a standalone credit note. What is the usual procedure? Thanks

    • Introducing body parameter for invokeUrl

      Hello everyone, We’re excited to announce that the invokeUrl Deluge task now supports body payloads and allows you to send data with all HTTP methods. Previously, GET and DELETE requests couldn’t include a body payload, and this limited your API interactions.

    • Exciting Updates to the Kiosk Studio Feature in Zoho CRM!

      Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerful

    • Zoho Sites Vs Zoho LandingPage

      Hello everyone, I'm currently exploring the various tools offered by Zoho and have a couple of questions: What is the difference between Zoho Sites and Zoho LandingPages? I'm trying to understand their primary use cases and how they differ from each other.

    • Managing external users for Cliq when organization is a Zoho One User

      Hi All, I am having a problem and would like to know if anyone else has experienced the same and more than anything if you were able to resolve the problem. My problem is that I set up Cliq and finally got all users on board and using the chat in place of email. Most of our users are external subcontracted teachers that we need to from time to time coordinate things with. Well, once Cliq became a part of Zoho One, I worried that I would then have to add all of the external users to Zoho One. Of course

    • [Product update] Teamwork Integration with Zoho Analytics

      Hello Customers, As part of our ongoing efforts to enhance integrations, we are upgrading our Teamwork integration with Zoho Analytics from the V1 to V3 version of the People module. We’re also pleased to inform you that this update brings new field additions,

    • Apply Workspace First Day of Month Setting to User Filter Date Picker

      I've noticed that the user date picker filter always has the first day of the week as Sunday, even when Monday is selected as the Workspace default. I would like to raise a feature request to apply the Workspace default to user date pickers. Thanks

    • Highlight a candidate who is "off limits"

      Hello: Is there a way to highlight a candidate who is "off limits"?  I would like to have the ability to make certain candidate and / or Client records highlighted in RED or something like that.   This would be used for example when we may have placed a candidate somewhere and we want everyone in our company to quickly and easily see that they are off limits.  The same would apply when we want to put a client or former client off limits so no one recruits out of there. How can this be done? Cheers,

    • Count the number of subform records associated with parent record

      Hello! I have a main form which contains all the details of a particular Issue, and then a subform where we can enter some information about each client who is affected by that Issue. What I want to do is have a field in the main form contain a count of the number of clients who have been affected, and automatically update when a new client's information is entered in the subform. Essentially, just a count of the records in the subform that are associated with that parent record. I've tried variations

    • Next Page