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

    • 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

    • Assistance with Bulk Contact Import in Zoho Email Campaign

      I’m currently in the process of importing the Supermarkets customer list from Zoho Accounts into Zoho Email Campaigns. During the import, I’m being prompted to complete the "field mapping" section, but I’m unsure how to properly configure it to ensure

    • Variables in Zoho Mail Signatures defined by Administrator

      Good afternoon, I'm looking at the Admin component of Zoho Mail, and I see we have the capability to define signatures for end users. We also have the ability to associate with multiple email addresses. Are we able to use any variables such as [FirstName}

    • Sales Order automatic Convert to Invoice using boolean True or false

      It is possible to convert the Sales order to an invoice using a boolean field, true or false Example: I create a field in my Sales Order, I name it QBO Invoice, and the field type is Boolean, true or false. Let's say the default is false, so when I change

    • Should I save dead quotes

      I work in vehicle transport, specializing in transporting vehicles for dealerships. My role involves collaborating with individuals at each dealership to facilitate the transport of their vehicles to customers and from auctions. My question is whether

    • Create Full-data sandbox now in Zoho CRM

      Full-data Sandbox feature is being released in a phased manner, and is currently accessible to users of the CN (China Region) data center. Full-data Sandbox is now available for JP (Japan) DC. Latest Update: Full-data Sandbox is now available for SA DC.

    • [Free introductory session] Get to know Zoho Bookings

      Hi everyone! Whether you’re just getting started or have been using Zoho Bookings for a while, there’s always something new to learn. That’s why our product experts are hosting a free live training session to help you optimize appointment scheduling for

    • Free online training for Zoho Bookings

      Hi everyone! Whether you’re just getting started or have been using Zoho Bookings for a while, there’s always something new to learn. That’s why our product experts are hosting a free live training session to help you optimize appointment scheduling for

    • Zoho Desk Validation Rule Using Custom Function

      Hi all, I tried to find the way to validate fields using custom function just like in Zoho CRM but to no avail. Is there a way to do this?

    • Custom sender email address - doesn't receive verification email

      Hello, We've just purchased the premium backstage license plan and are setting up a test event. However when adding a custom sender email address, it backstage doesn't send the verification email!? We've tried on multiple email addresses. Please advise

    • Zoho Sheet - Option to disable "Embed" button when publishing a sheet

      Hi Sheet Team, I've noticed that when I publish a Zoho Sheet publicly, there is an option for the viewer to "embed" the sheet. There is no option to disable this button and my idea/feature request is to include a checkbox in the Publish settings to hide

    • Quick resend/One-off send function

      Sometimes I might follow up with someone that opened an email and they say "Can you please send the email to me again?" Also, on occasion, a new person may have joined my mailing list and just missed a recent campaign, so it would be VERY handy just to send them the campaign email. Obviously, there is currently no quick or easy way to do this. So, would it be possible to have such a feature? It could work from a number of places, but probably the quickest and easiest way to implement it is under

    • Advanced search for Spam tickets in Zoho Desk

      Currently there is no way to use advanced search in Zoho Desk to find content in tickets marked as spam. Please add this functionality! I believe this should not be the default, but a simple check box "Include Spam Tickets" would be helpful.

    • How can I mark an account as VIP or similar for special treatment?

      I'd like to create a visual enhancement to mark an account as VIP in a way our agents can't miss it. What is your suggestion? Thanks!

    • Is there a way within Desk to allow for this timeline overlapping?

      We're encountering an issue where contract timelines for the same client at the same location might overlap or follow each other sequentially. Since a single client can have multiple contracts, and we offer various contract types, is there a way within

    • how can I change the font when I answer a ticket in zoho desk? thanks

      how can I change the font when I answer a ticket in zoho desk? thanks

    • Lookup fields can't be used for anything important

      Hi It seems the lookup fields are mostly.... informative, you can at most link stuff between modules... You can't use lookup fields in blueprints, you can't use them in layout rules or anything... It that correct?

    • Is it possible to add HTML or a button on email templates in Zoho Desk?

      Hello team, I am working on getting the best use out of Zoho Desk. I have noticed that when you hit 'reply' on a ticket, it comes with a small 'survey' to the recipient saying something like 'how would you rate your experience with us?'... so my question,

    • Is it possible to add buttons on email replies to internal team members?

      Hello everyone, I am currently trying to set up some workflow rules to trigger when a ticket is created. I have noticed there is a button that can be added to email templates when sending email alerts from workflow rules, for example ${Cases.SUPPORT_PORTAL_BUTTON}.

    • Widget function call not working – need help

      Hi everyone, I'm building a widget for Zoho CRM and trying to call a Deluge function from it using ZOHO.CRM.FUNCTIONS.execute, but it's not working. Here’s what I did: I created a Standalone function in Deluge. I'm calling it inside ZOHO.embeddedApp.on("PageLoad",

    • Item bulk update

      Why is there no "pruchase rate" to select in the field selection ? We have far more purchase increases than we have selling price amendments !

    • Can't lock timezone in new Zoho Bookings

      Hi, since the new Zoho Bookings has been changed, I cannot seem to lock the timezone in for the meetings. I have set the working hours and location, but when I got on the link, it automatically gives me slots in my timezone. I want to lock it for an in-person

    • Can we customize the default client-facing icons?

      Is there any way to customize the client-facing icons that display in the Zoho Bookings UI?  For example, I'm using the Default page theme and would like to modify the default icon that is shown beside "Service."  The icon currently being shown looks like a baseball hat to me (see attached screenshot) which has no relevance to my business or clients. It would be great if Zoho could provide a different, more generic icon (perhaps a bell icon to represent service?) or better yet allow the icons to

    • Multiple team members to access one office PC

      Hello, We have a high-performance PC in our office that we use for resource-intensive tasks. All team members need to remotely access this PC from time to time. However, when I enable remote access for myself through Zoho Assist, the PC does not appear

    • Zoho Bookings API, timezone is not recognized when passed

      Has something changed? Time zone is being passed through API but it is NOT being recognized. response is not showing time zonetime that was passed through request. This is an URGENT issue as it is preventing bookings! Seems like this is due to a recent

    • Zoho Bookings: How to set a limit for maximum bookings per day?

      Let's say I have 1 hour slots OPEN for an entire day. What if I want all of the OPEN slots to turn OFF if/when I hit a certain number of total bookings for that day? I usually only want a total of 5 appointments to be booked but I'm not sure of the exact

    • Zoho Booking API to update service for Assigned Agent

      Hi there, I have been testing and looking at the Zoho booking API for the Assigned Agent update from Zoho CRM for a long time. There is only a Fetch service request, but no updated Assigned Agent options. Does anyone know how to do that? PS: I can use

    • Zoho Accounts and Book Keeping candidate required

      Urgently required data operator who can do following tasks: Purchase Bill Entry Sale Bill Entry Bank Entries Cash Book entries 40-75 entries per days

    • Cancellation waiting list - Zoho Bookings

      Is it possible to have a waiting list in case I got a cancellation it can be filled automatically with people on this list? 

    • Next Page