Building Extensions #15: Creating widgets with the JS SDK bundle in Zoho Desk—Inter-widget communication

Building Extensions #15: Creating widgets with the JS SDK bundle in Zoho Desk—Inter-widget communication

This series aims to equip developers with all they need to build extensions for Zoho Desk in Zoho Sigma and publish them in Zoho Marketplace.

Hello Developers!

In our previous post, we briefed the use of Hooks API and explained it with an example on how to use them in a Desk extension. In this post, we'll learn about the inter-widget communication feature and how it can be used in your extensions with an example.

Inter-widget communication

There are scenarios where an extension could have multiple widgets. In such cases, it is important to have communication between these widgets for the extension to be more user-friendly. The inter-widget communication feature of Zoho Desk helps you create a connection between widgets and facilitate communication between them. When two widgets are communicating, there are a few points to remember during implementation. Let’s consider one widget as the sender and the other as the receiver.

Sender widget
  1. This widget should know the receiving widget's identity.
  2. When it knows that identity, it can send the desired data to the receiving widget.
Receiving widget
  1. This widget needs to be active to receive data from any sender.
  2. It can then process the received data.
You can achieve this with the help of a couple of SDK methods provided by the Zoho developer platform.
  1. App.instance.getWidgets(): The getWidgets() method will return an array of all the widgets available in the extension, including the one from where this call is made.
  2. siblingwidgetId: Every widget associated to the extension will have a unique ID. You can use the code widgets[0].widgetID to get the widget ID of the desired widget from the array of widgets available. The array index for the widget is defined based on the order in which the widgets are listed in the plugin-manifest file of the extension.
  3. var siblingWidget = App.instance.getWidgetInstance(siblingwidgetId): This returns the whole instance of the selected widget.
  4. siblingWidget.emit('event', data): This sends the data from the selected widget on the event occurrence.
Once we pass the data from the first widget (sender), we need to enable the other widget (receiver) to receive the event sent from the first widget. The following code snippet needs to listen to an event emitted by the sibling widget.

App.instance.on('event', function(data){});

Sender Widget
Receiving Widget
Need to know the receiving widget's IdentityNeed to be active to receive the data
Get the instance of the desired widgetReceive data and process it as required
Send the data

Let’s learn about inter-widget communication with an example.

Scenario

Consider a scenario where an agent is provided with detailed information about a particular customer within Zoho Desk itself that is easily accessible. Wouldn’t it be useful for the agents to understand the value of their customer easily? Yes, this can be done using an extension.
  1. Fetch the details of the customer from Zoho CRM.
  2. Showcase the required customer’s information in Zoho Desk.

Platform features

To implement the above scenario, the following Desk platform features are used.
  1. Background widget: This widget runs on its own in the background by default. In our use case, as soon as an agent opens a ticket, the customer's email ID needs to be fetched and the corresponding details are imported from Zoho CRM accordingly. In this case, we can use the background widget feature to fetch the data from Zoho CRM. This can be implemented using the background widget.
  2. Tickets subtab widget: In our example use case, we need the customer’s details to be shown to the agent. Let’s choose the ticket's subtab location to display the same.
  3. Inter-widget communication: Because there are two widgets being used, we can use the inter-widget communication feature for a seamless data flow between the two widgets.

Subtab widget

An agent opens a ticket. Now the background widget gets loaded by default. When the agent moves to the subtab widget to view the customer details, the subtab widget is loaded and we communicate to the background widget about the same. The customer data transferred to the subtab widget will be displayed to the agent.


Background widget

As soon as the background widget gets a communication from the subtab widget, the customer's details are fetched and transmitted back to the subtab widget.





We have attached the entire code of our sample in this post. You can download the same and reuse, if required.

Sample output



Hope you found this post to be useful. Stay tuned for more posts in this space!

See Also



    • Recent Topics

    • System-generated support email added in CC on “Reply All”

      Hi, I recently set up Zoho Desk for a client and we are trying to prevent the Zoho Desk system-generated support email address (not the mailbox used as the department’s "From address") from being automatically added in CC when agents use “Reply All” on

    • Applying Excess Payments & Conflict Invoices Due to Cancelled Items

      I’m running into several issues that appear to stem from deeper-than-expected overlap between Zoho Finance (Books/Inventory) and Zoho POS. The level of coupling between these systems seems greater than what was originally communicated, and it’s leading

    • Convenience Fees

      I use Zoho Invoice for invoicing my billboard customers.  I have a few customers that want to pay using credit cards and ACH.  As a result, I have integrated an Online Payment Gateway (Stripe) for these customers.  I currently charge these customers a "Convenience Fee" of 3% for using this service as I typically only take checks as payment (and the gateway charges 2.9% + $0.30 per transaction).  I do this by creating a separate line item on the invoice and adding 3% to it.  I would like to offer

    • HTML Tags added to Reports with Notes

      Recently Zoho added the ability to markup text within notes. That way, users can change font size, colors, etc. It's a great change. However, since the change, reports that include a column for "Note Content" are printing HTML tags within the report.

    • New Feature: Audit Log in Zoho Bookings

      Greetings from the Zoho Bookings team! We’re excited to introduce Audit Log, a new feature designed to help you track all key actions related to your appointments. With Audit Log, you can maintain transparency, strengthen security, and ensure accountability.

    • Restrict Payment Methods

      Allow us to restrict certain payment methods specific for each customer.

    • Emails Getting Delay Error Messages - Status: 451

      Hi. Hoping someone can help. I've been using Zoho for over a year now with no problems at all. Today, the majority of my emails I send out or reply to are getting this error: This message was created automatically by mail delivery system. THIS IS A WARNING MESSAGE ONLY. YOU DO NOT NEED TO RESEND YOUR MESSAGE. The original message was received at Sun, 22 Dec 2019 18:20:19 -0800 from wazza@amninjas.com [wazza@amninjas.com] ----- The following addresses had fatal errors ----- [Status: ERROR, Address:

    • Add Domain

      Hello Zoho Support, My Zoho Sites project accidentally auto-added domains with http:// prefix and duplicated domain entries. Current domains list shows: http://www.kinhtethethao.com.vn (Primary – cannot be removed) http://www.kinhtethethao.com.vn (verification

    • Kaizen #221: Workflow & Actions Reports APIs

      Over the last few weeks, we have joined Zylker Cloud Services as they restructured their automation ecosystem using Workflow APIs and Actions APIs. Along the way, we discovered how to audit workflows, update old rules, create new ones, and manage associated

    • Having an Issue with the Entity ID

      I'm having an issue when trying to use Zoho Flow and the notes function. I currently have it set up when a new response comes into a particular form, all of their responses will go into the notes section of their contact on the CRM. I'm currently mapping

    • For Each Loop in Zoho Flow

      I am using Zoho flow to create rows in an google sheets for every new order in Shopify but the issue is that it is creating one row per order and all line items are comma separated values but I want separate rows for each line item. Is there a way to

    • Debug and Test not receiving updates

      Hello, I've been trying to debug two of my simple flows between Zoho Projects and Clockify but it seems like the Debug and Test feature is not working for me. When I click the Play button on any of the flows and then perform the trigger actions nothing

    • Attendance, Reimagined: Smarter Views for Teams and Individuals

      Tracking attendance shouldn’t feel like a chore. With the revamped Attendance module UI, Zoho FSM makes it easier than ever to monitor work hours, check-in activity, and team availability—whether you’re managing an entire workforce or just keeping an

    • Logistics Industry: Learn to create amazing appointment scheduling sites

      In the logistics industry, the quality of service is something that cannot be shown to others unless they experience it.  Sure, there are metrics that show how you fare when compared to your competition, but then, it only communicates little with respect to quality. The usual route which firms in logistics took are advertisements, to which the internet has opened alternatives in today’s digital age like websites and appointment scheduling sites. A great online presence can help you communicate with

    • Customer Management: # 1 Pick a Convenient Way to Onboard Customer

      When Meera opened her bookstore, onboarding customers was effortless. A customer walked in, picked a book and left with a handwritten bill. As the store gained popularity, things changed. " Can I place an order over the phone?" a customer asked one day.

    • Fetch ALL items from Inventory and send to Google Sheet using Flow

      The title says it all -- I want to fetch the Item name, SKU, Purchase rate, and Sales rate for ALL items in Zoho Inventory and have them populate a tab in an existing Google Sheet. I have already successfully made this work for one item, so the flow is

    • Why Document Integrity Matters at Every Stage of the Contract Lifecycle

      Contracts are legal records that must stay authentic and traceable from creation to expiry or termination. In Zoho Contracts, several design decisions focus on protecting the integrity of every document. These measures ensure that no important details

    • affichage pièces jointes impossible

      Bonjour, aujourd'hui je n'arrive pas à afficher ni à télécharger les pièces jointes dans ZOHO CRM. J'utilise Chrome, j'ai vidé les caches et les cookies. Mais cela ne change rien. Merci de votre aide

    • Reminder to renew subscription.

      Whenever I try to add to one of my notes a " renew your subscription" window pops out and won't Close disallowing me to edit. Why should I renew my subscription on an application with at best such bugs and at worse such underhanded ways to force ren

    • Fields not coming through, not pulling data

      Forgive the noviceness of my vocabulary. I am in Zoho flow connecting CRM and Projects. When an opportunity hits a certain stage, it will create the project in Projects, and bring in data from the opportunity. Everything is working, except for two fields

    • Smartsheet Integration

      Has any in the community been able to integrate Zoho Desk with Smartsheets using Zoho Flow? I am trying to get the Smartsheet Row ID based on ticket data and cannot find documentation on the Get Row function for Smartsheet. It is asking for a Query String

    • CRM Campaign - how to mass remove contacts?

      Does anyone have a solution for removing all contacts from a CRM campaign. Seems that one by one is the only option. 

    • Send out follow-up email in the same thread (threaded conversations in individual emails) from Zoho CRM

      Hi, I'm new to Zoho. I'm trying to send individual emails to my leads one by one. And I'll send out follow up email if I don't hear back from them later. However, instead of sending a new email, I want to reply in the same email thread so that the recipients

    • Cadence Support in Zoho Vertical Studio

      We would like to know whether it is possible to create and configure Cadences in Zoho Vertical Studio, similar to the Cadence feature available in Zoho CRM. Please confirm if Vertical Studio supports creating cadences for modules and users, and whether

    • Removing "Products" as mandatory field from Sales Order creation page

      Hello, friends According to our workflow, we should: 1) create Sales Order (Stage "New") 2) call and discuss the Products with a customer (Stage "Communication") 3) add the Products to the Sales Order during the call However, "Products" is mandatory to

    • Zoho Books says "The customer "Hakimuddin P A Ali" already exists. Please specify a different name.""

      One of my transaction is not getting posted from Stripe to Zoho books. I already checked in Zoho books that there is no customer already present in Zoho books with the same name (as the error mentions) I already raised this complaint on Zoho flow portal,

    • Is it possible to automate a file to be directly uploaded to a specific subfolder in Zoho Workdrive?

      I am establishing a workflow so that when a new task is marked "complete", the document submitted in the task (under the "Documents" tab) is automatically uploaded to a specific subfolder in the associated WorkDrive for the project. However, the dilemma

    • Steuerberater der Zoho benutzt in Deutschland

      I write in English because the issue is related to German regulations. Wir sind ein Unternehmen, welches aktuell keine Pflicht zur doppelten Buchführung hat. Aktuell bucht unser Steuerberater jeden Beleg, auch unsere Auslagen. Wir würden dies gerne selbst

    • Why are some folders not showing up as an action trigger in Zoho Flow?

      I am currently working on a flow that automates the process of creating a folder in WorkDrive once a Task List is created. When I am selecting a destination for the folder, some projects are not showing up. I intend to create a folder within a specific

    • Getting Date from PostgreSQL error

      I am pulling data from PostgreSQL table into a CRM record via FLOW but the field is coming out empty. Need some suggestions: Field Type in CRM: Date/Time Field value in PostgreSQL: 2024-12-05 21:06:32.479 Field value in FLOW "Fetch Row": created : "2024-12-05T21:06:32.479382000",

    • Zoho Flow to SendOwl API error

      SendOwl is listed in the apps list of Zoho Flow. When trying to connect through the API with valid key and secret, the error given is: SendOwl says "HTTP Basic: Access denied" It seems Zoho doesn't connect via HTTPS. I've already tried using webhooks,

    • decisions based on content of a ticket

      Hi, I need to create a flow that sends automated email based on the content of a ticket in zoho desk. I have certain tickets that are formatted in a particular way, and contain certain keywords. How can I filter (based on decisions) the tickets based

    • Newline Character "\n" parsing problem in webhooks

      Hi there, I am facing an issue in Zoho Flow (maybe a general issue or maybe only in Zoho Flow): I have this function: void sendListWebhook(string url, list array) { for each arrayElement in array { result = invokeurl [ url :url type :POST parameters:arrayElement.toString()

    • One Company, multi branches, multi warehouses and I need to manage this in one organization

      Dears,  I'm a new user to zoho solutions,  however I found a lot of persons giving a nice feedback about it also a lot of good reviews. I though why we try to move to it in our company. I'm not sure if Zoho could give me all what I need or not that's why I'm going to post in this topic most of the things I know about managing our business to let you ,as zoho experts, tell me if Zoho will meet my business requirements or not. First of all we are a flowers and landscaping company we have like 6 to

    • Migration Evernote

      Bonjour Apres plus d'une dizaine d'année passer avec evernote j'ai décidé de franchir le pas . J'ai débuté par migrer mes notes vers zoho et depuis la migration est bloquée. Impossible d'avoir un retour du support malgré plusieurs mails et tentative d'appel

    • Pushing GCLID info from Gravity Forms to ZohoCRM

      We are switching to Gravity Forms from Zoho Forms and I cannot find any good info on how to make sure my GCLID tracking info is pushed through to the CRM through my new forms. There was an article in the documentation about placing something within the

    • On Zoho Flow, Record deleted trigger from Zoho Creator

      On creating flow in Zoho Flow, when we select app Zoho created, it provides 3 trigger options - Record created, Record updated and Record created or updated We need trigger on "Record Delete" as well, We have a use case to fire our system api if record

    • Zoho Flow Switch On Not Working

      I have created a flow which is when the mailbox address received the email that meet the condition will auto fetch the contact, account and finally create the ticket by using Zoho Desk. When I do a test and debug on my flow it work well as what I expect

    • MS Teams Flow Integration Question

      Where can I find the chat ID for the "Post message to chat" target?

    • Zoho Flow - Access denied to recover recording from call module - OpenAI

      Hi, I am trying to build a Flow to recover recoding when a new call is saved in my CRM. I have integrated my CRM with ringcentral and the recordings are saved in the event. Trigger: When new module entry Step 2: Fetch module entry (Zoho CRM says "permission

    • Next Page