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

    • File Upload and Add via API

      I've been attempting to upload to via the Files api and I have been hitting the wall with actually getting the file to attach. What type is the API expecting ? Base64 Encoded ? When I do I get a 414 Error. I would appreciate your help as I am currently

    • Add Pinned Tickets to top of queue

      As an IT Helpdesk, we have some tickets where they will need to be looked at daily over a week or 2, and the ability to pin a ticket to the front/top of the queue would be handy as we can be reminded to take a look, rather than placing them on hold and

    • Holding Shift to keep selected tickets

      It is annoying trying to change the category of tickets and then closing them. You have to select them one by one, no way to 'hold down left click and drag your mouse down to select multiple'. Once you have selected them and you change the category, you

    • Formula Module how to convert to percentage

      Hello There, I have create a formula field and i want the outcome to be in percentage how do i do that This is my formula ${Deals.Forecast Revenue Per Year}/${Deals.Annual Processing Volume} I have try ${Deals.Forecast Revenue Per Year}/${Deals.Annual

    • Existing subform data is being changed when new subform entries are added

      I'm having trouble with existing subform data being changed when new subform entries are created. I have the following setup to track registrations for a girl scout troop: Main Form: Child Subform: Registrations The data are a one-to-many relationship where each Child record has many Registrations (new Registration will be created for each year the child is in the troop.) Per the instructions, I have created the subfom, added it to the main form, gone back to the subform and created the bi-directional

    • How to add a contact ID to contacts I'm importing with migration

      New user, business owner here, not a data specialist. I'm attempting to migrate import data from my old CRM, Daylite, via a .csv file. I feel like I've mapped the columns in the .csv file, however when I click save and next, I get a message saying the

    • FSM Job Sheets data to CRM

      Hello, is there anyway of getting the data collected in the job sheets into the CRM. We are collecting inspection data which we were using zoho forms for but the job sheets in fsm seem like a lot better way to collect it but we need to be able to get

    • Footer in PDF template doesn't stay at the bottom of the page

      When setting up a PDF template there is an option for a header / footer. The header stays at the top of the page however the footer does not. It appears the footer actually serves no purpose as it seems to rise up to underneath the header (see image). Is there a way to lock the footer to the bottom of the page? Otherwise what is the point of it? Image demonstrating what I mean. https://ibb.co/cJY1xZ4

    • Hiring Staff Accountant in San Diego with ZohoBooks Experience

      Hello, We are a San Diego, CA company looking for an experienced Staff accountant or controller that has ZohoBooks experience for a full-time position. Please reach out if interested. Best, Ben

    • Third party apps for my mail

      Hello im new here and i have a very important issue. A third party company uses one of my emails to send invoices to our customers. My problem is that cannot connect to zoho mail server. my imap settings are corrent imappro.zoho.eu 993 smtppto.zoho.eu

    • Outage?

      Is there an outage? Everytime I try to access Zoho FSM (web, as admin) I get a blank screen.

    • Zoho chat module for prestashop doesn't work

      Zoho chat module for prestashop doesn't work

    • IMPORTRANGE Spreadsheets

      I am trying to importrange a spreadsheet into another, but an error keep appearing saying NOT LINKED. Noting that I've linked it. I've tried to publish both sheets and re-apply the formula many times but nothing is working. I don't know what can I do

    • How to create Comparison across Period chart in a dashboard?

      Hi all How can I create this chart in a custom dashboard? The issue for me is that this chart is very small. The CRM module (unlike Projects module) has no ability to expand a chart. I want to make it larger, but also want to include it in a custom Forecast

    • Trouble fetching custom fields from Zoho Booking

      I'm following the instructions from here : https://help.zoho.com/portal/en/kb/flow/user-guide/app-specific-documentation/articles/zoho-bookings#1_Problem_with_accessing_custom_fields But I can't get this to work. Here is the result of a test booking :

    • How to change an employee mail id

      Hi, Does the administrator have the rights to edit an  employees mail id. 

    • Tip of the Week #56 – Analyze performance with analytics reports.

      Wondering how well your team is managing communications in shared inboxes? It’s time to stop guessing and start knowing — with Analytics Reports! As an admin, you get a broader view of your team's performance by tracking important metrics such as response

    • Zoho Sprints is now AI empowered

      Enhance the quality of your work with the power of generative AI tools in Zoho Sprints. These tools help you write precise descriptions, summarize content, analyze sentiment and tone, and translate content into your preferred language, and write and explain

    • Zoho CRM's V8 APIs are here!

      Hello everyone!!! We hope you are all doing well. Announcing Zoho CRM's V8 APIs! Packed with powerful new features to supercharge your developer experience. Let us take a look at what's new in V8 APIs: Get Related Records Count of a Record API: Ever wondered

    • Threads view for email sent from Cases module in CRM

      Hello all, Following the previous announcement regarding the support for the Send Email functionality from within the Cases module, the Email thread view is now available for emails sent from the Cases module. This enhancement is for better readability

    • Custom view placeholders

      Hi all, On some occasions it would be great to have placeholders setting up a custom view. Example in our case we have a field for a year. We would like to have a placeholder like $.{CurrentYear} that will insert the current year 2025 e.g. Now we have

    • Languages in Zobot

      Hello, I have found a list of supported languages for the Zobot. The information specifies the languages are supported in the following 3 features: SalesIQ supports 34 different languages in the following features. Resources (Articles, FAQs, Small Talks)

    • USA Military addresses

      When we have a client with a US military address adding them to the CRM, or having them fill in a form is a problem. Zoho Forms and CRM doesn't seem accommodate them correctly. It doesn't make sense for me to have to create a secondary data model for

    • Parentheses in System Path

      Zoho WorkDrive includes a mandatory parenthesis with the organization name in the desktop sync client. This adds parens to the system path. Many command-line applications do not allow for the use of parenthesis, so if you want to use a file saved on WorkDrive in a command line you cannot. Most major document syncing platforms do not allow parenthesis for this reason.

    • Match Transaction > Filter | Allow wildcards in search

      The Filter function is useful for narrowing down to a specific set of transactions. It would be useful to have the ability to use wildcards in search. e.g. customer name "starts with" or " * " as a placeholder. e.g. "National * " instead of "National

    • Can your customer support speak every customer’s language?

      In today’s world, talking to your customers in their language is not a nice-to-have. It’s a must. It's one of the reasons that most businesses have trouble going global: Language barriers get in the way. Say, a customer from another part of the world

    • Sub accounts in Balance Sheet - specifically Assets

      I've added in a new account, IP Developed, under Intangible Assets. When I run the balance sheet report, it shows on its own without a header, just tacked on the bottom of all the other assets. I'd like it to show under Long Term Assets or Other Assets.

    • Assign default Location + warehouse to Customer / Vendor

      Hello there. With the introduction of Locations I'm having to enter the warehouse for every single transaction which is getting really tiring and causes errors (easy to fix, but still). Does anybody know if there's a way to assign a default Location and

    • Check Sales Order for Duplicate Line Items by SKU

      It would be really nice if Zoho Books offered at least some of the features that the 30 year old software we migrated from did. When entering a Sales Order having some kind of warning pop-up if you try to enter the same item again would be very helpful.

    • Fifth Insight - Maximize the role of Departments

      The Wheels of Ticketing - Desk Stories Maximize the role of Departments What are Departments? Departments represent the various business divisions within your organization, each serving distinct functions that align with your products, geographical locations,

    • 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

    • Next Page