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

    • hey

      help me in zoho payroll

    • Kanban Deals not showing everything

      I have a deals (I call it Opportunities) module in CRM that shows various components of the opp. I'm trying to have a checkbox show up for the end user to be able to toggle it if they want an email to be sent when the change stages (in this example, it's

    • Multiple clients in one project

      Hi team, What is the possibility to have more than one client to be linked for one project in the Zoho Books? Our business model is to have a project, and this project have expenses/bills, as well, we issue invoices for this same project to several customers.

    • Assign Vendors and customers specific branches ( location )

      Hi Team, Is it possible to assign specific customers/vendors to specific branches.

    • Currency Data Type Issue

      Hi, I'm running into an issue with the currency data type conversion with the pipeline tool inside Zoho Analytics. Basically, when the table is added to the pipeline, the columns with currency data type will be converted to text type. I assume it's because

    • VAT in Retainer Invoice -UAE

      It's currently not possible to add VAT to Retainer Invoices. UAE TAX LAW however makes VAT mandatory on each retainer invoice in UAE 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

    • Add SalesPerson PlaceHolder in Notification

      We have the ability to include only Created By But for my use case I need the sales Person in the Email as well And the subtotal as well Please give us access to Sales Person and Subtotal Placeholders

    • Using Equity Contributions To Fund Investments/Expenses?

      Hello! My partner and I just transferred over to Zoho Books and are trying to figure out how to adapt it to our business model.  We currently fund the company as individuals and utilize those funds to:  1) Cover OPEX 2) Invest in companies.  - I recorded

    • Showing ALL missing data

      Hi, When I create a chart, I noticed that even when enabling the "show missing values" option, if, let's say, the current time period will not show as "0" on the chart if there's no data (rows) in the table. For example, I have this data: Week 1: 0 rows

    • Using tickets to train Zia

      Hi Team, I would like to know if there is any way that Zia can also learn from previous tickets in addition to the articles from the knowledge base. Since we have most of our knowledge curerently in the tickets and that this is hard to combine into a

    • How to automatically go to the bottom of a Zoho spreadsheet when opening the file

      Is there a way to open a Zoho spreadsheet and have it automatically go to the either the bottom row that contains any sort of text or formula?   It would work fine if it simply went to the "lowest" row for Column A that contains information.  I do see you can use the URL to go to a specific cell (and probably a named cell as well) but I haven't found a way to do what I'm asking.  The spreadsheets are fairly dynamic and information is added to them frequently.   Another thing that would work would

    • Add more than 7 sender addresses in campaigns

      I need to add at least 15 sender email addresses but am currently limited to 7. Please can you increase. Thank you

    • How to avoid outgoing emails from Zoho CRM from being treated as SPAM/Junk when arriving in an Outlook Inbox?

      I just upgraded to Zoho CRM paid version so I could use the Mass EMail feature using a simple email template I prepared. When testing this feature out, I sent emails to my Yahoo, GMail and to an Outlook EMail Inboxes. Yahoo & GMail received the messages

    • Popup or Highlight on the Form based on a comparison

      I have a field for Engine Odometer, and a field for next oil change in KM. Is it possible to generate a popup, or highlight the form, if the Engine Odometer number is larger than the next oil change in KM number?

    • to close auto payment system for renew my subscription. and get refund my deduct money.

      please consider and refund my money.

    • Best way to automate quotes in CRM

      I am trying to take specific information from prospects/clients through Zoho Forms (contact info, square footage, surface area, etc.) and auto generate quotes based on the information submitted.  Ideally, the quote would be sent immediately after the form is submitted. I know Zoho has a few different ways to achieve this and wanted to know if there was a 'best practice' for automating the quotation function within CRM. Or if there was another app that can perform this functionality better (Zoho Commerce,

    • Share passwords/secrets and folders/chambers with external users

      Currently you allow sharing passwords with internal users, internal user groups, and third parties. The third party feature gives temporary access of 30 minutes and it does not have any sign up. What we really need is to properly share secrets/passwords (and ideally folders/chambers) with Zoho Vault users that are not part of our organisation - even if they are on the free plan. If they accept the share, the password would be stored in their Zoho Vault as long as I maintain the share. If I revoke

    • View Kanban tasks in "Status" layout for all projects

      Hi I'm testing Zoho Projects Express to see if it is suitable for my business. So far it looks great and seems to do everything we want (except critical path on the Gantt charts), but one thing I can't seem to figure out is this: If I go into a project, and choose "Kanban", I can select the "Status" layout which is great. I can see the status of all of the tasks in that project, and who is working on what. However, if I go to: Home > My Tasks > Kanban, then the "Status" layout isn't an option - only

    • Save Draft in email bigin for desktop and mobile

      Hi any news to when we going to have the save draft for email in bigin desktop and mobile?

    • Zoho Desk and Zoho Inventory

      I am hoping I am not the only one with this need but has anyone else notice the lack of integration between Zoho Desk and Zoho Inventory and eventual funneling into an Invoice in Zoho Books?  As an IT service provider we very often will sell parts (items) along with services for installing said item(s).  I have discovered that although you can integrate your Inventory Items into Desk as a "Product", it serves no real functionality.  In fact, I found the concept confusing compared to how many Service

    • Including Field in email body based on answer

      I am making a form as a checklist of our mechanics. I have it setup with choice matrix. The choices are "Bad" and "Good". I would like to have only the "Bad" show up in the email body. I am not against changing how it is setup, thank you.

    • Hide Zoho SalesIQ chat widget outside operating regions to optimize engagements

      Have you ever found yourself in a situation where you're receiving chat requests from locations where your business isn't operational? Having to set routing rules or manually delete chats from your logs can be tedious and time-consuming, hampering your

    • Remove attachment from ticket

      Hello, When we receive e-mails from our customers, lots of those e-mails contain attachments with sensitive information, which we need to delete from the ticket after using it. It is forbidden for our company to store these attachments, due to security reasons.  Is there a possibility to delete an attachment from a ticket in any way? It is necessary for us that this possibility is available. Thanks in advance, Yorick

    • CREATE REPORT USING TWO FORMS

      ONE FORM CONTAINS LIST OF ALL CLIENTS WHOSE RETURN IS FILED AND OTHER FORM CONTAINS LIST OF RETURNS FILED YEARWISE. NOW I REQUIRED A REPORT OF ALL CLIENTS WHOSE RETURN ARE PENDING FOR A PARTICULAR YEAR

    • Make other sub fields mandatory, if first subfield is not empty

      I am not finding an option in the rules to make other sub fields mandatory if the first sub field is not empty. I am using the name field to collect parts info, with sub fields of Part Name, Part Number, and Quantity. But I don't want these mandatory

    • Associating Multiple Work Orders with a Single Invoice in Zoho FSM

      Hello Everyone, Is it possible to associate multiple Work Orders with a single Invoice in Zoho FSM? Best Regards, Subhash Kumar

    • [Webinar] Evolving BI & Analytics in the Age of AI

      Artificial intelligence is redefining how data is collected, analyzed, and leveraged across industries. As businesses strive to become more agile and insight-driven, traditional BI and analytics must transform to meet new demands. AI-first organizations

    • 請求書に添付されているファイルをAPI経由で取得する際の問題について

      Books APIリファレンス 現在、Books APIを利用して請求書内の添付ファイルを取得するメソッドを構築しています。以下のコードを参考にしているのですが、添付ファイルが複数アップロードされている場合、responseにおいて2つ目のファイルの情報しか取得できない現象が発生しています。 headers_data = Map(); headers_data.put("Authorization", "Zoho-oauthtoken 1000.41d9xxxxxxxxxxxxxxxxxxxxxxxxc2d1.8fccxxxxxxxxxxxxxxxxxxxxxxxx125f");

    • Zoho CRM and Books Integration

      Evening, I have started the integration with FSM from CRM and having difficulties with the mapping. In CRM we use "Unit Price" as our cost price and mark this up on a subform to create a "Sell Price" this markup can be different on each quote depending

    • Zoho Flow to Azure Devops

      hi, i'm getting this when trying reauthorize the connection from Zoho Flow to Devops but when i look in Devops there is no service connection related to Zoho So i do not know where i have to renew the mentioned client secret..

    • 533 Relaying disallowed

      When I try to send an email from my Zoho account, it gives me that error 533: relaying disallowed. What should I do? Please help.

    • Sandbox - Your Secure Testing Space in Zoho Projects

      Managing projects often involves fine-tuning processes, setting up new automations, or making configuration changes. Making changes directly in a live environment can disrupt production as it does not leave room for trial and error. Sandbox in Zoho Projects

    • Zoho CRM Functions 53: Automatically name your Deals during lead conversion.

      Welcome back everyone! Last week's function was about automatically updating the recent Event date in the Accounts module. This week, it's going to be about automatically giving a custom Deal name whenever a lead is converted. Business scenario Deals are the most important records in CRM. After successful prospecting, the sales cycle is followed by deal creation, follow-up, and its subsequent closure. Being a critical function of your sales cycle, it's good to follow certain best practices. One such

    • 553 relaying disallowed invalid domain

      Hi, I have read the previous article but i am still facing issue , I have added all these in my domain manager under dns settings. type : cname host: zb14521202 value / points to : validate.zoho.com Can you please tell me why i am still facing same issue

    • Announcing new features in Trident for macOS (v.1.18.0)

      Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Retract sent emails. Whether you've missed adding an important attachment or

    • Canvas View Change History

      We are trying to setup Canvas Views and it is really not a pleasant experience. It bugs a lot, some pages are just not accessible anymore and it shows that a view is just not editable because it shows a blank page, although when we open an actual record,

    • Leadchain BUG

      Hello i have a problem with Facebook Leadchain. All of the information is populated correctly in the CRM, except the campaign. I want to add new leads to an existing campaign, but the lead is not added to the campaign even tough i have selected the campaign

    • What is the use of the stage environment ?

      Salut, I am woundering what is the use of the stage environment. Usually, I do all the testing in developpement, and then go straight to production. The only thing I cannot test in developpement, is the result for portal users. Could the stage environment

    • Workflow Automation Instant Action

      Hello All I need help to resolve this. I have created a few workflow 1. When Deal Stage is Submitted to Onboarding, it will create a record in my Onboarding Module 2. When Deal Stage is Live, It will copy $Deal.GOliveDate to $Onboarding.GoLiveDate For

    • Live webinar: Transitioning from MS PowerPoint to Zoho Show

      What’s the first word that comes to mind when you think of presentations? For many, it’s PowerPoint. This has been the default for so many years that “PPT” has become a stand-in for “presentation.” But presentation needs are changing. And if you’re looking

    • Next Page