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 #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    • Recent Topics

    • Preserve Ticket Issue Mapping When Migrating from Jira to Zoho Projects

      Hello Zoho Projects Team, We hope you are doing well. We are currently exploring a full migration from Jira to Zoho Projects, and we identified a critical limitation during the migration process involving Zoho Desk integration. Current Situation: We use

    • Unable to see Zoho contacts in Zoho app on ios

      Hi Support Team, I am a new user, I have created my account and installed zohomail app on iOS 16 which works. I was also able to import my Gmail contacts into Zoho Contacts, which I can see. The problem is that I can’t see these imported cobalts in Zohomail

    • Task Due Date greater than 10 years.

      We use recurring tasks in Projects where every week, month, year etc Some of our projects are greater than 10 years and we are unable to set a new due date because the difference between start date and due date is greater than 10 years. As an example

    • External User onboarding for zoho connect is not really intuitive.

      So the external user is sent an invite, which has a button that directs them to login to zoho to view the invite, but if they don't have a zoho account, they cannot access that invite, which seems kinda silly, as there is not real way on for them to create

    • Hosting external websites on Zoho?

      How can I host my external website on zoho? Do we have that option? I am currently with hostinger and am looking to switch to zoho. Kindly help. Thanks.

    • How to Add Time Formula Duration (hh:mm)

      Hi everyone — I’m trying to create a formula field in Zoho CRM that calculates the difference between a “Call Start Time” and “Call End Time” and displays the duration in HH:MM format (for example: 1:04 for one hour and four minutes). My current setup

    • How can I calculate the physical stock available for sale?

      Hey Zoho Team,  I've tried to calculate the physical stock on hand in various ways - but always receive a mismatch between what's displayed in Zoho Inventory & analytics.  Can you please let me know how the physical stock available for sale is calculated?

    • Set Custom Icon for Custom Modules in new Zoho CRM UI

    • Marketing Tip #4: Build your email list early

      Email marketing has one of the highest returns on investment. Don’t wait until later; start collecting subscribers now. When you've got their attention, you can send them emails about offers, new product launches, seasonal greetings, and more. Try this

    • Is anyone else having trouble saving a custom image in their email signature, or is it just me?

      When I try to save the image I get an error that says "Operation Failed" I opened a support ticket two weeks ago and received a response that it would be debugged, but it still isn’t working

    • Unify Overlapping Functionalities Across Zoho Products

      Hi Zoho One Team, We would like to raise a concern about the current overlap of core functionalities across various Zoho applications. While Zoho offers a rich suite of tools, many applications include similar or identical features—such as shift management,

    • Zoho Desk Domain mapping / Cloudflare CNAME not recognized

      Hello, my website is behind Cloudflare and SSL. From the Cloudflare control panel I added a CNAME record such as support.mydomain.com pointing to desk.cs.zohohost.com but I'm stuck with the message "Make sure you've mapped the CNAME entry..."

    • Create an Eye-Catching Announcement Widget for Your Help Center

      Hello Everyone! In this week’s edition, let’s explore how to keep your customers updated with exciting news in the Help Center. See how ZylkerMobile wowed their customers by bringing updates right to their portal. ZylkerMobile, the renowned brand for

    • I want to add my other zoho account in same pc

      why does zoho restrict me doing many things as i also want to add my second mail account bit its not allowing me to do that

    • Search in Zoho Community Not Working

      I realize this is a bit of a meta topic, but the search for the various Zoho Communities appears to not be working. I'm under the impression that they run on some version of the Zoho Desk platform, so I'm posting this here.

    • Capture Stripe’s Customer ID

      Does anyone know of a way to capture Stripe’s customer ID that is created when the form/payment is processed? I would like to have the customer ID stored in our CRM so we could utilize in some custom functions down the road.

    • Custom Modules - Where are Comments??

      In the standard ticket module and in the tasks module, we have an interactive comment box that we can post important details/notes and can tag others if needed. Where is this functionality for Custom Modules? Ideally, custom modules would have very similar,

    • Zoho Mail will not set up in Thunderbird

      I am using Thunderbird 13.0.1 in Linux Mint 13 64-bit.  I cannot set up my Zoho IMAP email in this client.  This is evidently a common problem as evidenced by these postings in the Thunderbird forum: thunderbird can't seem to "find the settings" I cannot configure it for my zoho.com email account I can not get ZOHO to configure. Any suggestions? The best T-bird seems to be able to do is to refer these users to the Zoho forum. I believe the instructions in the Zoho help wiki are correct, although

    • Zoho ShowTime: Certificates of Completion - Award your learners with a sense of achievement

      In our increasingly competitive market, professional trainers need to differentiate themselves if they are to survive. One way to do this is to focus on innovation and deliver an ideal learning experience. By developing a renowned certificate program that provides learners with a specialized skill set for a particular industry, both trainees and future prospects will recognize the trainer's leadership in that field. This can help with long-term growth, revenue generation, and even marketing and branding.

    • IMAP Migration from Gmail

      I have been trying to import my email from a Gmail server and keep receiving the following error. I have reduced the security, activated imap and no improvement. The link to the Google support item has not helped. Unable to connect to your account. Please

    • Your Incoming has been blocked and the emails will not be fetched in your Zoho account and POP Accounts Click here to get unblocked.

      When entering my account, this error is thrown at me, and I deleted a good part of my deleted messages, but I still can not unblock it, I would appreciate your help. reservas@lineasperutravel.com

    • Request for Creating Multiple Email Accounts on One Mobile Number

      Dear Zoho Team, I am planning to shift all my work-related communication to Zoho Mail because of its reliability and features. For my work, I need to create 3–4 separate email accounts for different purposes. Could you please confirm if it is possible

    • Signature issue

      Problem: The signature does not appear when replying or forwarding an email. solve issue: settintgs/Signature Check option place a signature above the content with quotation marks

    • mail admin not loading

      i am trying to login to mailadmin ... gears keeps rotating forever... its not a password issue whats so ever ... not cookies issues whatsoever from android app i can login but there so few things to do from there .. i changed ip address the same... i

    • Unify All Zoho Video Meeting Experiences into One Standardized Platform

      Hi Zoho Team, We would like to share an important user experience concern regarding the current state of video meeting functionality across the Zoho ecosystem. The Problem Within Zoho, there are multiple ways to initiate or schedule a video meeting: Zoho

    • Changing Account in Quote form does not update address information.

      I am trying to update the address information in a quote I've created. I corrected the address in the "Account" but that did not change in the quote. If I re-enter the Account Name in the Quote form, nothing updates. How do I fix this?

    • Zoho One Backup of entire account

      Hello, When using Zoho one is there a way to backup your entire account of all apps that you are using \ activively using in a single step or do you have to backup each applications data individually? Thanks,

    • Issue with “CC” and “Subject Details” of the initial mail when reply / replied all / forward using Zoho Mail Client (Desktop / Web Mail / Mobile App)

      It is observed that when I reply / reply all / forward a mail using Zoho Mail Client (Desktop / Web Mail / Mobile App), the “CC” and “Subject Details” are omitted from the mail which was replied/forwarded. However this is not the case with outlook mail

    • Unable to send Emails - 452 4.3.1 Temporary System Error

      Whene ever i request smtp server to send the email (without attachment). i recieve error "452 4.3.1 Temporary System Error"

    • I can't receive email

      I cannot receive any email sent to my Zoho email after the free upgrade plan trial is finished.

    • Help for the alisa adding

      Sorry, I would like to add a paypal alias on my domain email address. However, the system blocked it. How can I do it?

    • Lite plan attachment said 250mb but actually 25mb ?

      Lite plan attachment said 250mb but actually 25mb ? I can't attach over 25mb files, and can't receive mails has attached files over 25mb too

    • Option to Customize Career Site URL Without “/jobs/Careers”

      Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving to

    • Any update on much requested feature, to delete attachments without deleting the e-mail body?

      People have been requesting the ability to delete e-mail attachments without deleting the e-mail for more than ten years now. The latest I see is marked "Working On It" and a year ago it was supposedly being added, see here: https://help.zoho.com/portal/en/community/topic/is-there-a-way-to-delete-mail-attachments-without-deleting-the-text

    • Old vs New Value for Deleted Lookup Values

      Suppose the following scenario, where a value in a lookup is deleted: 1. User has countries form 2. Form A has a lookup to countries form 3. User selects Italy in Form A and saves it with the Italy ID 4. Form A report shows Italy 5. Italy is inadvertently

    • Zoho email using a python or html template

      # main.py import smtplib import csv from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart from config import SENDER_EMAIL, APP_PASSWORD, SMTP_SERVER, SMTP_PORT # email Subject email_subject = "🎉 Python + Zoho Mail HTML Email

    • Desktop app doesn't support notecards created on Android

      Hi, Does anybody have same problem? Some of last notecards created on Android app (v. 6.6) doesn't show in desktop app (v. 3.5.5). I see these note cards but whith they appear with exclamation mark in yellow triangle (see screenshot) and when I try to

    • customize payment page

      Is there a way to customize, other than the theme colour, the payment page that customers are taken to from invoices? I can't seem to find a way. I just don't like the formatting of the current page and would like to make it look better. I've looked at

    • Solution: How to send email using a python follow up this

      # Step One Setup Your App Password For this url {https://accounts.zoho.in/home#security/app_password} #How to genarate App password {https://help.zoho.com/portal/en/kb/bigin/channels/email/articles/generate-an-app-specific-password#To_generate_app_specific_password_for_Zoho_Mail}

    • Are Environments Worth It?

      In concept, Environments in ZC is a great idea. I think the flow is pretty smart when you compare it to GitHub, especially for a low code audience. However, in practice, I've found it to be unpredictable, and I've only used it a few times. Aside from

    • Next Page