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

    • Introducing swipe actions in the Zoho CRM Android app

      Hello everyone, How much time do you spend each day on your list view? Probably quite a lot. Since it's such an important part of your work, wouldn't it be easier if you could take action directly from your list view instead of opening each record one

    • Content Security Policy

      Is there a place in ZOHO CRM to add a Content Security Policy to allow for a call to a google.com map, from inside our current app? Or, how do I resolve the issue below?? jquery.js:1 Refused to load the script 'https://maps.google.com/maps/api/js?v=3.41&libraries=places&sensor=true&key=AIzaSyAyQzKeKSbLci4LwZhn9oXvtCkbUo1Ae4g&callback=map_loader'

    • Option to select location?

      As a business coach, I meet with clients at various public locations. I have two or three pre-determined locations that I meet at. I would like the client to choose the location when booking an appointment. Is there a way to do that with a single service, or is the best way to accomplish this by creating one service for each location offered?

    • Unified WhatsApp Number Management in Zoho Desk and SalesIQ

      Dear Zoho Desk Support Team, We are currently utilizing both Zoho Desk and Zoho SalesIQ for our customer support operations. While both platforms offer WhatsApp integration, we are facing challenges due to the requirement of separate WhatsApp numbers

    • Provide a standard structure to your content using article templates

      Hello everyone, When multiple writers work on different documents, maintaining a standard structure can be challenging as each of the writer follows a different writing style. However, when the structure, tone, and format of every document is different,

    • Accessibility Spotlight Series - 1

      Every user interacts with products differently, what feels intuitive to one may be challenging for another. Addressing this, accessibility is built into Zoho Project's design philosophy. This helps users navigate and perform actions with ease irrespective

    • Projects Tasks Not Showing Dependencies

      I'm clicking on tasks and the popup to add dependencies isn't showing. I can't disconnect the nodes either. For some reason when I slide a task backwards it says it cannot go before a predecessor, even though there is not predecessor. Double clicking

    • Deprecation of C4 endpoint URLs

      Note: This post is only for users who are still using the C4 endpoints. Hello everyone, At Zoho Creator, we're committed to continuously enhancing the security, performance, and capabilities of our platform. As part of this ongoing effort, we'll be deprecating

    • Introducing AWS authentication for connections in Deluge

      Hello everyone, We're incredibly excited to announce the all-new AWS authentication for connections in Deluge! This highly anticipated feature simplifies connecting to Amazon Web Services, opening up a world of possibilities and allowing you to seamlessly

    • Timeline Tracking Support for records updates via module import and bulk write api

      Note: This update is currently available in Early Access and will soon be rolled out across all data centers (DCs) and for all editions of Zoho CRM. The update will be available to all users within your organization, regardless of their profiles or roles.

    • Customize User Invites with Invitation Templates

      Invitation Templates help streamline the invitation process by allowing users to create customized email formats instead of sending a one-size-fits-all email. Different invitation templates can be created for portal users and client users to align with

    • ListObjects is recognized by VBA

      Sub addNewRow() Dim ws As Worksheet ' Set your worksheet name Set ws = ThisWorkbook.Sheets("Invoice") ' Set your table name (change "Table1" to your actual table name) ws.ListObjects("InvItems").ListRows.Add End Sub I am getting Unknown function: Li

    • KPI Widget dashboard select periods

      I have a problem with selecting periods as a user filter. In the beste scenario I would like to have to have a period filter like Google Analytics has of Datastudio (see attachment). In the KPI widget I "Group by "inquiry_date" on week&Year". It selects

    • Need a way to secure Prefill URLs in Zoho Forms (hide or encrypt prefilled values)

      Hi everyone, I often use Zoho Forms with prefilled URLs to simplify the user experience — for example: https://forms.zohopublic.com/.../form?Name=David&Amount=300 However, the problem is that all prefilled values are visible and editable in the link.

    • Can’t send emails from Zoho CRM after adding a new user — verification codes not received

      Hi everyone, We recently added a new user to our Zoho CRM account and purchased an additional license. Since then, we haven’t been able to send any emails from Zoho CRM. Our Zoho Mail accounts are working perfectly, we can send and receive emails directly

    • CRM for email in Outlook: how to ignore addresses?

      We’re using the "Zoho CRM for email" add-in for Outlook. When opening an email, the add-in displays all email addresses from the message and allows me to add them to the CRM or shows if they’re already contacts. However, sometimes people listed in To

    • Scheduling Calls in CommandCenter / Blueprints

      I would love it if you could add a function to schedule a call in the lead's record for a future date. I know you can add a Task by going to Instant Actions > Task and completing the form: These tasks go into the lead's record under Open Actions. But

    • Quickly send emails and sync conversations with custom email addresses in CRM

      Editions: All editions DCs: All DCs Release plan: This enhancement has been released for customers in all DCs except IN and US. We will be enabling it for IN and US DC customers soon. [Update on 22 May 2024] This enhancement has been released for all

    • Zoho製品と生成AIツールの活用について

      いつもありがとうございます。 弊社では、Zoho Oneを契約し、CRMを軸として、見込み客の管理から商談、その後の受注や請求の管理、サポート業務（Desk）、業務データのレポーティング（Analytics）などを行っております。 Zohoサービス自体には、Ziaというツールが搭載されているかと存じますが、それ以外の外部の生成AIツールと連携した活用などもできるのでしょうか？具体的には、CopilotなどがZohoに登録されているデータや情報を見て、対話型で必要なデータを提示してくれたり、商談や蓄積されたメモなどを分析してユーザが知見を得られるような活用ができないか、と考えております。

    • Work with Contacts who use multiple Emails / Manage obsolete Email addresses without loosing Emails in Context

      Hello List Work with Contacts who use multiple Emails Only after 1 week in using Zoho CRM productively we have contacts which randomly use 2 different email addresses. From the concept I've understood that Zoho CRM offers two email fields which are recognized

    • New Field in CRM Product Module Not Visible in Zoho Creator for Mapping

      I created a new single-line field in the Products module in Zoho CRM. Zoho CRM and Zoho Creator are integrated, but the newly created field in CRM is not visible in Zoho Creator when I try to map fields.

    • Microsoft Teams now available as an online meeting provider

      Hello everyone, We're pleased to announce that Zoho CRM now supports Microsoft Teams as an online meeting provider—alongside the other providers already available. Admins can enable Microsoft Teams directly from the Preferences tab under the Meetings

    • I want to subscribe 1 professional user but the email only 250 per day?

      When I subscribe 1 professional user, I am only able to send 250 email per day? So less? Or is it typo, 2500 rather than 250? Any sale agent or friends can clear my doubt? Thank You

    • How to add a % Growth column for year-over-year comparison (2024 vs 2025)

      Hello, I am trying to build a monthly revenue comparison between 2024 and 2025 in Zoho CRM Analytics. My current setup is: Module: Deals (Affaires) Filter: Stage = Closed Won Date field: Closing Date Grouping: By Month Metrics: Sum of Amount for 2024,

    • How do you map a user picklist field to another user picklist field.

      In Zoho Projects, I'm trying to map a custom field (user picklist) in Task Details to a field (user picklist) in the Project Details. How do you get the two to map to each other? This is what I currently have that works for my other fields but doesn't

    • Explore Competitive 3D Scanner Prices at Protomont Technologies

      The genesis of Protomont Technologies emerged from the collaborative efforts of the founders in 2019, both the founders shoulder an enormous experience in the world of 3D Printing. Protomont Technology aims to craft your vision with creativity, empowering

    • New and improved API resources for Zoho Sign Developers

      Hello, Developers community! We know that for you, an API's real value depends on how quickly, easily, and reliably you can integrate the it with your application. That's why we're excited to talk about the recent improvements to our developer resources,

    • Project Approval Process Workflow

      Issue: When a new Project is created, there is lack of process/workflow that provides their manager a process to approve or review. Suggestion/Idea: Similar to “Workflow”, we need “Workflow” ability at Project level, where based on the criteria of the

    • Marketing Tip #5: Improve store speed with optimized images

      Slow-loading websites can turn visitors away. One of the biggest culprits? Large, uncompressed images. By optimizing your images, your store loads faster and creates a smoother shopping experience leading to higher sales. It also indirectly improves SEO.

    • Why can I not choose Unearned Revenue as an account on items?

      Hello, I do not understand why we don't have the ability to code an item to unearned revenue. It is not an uncommon situation to have in business. I understand that there is the Retainer invoice as an option, however that doesn't really work for us. Our

    • Form Submission Emails

      Is there a current delay with submission emails being sent? We've had 10-20 forms completed today but only a handful of emails.

    • Rules not working properly

      I created a rule to display certain fields on certain states. But it seems to be not working. It hides the fields even when I selected California, (which is a state that should show the fields when selected)

    • Notebook font size issue

      If I copy something from somewhere and paste it in my notebook, the font size becomes smaller.

    • Sign in process is beyond stupid. I'd rather plug my phone into USB and copy files than sign in to this POS.

      792 clicks and fields to fill in just to get into a 3rd rate app is too stupid for me.

    • cant use mail API

      I have generate Auth token from https://accounts.zoho.com/apiauthtoken/nb/create?SCOPE=ZohoMail/ZohoMailApi&EMAIL_ID=Zoho Mail Username or Email ID&PASSWORD=Your Zoho Mail Password and get the token but when i use that token on http://mail.zoho.com/api/organization/

    • Ampersand in URL parameter // EncodeURL does not work

      Hi Zoho, I have a url link with a parameter. The parameter is including ampersand in some cases (Can be "H&M" or "P&I") When trying to use %26 instead of "&"  (the result I get using EncodeURL()) I get H%26M instead of H&M in the parameter field. How can I solve this? Thanks! Ravid

    • how can we create in zoho crm a new contact when the looup does not find a similar existing one

      In forms/integrations/zoho crm / ne w record tab, contact name is to be mapped with my form contact name. When I go in biew edit/lookup configuration, I don t get the options (help dedicated page simply repeat the same info you get in the app) and does

    • Directory Websites

      Directories are a good website category to gain search engine traffic. Directories for a professional service category as an example can help their members in search results over their individual website. It would be nice to have a directory template

    • Manage Task on Mobile

      How do we manage our task on mobile devices? It seems that there should be a standalone mobile app to handle the new task features. The new features released in regards to Task management are great by the way! Now we need to bring that all together in

    • Set Default Payment Method & Default account

      Hi, I would like to know how to set the default payment method and default bank account when recording payments in zoho books. At present we have to change these fields everytime we record a payment, which leads to potential error and as we have a very

    • Next Page