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

    • LOST ALL NOTES AFTER SIGNING IN AGAIN

      I lost all my notes which I prepared from long time after sigingout and signing in again

    • Outgoing Email Being Blocked

      Hi, I have an email ID wherein the outgoing mail are being blocked the user get an email which is as follows: ----------------- Dear User, Mail Outgoing blocked. Reason :Mail rate exceeded limit However, we realize that this might have been unintentional.

    • Sending Email With SMTP python

      Hi, I am trying to send email with stmplib python lib.  Code... server = smtplib.SMTP_SSL('smtp.zoho.com', 465) server.login('username','password') server.sendmail('from_mail','to_mail', 'message') server.quit() Log  send: 'ehlo [127.0.1.1]\r\n' reply:

    • Duplicating Forms doesn't duplicate Forms attachment path to workdrive

      Hi, I have this user, who uses one forms and duplicates it when needed and update the content. For him, it's important to have the submission forms saved in a specific folder inside Workdrive (as this PDF is transmitted later to another team). However,

    • Feature Request - Insert URL Links in Folders

      I would love to see the ability to create simple URL links with titles in WorkDrive. or perhaps a WorkDrive extension to allow it. Example use case: A team is working on a project and there is project folder in WordDrive. The team uses LucidChart to create

    • Company with ZohoOne, notebook ask to upgrade to collaborate in notecards.

      Hello, we as a company have ZohoOne as our Zoho choice, but Zoho Notebook asks us to upgrade in order to collaborate in notecards, is this correct? Acording to what I've read in Zoho Notebook help, it should be included in ZohoOne, can you please clarify

    • Reason:554 5.1.8 Email Outgoing Blocked

      I have been struggling to set up my email address for some time now; it's difficult to locate what I need. Additionally, I cannot send or receive any emails. I keep receiving the "Reason: 554 5.1.8 Email Outgoing Blocked" error. There doesn't seem to

    • How to reach the official Zoho Support channels and avoid fake ones.

      Dear Customers, Thanks a lot for choosing Zoho! Our applications are built to help achieve your day-to-day business goals. We are committed to engaging with you, to understand and develop solutions that enhance your productivity.  We are happy and ready to help you use our services effectively. Understanding and avoiding fake support Just like using popular bank names and financial applications for phishing purposes, using Zoho and claiming to be providing Zoho Support or services with false numbers

    • Lost my notes

      Hi while re installing the notebook app, I have lost 2 most important notes and I am not able to find them anywhere. Can you help. Those were very important for my businesses, it had all the important transaction info, and the other were my log ins. I

    • Unable to connect to smt servers.

      Unable to connect to smtp.zoho.eu servers. Therefore, I cannot send emails via smtp.

    • Problem Pasting Into Notes

      Occasionally I want to create a note by copying and pasting a few paragraphs from an article on line. When I create a new note and paste in the section the newly created note winds up with each paragraph in white text on a dark background rather than

    • Not receive mail

      I just made my Zoho mail but I cannot receive any mail at all. What happen

    • Possible to reorder Pipelines position?

      I have multiple Pipelines and want to reorder their positions, so that in the Deals module record for the Pipeline field, I have them ordered in a certain way. Is there a way to reorder the position of the Pipelines without deleting existing Pipelines

    • How do you pre-fill Form fields using URL parameters, for embedded forms?

      Is this possible? This is something that can be done on most major Form platforms (JotForm, TypeForm etc). Currently if pre-filled fields are a necessity for your business, you cannot use embedded forms.

    • ZOHO Creator subform link

      Dear Community Support, I am looking for some guidance on how to add a clickable link within a Zoho Creator subform. The goal is for this link to redirect users to another Creator form where they can edit the data related to the specific row they clicked

    • Unable to delete Attachment on Modules/Record

      Hi Team, Could you please check the backend. Looks like today, CRM decided not to allow deletion of Attachment on Modules or Records. No error message but when you click Delete > Move to recycle bin, nothing happens. Please fix ASAP.

    • Filter Multi-Line Properties with Plain Large Text

      To be able to filter fields that feature Plain large text, I am only able to filter on plain small text when you offer 3 separate options.

    • Zoho Mail : Email Outgoing Blocked

      I suddenly received the following message yesterday. I cannot send any mail. Please resolve as soon as possible, I cannot work without sending email. Dear User, We regret to inform you that your email outgoing has been blocked and you will not be able

    • Update date field from one module to the another

      Hi, I have a module called "Cargo". In this module there is a date field called "Fecha ETA". Api name = Fecha_ETA I have another module called "Deals". In this module there is a date field called "ETA 2". Api name = Fecha_Madrid I need to create a function

    • Delete completed tasks

      My completed tasks will not delete. I have tried deleted them all together and one by one. It says they are deleted but they are still showing on my list. Help

    • One user multiple access?

      Hi, I want to know if t is possible to have just one Zoho account for the business and have multiple users access this at the same time?

    • Notebook not working on Windows 11/Atlas OS

      Hello, I jave bought gamer laptop in used condition to make some AI application. I installed Atlas OS to improved performanceds and it is working very well. I have Avast Secutiy as firewall. The whole system is really fast and all my apps work well....but

    • Why are you taking functionality out of notebook?

      We were able to choose a custom sort, in free version. Now it seems that feature is only available if I upgrade. Not a nice trick, shame.

    • Is Zoho Notebook available in any other languge besides english?

      There seems to be no option to change the language of the UI in the web browser version of Notebook, is this the case for all other versions? iOS Android Windows App MacOS

    • Completely blank window

      When I open my notebook application on Windows 10 I get a completely blank window, see the attached .png file. There is no notebook or any hint that notebooks exist. Furthermore, the application always asks me to sign in again *every* time I start it.

    • To be able to create a report sub folder

      Hello Can we request the ability to create subfolders in report folders.

    • Default Lookup Field Value based on Picklist

      How do I change a lookup field value based on another field's value, while creating/editing a record using form? I have a picklist of different types of Loans. For example: PPP, EDIL, Term, etc. When I create a record using the form, if I choose PPP from

    • Unable to create a Zoho Desk ticket from a call in Zoho CRM

      I want to create a Zoho Desk ticket when a new record is created in the Calls module in Zoho CRM. However, I get the following error message when trying to test & debug: We are unable to setup Zoho CRM. Please try again or contact us for further help

    • How to add a discount (percent %) field?

      My particular case it’s regarding the “Opportunities” module. I’ve created a subform to calculate the value of the opportunity, and now I’d like to include a discount field in the form of a percentage. However, no matter how or where I add the "percent"

    • Page HTML to PDF

      Hello everyone, I have a pdf template, but because zoho has limitations in the builder. I made the template in aPages. The question is, how to export the pages as PDF? Thank you very much.

    • Issues with certain CRM, Desk & webhook blocks in Guided Conversations

      Good day I have been attempting to add a block on our guided conversations, which give our customers relavent information based on their queries. The issue is that when I attempt to use a block that fetches data I get the following error popup: Cannot

    • Zoho Sign API lacking clarity

      I'm trying to use Zoho Sign to embed a document for signing into a web application, and the documentation is proving to to be lacking something. Some issues... 1) No clarity if the API only works with a document uploaded through the API -- it would be

    • 【Zoho CRM】キャンバス機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中からキャンバス機能のアップデートをご紹介します。 新たに追加された「可変式ボックス」では、データの表示方法を柔軟にカスタマイズ可能です。画面サイズやデバイスに応じてレイアウトが自動調整されるため、より快適なユーザー体験が実現します。 【目次】 可変式ボックスとは 主要機能の詳細 より高度な可変式ツール 1.可変式ボックスとは 可変式ボックスをレイアウトに組み込むことで、高いカスタマイズ性と柔軟なデザインが可能になり、データの視覚化やユーザーインタラクションがより効果的に行うことができます。以下が可変式ボックスが備える主要な機能の概要です。

    • Notebook for watch no longer in Play store.

      I had to reinstall Notebook on my Galaxy Watch 7. Alas: the app is no longer available in the Play store. What now?

    • move notebooks to another notebook?

      Do I have the ability to add one or more existing notebooks to another notebook? For example, I have an existing notebook named Dog, with several articles in it, and I would like to move it to another notebook called animals?

    • Import from OneNote

      Is there a way to import notes from OneNote? 

    • Add export option that only export one or selected notebooks

      Currently the export function will export ALL data every time, this not only wastes user bandwidth, disk I/O and local storage space, but also consumes more resources on the server. Partial export should be a very basic and easy-to-implement feature.

    • Zoho Creator Mobile app no Default Workspace

      When I use the Zoho Creator mobile app I do not get a default workspace. This is occurring for me and another new user. I believe this is an issue with Zoho One / Zoho Creator. I have tried working with support and it's been over a week of no solution

    • Kaizen #189: Manipulating Multi-Module Lookup (MML) Field using Zoho CRM APIs

      Hello everyone! Welcome back to another week of Kaizen. In this post, we explore the Multi-Module Lookup (MML) field in the Appointments module of Zoho CRM. You learn what an MML field is, how it works, and how to use it with Zoho CRM APIs. Table of Contents:

    • Xcode 16.2

      I am facing multiple bitcode enable issue with Zoho. Which version is compatible with xcode 16.2 or version with out bitcode Flutter 3.27.4 pod 'ZohoDeskPortalCore' pod 'ZohoDeskPortalServices'

    • Next Page