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

    • Create Project while winning potentials - Projects v3 api updated code

      Hi all, I've been using the built in function to create a project while a deal is closed won and noticed it had some missing fields when trying to reference the zoho projects v3 api documentation. Specifically the project group had some issues when adding

    • [Free Webinar] Zoho RPA - OCR, PDF Automation, & More

      Hello Everyone! Greetings from the Zoho RPA Training Team! We’re excited to invite you to our upcoming webinar on the latest release updates for Zoho RPA, where we’ll unveil powerful new capabilities designed to make your automation journey smarter, faster,

    • Merge feature parity with writer

      Hello Zoho team, I have run into a workflow limitation with Zoho Contracts and the lack of merge feature parity with what Writer can do. We have created a fairly complex merge process to create a statement of work based on several fields in our CRM which

    • Export option in Contacts is missing

      Hello - I've been clicking around Zoho all morning trying to find the export option. It formerly was in the right hand corner, above the search box, but now I don't see it. I've looked everywhere - Am I missing it somehow? I've attached a screenshot.

    • Formatting of cells changing by itself and formulas not always calculating automatically

      I'm new to Sheets and have been setting up a budgeting template that has many linked tabs. It's going fairly well except certain quirky things have been happening from time to time. 1- sometimes when I scroll up or down I lose formatting from a random

    • Unable to open iOS Zoho CRM app

      i am unable to open Zoho CRM iOS App in iPhone 14 Pro Max v18.5 and it is crashing immediately after i click to open

    • Whatsapp BOT with CRM

      Hello, how do you use Whatsapp integrations in zoho CRM?

    • sync two zoho crm

      Hello everyone. Is it possible to sync 2 zoho crm? what would be the easiest way? I am thinking of Flow. I have a Custom Module that I would like to share with my client. We both use zoho crm. Regards.

    • Side-by-Side view on Windows 11

      Is there a way to open two notes in a side-by-side view? I'm running Notebook on a Desktop running Windows 11. If this feature doesn't exist, do you have plans for it?

    • Value shows in balance sheet for Goods in Transit

      We have transferred goods from one warehouse to another warehouse and accepted the same at another warehouse. Although my balance sheet shows X amount as goods in transit value. I don't understand, how to clear that  Can anyone guide us please?

    • Resolution Time Report

      From data to decisions: A deep dive into ticketing system reports What are time-based reports? Time-based reports are valuable tools that help us understand how well things are going by breaking down key metrics over specific periods. By tracking, measuring,

    • Ask for a quote to multple vendors

      We are able to send a Purchase order, but How can we Send a quote request to our vendor, once the value changes every time? I didn't see any feature like this in Zoho Books/ Inventory. Send this request with the Items that we want to know the cost, to

    • Bigin merge field in email template for subject line to match lead name

      Hello We Are using email in to automatically create leads in our pipelines. When we want to reply from conversations, and apply an email template, it’s not matching the original subject line. It should be lead name to match. But it’s not working. Even

    • How to create auto-link between Invoice and Quote in CRM

      It's strange that when you 'convert' a quote into an invoice, it doesn't auto-link the two. How can we develop an auto sync so we don't need to manually link each invoice to their respective quote?

    • Why Are Columns Reset When Deleting Entry

      Hello, this is quite annoying. We use forms as a questionnaire for candidates, we filter entries by removing columns, when we delete an entry the columns reset. Every "delete" the columns reset, why!? Thank you

    • Pi or Pie? A slice of infinity in customer service

      Hey everyone! While Pi Day is on March 14 (3.14), July 22 marks another special occasion: Pi Approximation Day! On this day, we recognize the mathematical constant π (pi ≈ 22/7); a number that's infinite, irrational, and never-ending. Pi is essential

    • Configuración

      Hola acabo de instalar Zoho CRM y quiero configurarlo correctamente. Al respecto me surgen algunas dudas tales como la diferencia entre: Cuentas, posibles Clientes y Contactos. ¿Conceptualmente que son cada uno? ¿Como se se relacionan entre ellos? Si

    • Why Can't I add unicode emoji's to my signature?

      Why would Zoho Mail prevent me from adding unicode emojis to my email signature? Every time I try to save the signature, Zoho Mail erases the emoji and any nearby content. Every time I setup something with Zoho, I know I'm going to run into some incredibly

    • GL account associated to each supplier for new bill

      Hello I'm facing problem for all items of my bills that are not inventoried. The need is each time I enter new bill and after I select supplier the GL account section is autopopulated with default GL account (that I would like to add in supplier settings)

    • LinkedIn verification link and otp not receiving

      For the last 2 to 3 weeks I'm trying to verify my LinkedIn account to access my company's LinkedIn page, Linkedin is sending verification links and codes to this email address but I have not received any codes or links. Please help me here. Looking forward

    • Zoho reply to not working. just reply to my self

      Hello. i using on my wordpress website a contact form from Wsform. i can set the reply to email there. normally it works. but since i am using your wordpress plugin zoho mail it doesn`t work. its not using the reply to (email from customer). I just can

    • Mail Merge Stuck in Queue

      I am trying to send Mail Merge's and it never sends out to the full list. It always hits a portion and the rest remain in the "Queue" - the emails I am sending are time sensitive, so I need this to be resolved or have a way to push the emails through

    • SMTP Email Sending Not Working for My Domains and Apps

      Hello Zoho Support Team, I am experiencing a critical issue with sending emails via Zoho SMTP for my domain humanhup.com. Both of my applications, HumanHup and CheapUI, are unable to send emails using Zoho SMTP, even though the same setup was working

    • Receiving too many Spam Leads. Why?

      I am receiving so many junk leads from web forms created by zoho's platform. The junk queries are increasing day by day and are affecting our business. I am continuously following up with zoho team from the past one year but not getting any satisfactory

    • Why is Zoho supporting the Proud Boys?

      Hello. This is the only way I can find to contact your company. There is someone in Maine posing as a law enforcement officer, attempting to kidnap immigrants. They are also recruiting for a known hate group. They have an email address hosted by Zoho.com.

    • Composite Item - Associated/Component Items

      I am trying to find the Associated Item/Component Item field in the Composite Item Table in Analytics. Has anyone been able to find and utilize this field in Analytics?

    • What is a a valid JavaScript Domain URI when creating a client-based application using the Zoho API console?

      No idea what this is. Can't see what it is explained anywhere.

    • 🚀 WorkDrive 5.0: Evolving from a file sharing app to an intelligent content management platform: Phase 2

      Hello everyone, WorkDrive's primary focus has always been to provide an intelligent and secure content management platform, simplify collaboration, and be the central repository of files for all Zoho apps. In our previous announcement, we unveiled the

    • Use openUrl() to edit a specific record

      I am working on a queue app for my organization. I have a master queue that is a report of meetings with workflow buttons to manipulate the records. One of these buttons I would like to open the record and edit for the purpose of changing the queue lookup

    • why i cant access my web without the www

      please help me

    • Send Whatsapp with API including custom placeholders

      Is is possible to initiate a session on whatsapp IM channel with a template that includes params (placeholders) that are passed on the API call? This is very usefull to send a Utility message for a transactional notification including an order number

    • Help Centre Articles in Desk, Zia and iframe

      Hi, We embed SOP documents into articles from Scribe into using iframe. We are looking at zia indexing articles to present to agents to aid their work. Please advise if zia can view and learn from the content within the iframe?

    • Rich Text/WYSIWYG Input Area

      I'd like to have an option on ZoHo creator to create an input text area for HTML/rich text formatting. :)

    • How to create a directory report from one-to-many relationship

      Hi all, Newbie here. I'm converting an Access DB to Creator. I've learned Forms are tables and Reports are used to edit table rows, not Forms. I've got the data loaded and can maintain it with the Reports already done. I've done filtering and sorting,

    • Change Default Selection for Lookup field

      I have a Lookup field that I have locked, when I unlock it - the user can select the proper Zone but I need it locked, since this may change based on user selection of another field. Example. There are 3 potential zones. User A selects the Hospital Account

    • Restrict visibility and user permissions Creator 5

      I don't understand how restrict visibility for reports interacts with the already established role permissions. It seems that the default on restrict visibility has everything checked for all users, but I cannot set up different levels of permission for different individuals.  Right now I have three different ways to manage users and their access and it's confusing because everything has not migrated to Creator 5. Don't the role permissions extend to the reports as well? Are the selections under

    • LMS - Why do Trainers have to be Users?

      I'm not sure why the software is set up where trainers must be users (i.e., employees). This should really be changed, as there are many cases (the majority of cases for some companies) where classroom trainers are external or contractors. If this is

    • ZOho mail not stopped working with my domain.

      i have changed my name server settings in my domain sigmasquaretec.in . After that my emails are not working with ZOHO.

    • Request to Cancel Zoho Mail Subscription

      Hello Zoho Team, I have migrated to Google Workspace and would like to cancel my Zoho Mail subscription for my organization. Organization Name: AR Creators Media Admin Email: roman@arcreatorsmedia.com Subscription ID: RPUS2005901960812 Please cancel the

    • zoho smtp limit for free users

      What is Zoho SMTP limit for free users?

    • Next Page