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

    • Add Microsoft Entra ID to Zoho One

      Hi! Have anyone tried the Zoho connection to Microsoft Entra ID (https://help.zoho.com/portal/en/kb/one/admin-guide/directory-stores/articles/add-microsoft-azure-to-zoho-one?action=kbArticleFollow&actionId=4014605732522 ) This is a big operation and you

    • Multiple Respondents for One Survey Submission?

      Does anyone know of a way to allow multiple respondents to complete only one  survey and then also see (while completing the survey) the responses for their fellow colleagues who already answered that question? The situation is that our new customers have within their own organization, multiple employees that will need to assist in the one survey response. Since we don't always know which new respondent is the "who" that will have the answer, we need multiple respondents to be able to view the response

    • Can you remove the title from the forms?

      I am placing the iframes for my forms on my website.  Is it possible to remove or hide the title of the form so that it doesn't show up on the website? Is it possible to place text in the form like "clicking submit will take you to paypal." thanks

    • Lost the ability to sort by ticket owner

      Hi all, in the last week or so, we have lost the ability to sort tickets by Ticket Owner. Unlike the other columns which we can hover over and click on to sort, Ticket Owner is no longer clickable. Is it just us, or are other customers seeing this too?

    • Mask Name Field in Report

      Is it possible to have the Name field as "Last Name, First Name" in a scheduled report.

    • Custom Project View by Project Group

      Hi Zoho Team, I used to have a custom project view which showed all my active projects (not cancelled or completed) and the list was separated into projects groups. Some time ago, possibly a couple of months ago, I began to see all projects even cancelled

    • Unable to attach the file via the API.

      We are trying to attach files to a Candidate in Zoho Recruit using the API. We reviewed the following API documentation: 🔗 Upload Attachment While this API does allow file attachment via a URL, that’s not what we want — we do not want to attach public-facing

    • Zoho Books (UK) needs to be able to submit a CT600 CTSA return

      As well as a VAT Return, most (if not all) small businesses have to submit a CT600 Corporation Tax Self-Assessment. There are many providers who do this (like Xero) bujt not Zoho. Can you add this to the request list please? Many thanks Steve

    • Stock Update After Approver 1 Approval in Multi-Level Approval Flow

      Hi Team, We have configured a multi-level approval process for POs/Bills. Our requirement is to update the item stock quantity based on the billed quantity immediately after Approver 1 approves the bill. Please find the script attached below. However,

    • Zoho Form Auto Fill

      I am setting up a Zoho form for my independent sales reps to request quotes. Their names are in the first field under a dropdown menu. The next field is their email address. I want the email address field to automatically be filled in when they select

    • Image Resolution Restriction Option in Zoho Forms File Upload

      Hi Zoho Forms Team, Greetings, We would like to request a feature enhancement for Zoho Forms regarding the file upload field. Currently, Zoho Forms allows us to restrict the file size of uploaded images, but not the image resolution (in megapixels). This

    • Can't select Leave type while applying a leave

      Hello, while trying to apply a leave, I can't find any leave type among the options in the Leave type select: Here are my leave settings. Daily: Hourly: Tried to clear cache and to navigate from another browser, but the problem persists. Any hint? Thank

    • Mes débuts sur Zoho Forms | 13 champs à l'export ! seulement

      Bonjour, je débute sur Zoho Forms, je viens de créer un formulaire avec tests dans la foulée et je n'ai que 13 champs qui remontent sur mon export CSV alors que j'ai plus de questions et champs qui devraient remonter. J'ai actuellement une formule payante

    • Introducing real-time document commenting and collaboration in Zoho Sign

      Hi, there! We are delighted to introduce Document commenting, a feature that helps you communicate with your recipients more efficiently for a streamlined document signing process. Some key benefits include: Collaborate with your recipients easily without

    • Adding Photos Into Form (as a form creator)

      As the form creator, is it possible to add images to my form? (I don’t mean adding an image upload field, but rather inserting a JPG file into the form so that users can view the image.)

    • [Training] AI-Powered Application Development Bootcamp 2.0 - Zoho Creator

      Hello everyone, Ready to take your app-building skills to the next level with the power of AI? We’re excited to invite you to AI-Powered Application Development Bootcamp 2.0—a 90-minute, live training session designed to help developers, business users,

    • What is the easiest/fastest way to attach an email or PDF to a Zoho record?

      Hi everyone, We use Outlook with Office 365 and have the need to either ideally attach a .msg email directly to an account or custom module in Zoho, or if not attach just the PDF that would be sent in that email. The Zoho plugin is very basic for Outlook

    • Free webinar! Close deals faster with Zoho Sign from Zoho CRM

      Hello, Are you tired of chasing down signatures and getting stuck with paperwork delays in your sales process? With the seamless integration between Zoho Sign and Zoho CRM, you can create and send documents for signing online, close deals faster, and

    • Files stores in Library Marketing Automation

      Hi, How can i switch from card view to list view in Marketing Automation My Files.?

    • Paid for upgrade and no change

      I paid the $24.99 rate to upgrade to Pro version and no change when I signed out and signed back in.

    • Issue with Code Snippet Styling Overlap in Zoho Landing Page

      Dear Support Team, I have encountered an issue on the Zoho Landing Page while working with code snippets. When I try to create a custom script and add HTML, CSS, and JavaScript within the code snippet, the styling appears to overlap and affect other code

    • Adding yearly Calander

      How to add Yearly calander and employee data from admin console

    • Zoho Leave Policy > Portugal maternity Leave 120 days or 150 days

      Hello All In this Portugal maternity Leave policy, the government allow employee to apply 120 days they will have 100% paid salary if they apply 150 days they take 80% of the paid salary minimum 1 days and maximum 120 days or 150 days Should i setup this

    • Feature Request - Copy Reschedule Link

      Hi Bookings Team, I had a client contact me today, to let me know that she can't make a meeting she booked this week. I can't remember if I included a reschedule link in email notifications, but I was thinking that it would be great if I could just open

    • eCommerce ZUG Virtual Meetup – Critical Role of e-Signatures in eCommerce

      Hello there! Are you in the ecommerce industry and looking for a secure, compliant e-signature solution to handle all your paperwork? From vendor onboarding and supplier contracts to internal HR and finance workflows, speed, scalability, and customer

    • Zoho Desk iOS app update: Archived ticket list view

      Hello everyone! In the latest iOS version(v2.10.7) of the Zoho Desk app update, we have brought in support to access the 'Archived Ticket views' on the 'Ticket Views' screen. Tickets that have been Closed and inactive for 120+ days will be automatically

    • Chart of Accounts

      Is it possible to reorder chart of accounts manually? Currently, when creating new sub accounts accounts, they appear in order they were created i.e. not in alphabetical or numerical order based on manually assigned account codes. It's very messy! Also,

    • Zoho People Candidate Unable to see Non Admin Data

      Hello All I have assign this user as specific user as Group CEO and have access all legal entity, business unit division When i login to the user and look into onboarding i do not see any data in the candidate view This is the admin view that i have 2

    • Issues With Image Formatting when Importing Word Documents as Articles

      Hello, I am having formatting issues when importing .docx files into articles. The documents look fine on Word, but once they are imported into an article, the images will overlap text and other images. Occasionally there will be added space between images

    • ZOHO COMMERCE 2.0 – Réinventer la vente, repenser la valeur

      Il y a cinq ans, nous avons lancé Zoho Commerce pour accompagner les entreprises dans la vente en ligne. À cette époque, notre objectif était clair : simplifier l'e-commerce. Aujourd’hui, le marché a évolué, tout comme les attentes des entrepreneurs.

    • Business hours in reports

      Hi. If I activate the business hours for my tickets. Does it affect in reports? I mean, if before, without working hours a ticket comes in on a Monday and closes the following Monday, in the resolution time in working hours I get 7 days. I want to know

    • Zia Field Prediction - Unable to Validate Dataset Entries

      Lastly, whenever we want to create a new field prediction, the status gets stuck in Incomplete and when I try to annotate tickets, I get an error message saying "Unable to validate dataset entries." I've tried deleting and recreating the prediction, but

    • Using an article already existing in Zoho Desk KB as a resolution for another tickets

      Hi, I've read about the Resolution tab of the Tickets and the ability of adding a Resolution to the Knowledge Base so that both agents and customers be able to access this information. However, and considering several tickets may be solved by following the same procedure, here's my question: if, for a ticket, I solved it and added the way I solved it as an article in our KB, is it possible to grab that article and use it as a resolution for another tickets with similar characteristics? If it's not,

    • How to create knowledge base article from api?

      How to create knowledge base article from api?

    • Disabling Smart Writing Assistant

      Hello, I've found this article when looking to disable the Zoho Smart Writing Assistant in our Zoho Desk environment. I appreciate that the article is for another Zoho solution, however, I was still unable to disable this feature! Could we please have

    • Append tags to records on import

      Dear Customers, We hope you're well! Tags in Zoho CRM are humble labels you can earmark your records with for quick classification and recognition. You can tag records one by one when you have only a few records to update; you can automate tagging when

    • "Recently Changed Payload Format" for webhooks in Zoho Billing

      We are seeing a message about recently changed payload format for webhooks in zoho billing. I cannot find any notification about this change can you give me more information on this?

    • 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.

    • Zoho People Created a UBO/Group CEO Profile to view all employees

      Hello All I have created a specific role UBO/ Group CEO Profile that is able to access to view all employees information Applicability i have input all the legal entity, business unit and division which most employees are added. I have also given access

    • We've updated the webhook payload format

      We’ve updated the default payload format for webhooks as part of our ongoing efforts to standardize the webhook format across Zoho Finance suite of applications. Note: This change is also applicable for the webhooks configured from the Developer Portal.

    • Next Page