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

    • Cant receive emails

      Hi, I just created an account and went through all steps. Everything has been set up from my end, but Ive sent a test mail to the newly created email address, but it never arrived. Can somebody please help me? Thanks!

    • Multi-column sorting

      Is multi-column sorting a planned feature for CRM? We are needing to sort by one column and then subsort by another column. I am just wondering if there is a planned feature that will allow this?

    • 　【Zoho CRM】サブフォーム内にあとから追加した数式項目を一括して計算させる方法

      皆様のお知恵を拝借いたしたくご相談させてください。 【状況】 任意のタブにすでにサブフォームが設定されており、そのサブフォームを含め、既に数千件のデータが存在している。 【実施したいこと】 新たに数式項目をそのサブフォームに追加して、入力済データのレコードも含めて、その数式項目の計算結果を反映させたい。項目の更新で数式項目をサブフォームに追加しただけでは計算されません。 【わかっていること】 任意のタブのサブフォーム外にあとから数式項目を追加した場合、数式項目を追加しただけでは当然数式項目の計算結果は反映されませんが、以下の方法を実施すると数式項目が計算されます。

    • My Zoho Mail Account Has Been Blocked for Sending Email - Block Type: Mail Outgoing blocked

      Hi everyone... My Zoho Mail account has been blocked for long time... Until now, I cannot sending outgoing email. I was already try to contact Zoho customer support, but there is no reply from them. This is notification which appear on my zoho mail account...

    • Task reminder with custom function

      Hello! I am trying to create a custom function to add a task. With you guys helping, I could create a function but I could not set the reminder. Anyone knows how to add a reminder?  Thank you for your tips!

    • Zoho Books GST enabling issue.

      Without knowing I have created a Branch in Zoho Books, Now I am trying to enable GST option but is disable? Is there anyway to enable the GST Button?

    • Add a Calender view in Zoho CRM

      I would like to ask if it's possible to add a calendar view to a custom module in Zoho CRM. Is this feature planned for future development? It would be extremely helpful for us. I’d like to allow my users to view the data visually in a calendar layout,

    • Make the edit fields hover in Canvas View look the same as the Detail Page

      The edit field UI in the Canvas View is not consistent with the standard detail page UI. For some modules we have Canvas views, for some we don't. We don't want it to look differently. We want it to look like one system.

    • Can't Find or Use Saved Replies in Inbox Module

      I'm an Admin user on Zoho Social, and I've created a few saved replies under Inbox Preferences > Saved Replies. However, when I go to the Inbox module to respond to a message, I don't see any option to insert or use saved replies. I've checked that: I'm

    • Episode II: Begin Your Automation Journey in Zoho Desk with Deluge

      To travel to another country, you need a passport. But that's not enough, you also need a visa, flight tickets, and, most importantly, a mode of transportation. Without these, your journey cannot begin. Similarly, custom functions in Zoho Desk are essential

    • How can I capture the Cliq channel name from Deluge Script?

      I am working on a chat automation with a third party tool called Make.com. Using a webhook I am relaying information from the Bot I have created in Zoho Cliq to Make.com Webhook. I am using the Mention Handler of the bot in Cliq to relay information like

    • Backstage Roadmap to Most Requested Features

      Please provide insight as to ETA for the following: 1. Backstage integration with Zoho Showtime, seems like a no-brainer.       1.a. Why does OnAir look eerily like Showtime integration we must 'pay extra for'? 2. Backstage Integration with Zoho Subscriptions

    • How to know number of days between Deal Stages?

      Hi Team - how do I know the number of days between Deal Stages? I have a Deal blueprint and I want to know the number of days it takes the Deal to be on Stage 3 to Stage 8? I can't seem to create a report for that. Our Deals have 11 Stages and our Purchasing department is in charge of Stage 3 to Stage 8 and I want to know the number of days it takes for them to complete their stages?

    • How To Change Open Activities View in Canvas?

      Hi all, I want to have my open activities have this view, but I cannot see how to make it look this way in Canvas. Not only that, but there isn't a way to rearrange the Standard view in Canvas, either. What I want (this is in the Standard layout): What

    • Queries in Custom Related Lists

      Hello everyone, We hope you’re having a great day! A while ago, we introduced Queries in Zoho CRM to help you dynamically fetch data from CRM modules or even external sources—right within your CRM interface. Many of you have already used Queries with

    • Mass emails - Allow preview of which emails will receive the email based on the criteria

      Feature request. Please allow us to view and confirm the exact recipients of the mass emails based on the criteria we've chosen before sending. It can be quite sensitive if you send the mass email to some wrong accounts accidently, so it would be great

    • Customers not receiving emails

      So, a little backstory, we have been using Zoho Forms for the past eight years. And when we initially started, we would have email notifications be sent from inside Zoho Forms after a submission. We recently started using Zoho CRM as we wanted a better

    • Sum Total of various fields in child module and add value to parent module field

      Hi! Having trouble with a custom function, im trying to calculate the total of all the rent and sqm fields of our offices in Products module and have them transfer to the parent module Location. The API names are as below: Child module Products = "Products"

    • Automate your status with Cliq Schedulers

      Imagine enjoying your favorite homemade meal during a peaceful lunch break, when suddenly there's a PING! A notification pops up and ruins your moment of zen. Even worse, you might be in a vital product development sprint, only to be derailed by a "quick

    • Mails to Deals

      Hi everybody. We are using ZOHO CRM connected to ZOHO Mail and we have a big trouble, which our ZOHO partner is not able to solve. Zoho CRM automatically connects received emails to last edited live Deal of the same Contact. For us this logic is very

    • ICICI Bank integration

      Why the ICICI bank integration has been disabled? We opened the ICICI bank account only for integraton with Zoho. It is taking lot of time to do manual payments using file upload method. When will be the new ICICI bank integration enabled in India?

    • Google Drive

      How to add more modules in google drive as I don't want Zoho space? TIA

    • Ajust quantities in another form based on subform, on form submission

      Hello, I have an Order form with a LineItems subform. The LineItems subform has many lookups that import data from various other forms. I want to deduct the quantity offered in one of those other form, called Offer. In another application I used the following

    • Workdrive connection in Zoho CRM not working

      Hi, in https://crm.zoho.com.au/crm/orgXXXXXX/settings/connections i have set up the connection for WorkDrive which is pretty much setting up the name and the scopes. But I get "WorkDrive API test response: {"errors":[{"id":"F7003","title":"Invalid OAuth

    • Best Way to Update Subscriber Preferences for an Existing List?

      We currently have a mailing list of over 43,000 contacts in Zoho Campaigns, and we’re looking to segment our list based on subscriber content preferences—things like Free Webinars, Local Training, Store Specials, and New Product Announcements. We’d like

    • You are forced to store/manage custom functions redundantly | Any solutions?

      Hello there, you are forced to store code (custom functions) redundantly if you want to use the same functionality in multiple departments. I don't understand that you can't define global functions. When I make a change to a function I may have to do

    • Integrating Zoho CRM with Quickbooks Enterprise?

      Does anyone have any experience of integrating Zoho CRM with Quickbooks Enterprise?  The Zoho pages refer to the Quickbooks Premier edition, and I wanted to know if the same works with the Quickbooks Enterprise version.

    • in Desk - Why can't I find where to enable multi-branding?

      I'm looking at the knowledge base article & it says to go to settings / general / rebranding / multi-branding. But there's no multi-branding there!

    • How to undo a reconciliation?

      I need to update the "Expense Account" field on a bunch of expenses that I've already reconciled.  However, the system will not allow this field the be changed since it is reconciled.  I haven't found a way to remove the reconciliation status for the

    • Zoho support Can not send invitation email to portal user

      I try to use Zoho support but have a problem. I don't know why. - When a customer sign up at the portal user they don't receive the invitation email. - When I go to contact manu, choose 1 user and click invite --> they don't receive the invitation email.

    • remove()function to remove characters

      Hi there, I'm trying to use the remove function to remove characters from a variable. I have a Lead source that comes in as [Google] or [Facebook] etc. in Flow I need te to remove the square bracket. Tried a function that looks something like this: string

    • Sharing files without download option

      Hi Team     We want to share folders and subfolder which has files(doc, .PPT , excel and PDF) in zoho Docs. When we share the directory to a member in the organization or external to the organization There are able to download. How do we prevent users from download. Regards Krishna V.K

    • Basic Lookup Field Update Function

      Hi! So I have no idea what I'm doing in Deluge but I need to get a custom function to run On Create or Edit that sets the value of a Lookup Field based on the contents of another field. Seems simple enough, but I have looked through dozens of other similar

    • Weekly Tips: Schedule Your Emails with Zoho Mail

      As a business, it is recommended to consider the best time to send an email, taking into account the recipient's time-zone or their work hours to have your email on top of their inbox. Sending an email when your recipient is most likely to check their

    • Data Source Request : More Zoho Marketing Automation and Zoho Pagesense

      I'm currently trying to replicate the reports shown in ZMA for stats over time for individual forms. The reports exist only in ZMA, but I want to use in wider company presentations and can't find the relevant data in Analytics : Example I also note that

    • Zoho Mail - support email

      Hi I sent an email to support more than 48 hours ago and still have not heard back! What's up? How long am I supposed to wait for a replay? Thanks

    • Syntax for <criteria> field in zoho.crm.searchRecords() function when the value to check against is a variable?

      I want to search for records in the Tasks module whereby the value of a field (called field1) matches the value stored in a variable in the Deluge script (called variable1). From the sample code in https://www.zoho.com/deluge/help/crm/search-records.html,

    • Why hybrid project management might be the best fit for you?

      Project management techniques are designed to equip teams with proven methods for easy and efficient project execution. While management teams may have apprehensions about adopting the hybrid method of project management, we’ve compiled the top reasons

    • Page - Gauge - Target Values

      Is there a way to make the Target and Maximum values say a formula or query?  For example, total sales for the month = 109 and I want to make my gauge today's percentage.

    • Multiple Organizations w/Books

      Does Zoho One allow for more than 1 organization in Zoho Books? I see my default company says "Zoho One Enterprise"next to it but another company says "Trial". We have one company, but multiple lines of business that we keep separate for various financial

    • Next Page