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

    • Records per page in New UI

      It seems the new UI lack of "Records per page" function, it is very handy if you are looking for a data that you don't know the exact search term, but you know it may "between" few entries. without a "page" function, we kind of have to keep page down and page, the autoload is not that fast, and you are dealing with thousands of entries. Could we please have the "records per page" function back to New UI (also it shows total counts of the record) Looking forward to hear from you.

    • zet pack not working

      We are using the zet pack command to package our Zoho extension. However, after running the command, the extension gets packed, but the resulting package is empty. We've attached a screenshot for reference. Could you please assist us with resolving this

    • CSV File Added to Form - Parse and Map to Fields

      Hi,  I apologize, I can't seem to find a clear explanation or help article on how to parse a CSV file. On validate, I process this deluge script. fileContent = Collection(input.File_upload.content); result = fileContent.values(); info result; What I want to do is create a record (in another form), and map certain fields to fields in the form.  I can get values, which is the whole file but no keys. If I use result = fileContent.keys(); I get "0" As you can see from CSV, my first line is my map and

    • How can I create individual records from a subform

      Hi, I am collecting subform data into a Lead record and I need to create individual records for each row associated to the account when it is converted. How can I do this?

    • Encountered an error while creating a bill in Zoho Inventory: {"code":6,"message":"Invalid data provided"}

      I attempted to create a bill using the Zoho Inventory API, but I received an error: {"code":6,"message":"Invalid data provided"}. However, when I made the same request again, it was successful. Does anyone have insights on why this happened?

    • How can I view Help Center articles in 'Sandbox' mode?

      I have published some help center articles but when I try to preview the knowledge base page, it says 'We have no content to display'.

    • Free user licenses across all Portal user types

      Greetings everyone, We're here with some exciting and extensive changes to the availability of free user licenses in CRM Portals. This update provides users with access to all Portal user types for free to help them diversify their user licenses and explore

    • Custom "Filter By" in Client Portal

      Currently our client portal only shows items for that specific person that is logged on to the portal, we want the current logged user to see all items for that user's company. An example would be invoices, so the current user would see all invoices for

    • Why do I need to send the Customer ID in the Create Purchase Order Request?

      I'm trying to create a purchase order using this endpoint https://www.zoho.com/inventory/api/v1/purchaseorders/#create-a-purchase-order Unfortunately, I'm getting this error { "code": 4, "message": "Invalid value passed for Customer ID" } The doc doesn't

    • How to Retrieve Serial Numbers of Items in Zoho Inventory via API?

      Hello, I am currently working with the Zoho Inventory API and need to retrieve the serial numbers associated with specific items in our inventory. After reviewing the documentation, I couldn’t find an endpoint dedicated to fetching serial numbers for

    • Allow standard layout to be used/edited as a starting point for canvas

      Hello, I would really love to improve the look of our CRM interface using Canvas but we have spent so much time customising the screens already (in standard view) that the thought of starting from scratch and building everything again, field by field,

    • merging email accounts

      previously I was using 5 mail pop mailboxes within VO , 2 of them are becoming obsolete so I was thinking about deleting the obsolete ones and merge the remainders into my main account mailbox within VO , is this possible ? thnx in advance.

    • Zoho desk desktop application

      does zoho desk has a destop applicaion?

    • Opening & working multiple tickets

      We work in multiple tickets at the same time. Currently to do this, we have to open multiple instances of Desk.  Is there a way to do this by just opening multiple ticket tabs within 1 instance of Desk?  

    • A recap of Zoho Sprints 2024

    • Queries filtered by current page/record

      I have been trying to use the new queries feature, and I can filter the query, but I'm coming unstuck because I don't understand how to make the query dynamically include the filter of the current record. ie if I'm on a deal, to filter all the records

    • Layout Prompt when creating an oportunity

      Hi There, Is there a way to create a pop-up prompt when I create a new Deal giving me the option of what layout to use based on a certain requirement? So, if the prompt had two options 1. is a new business Deal 2. is a renewal Deal Thanks in advance

    • ZohoPeople API - Retrieve leave type IDs

      Hi All, I have created a leave type in Zoho People UI. Now I need to fetch the  Leave Type ID of it. As per the documentation[1] I used the  curl request [2]. But I ended up with the error response from the API.  {"response":{"message":"Error occurred","errors":{"message":"Server Error Occured","code":7031},"status":1,"uri":"/api/leave/getLeaveTypes"}} The new API[3] does not tell anything on how to retrieve the Leave Type ID.  Have you done any changes to the API recently. If so please let me know

    • Inadequate Customer Support

      Hello & Greetings! I have been a pro Zoho user since the last 2 years and I would admit that the apps that are being offered are good, however the support we receive has a lot more to achieve. This being a design issue rather than a staff issue. Being

    • Incorrect Closing Stock Amount value

      Act as Zoho Inventory Expert. We are a construction company, OVAL Projects Engineering Limited. We started using Zoho Inventory for Stock Management.I have multiple warehouses. I have encountered a problem while generating custom warehouse wise inventory

    • The Next Chapter for CRM for Everyone: Moving from Early Access to Phased Rollout for Customers

      #CRM25Q1 Hello Everyone, Until now, CRM for Everyone has been available in early access mode exclusively for users who opted to try the new version. We are now transitioning to a phased release, starting with the basic edition. We are thrilled to announce

    • Zoho and Hostaway webhok integration.

      I want to receive data coming from hostaway webhook and receive it in zoho crm to create or update record in a module based on conditions. The hostaway webhook sends data every time a reservation is created or modified or cancelled. The hostaway sends

    • Zoho vault uses only password to unlock not a TouchID

      TouchID works when normally openning app but when called from keyboard while browsing or trying to log to another app it shows only password option to unlock. This behaviour is only on iPad Mini witch latest 18.2OS

    • Error 403: Forbidden When Updating Email Signature via API

      Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

    • Unable to add Guest Members

      We are having issues adding Guest Members to our Cliq account. We have sent out a number of request but it seems that only some people are able to access the platform. Others have received a message stating that they need to be granted access from an

    • Webhook when estimate is refused is not firing

      Hello, I use a workflow through make that sends estimate with zoho books (I paid books and sign). -Those estimates when accepted are firing the webhook that I create in zoho sign (photo 1) -However when refused they are not firing the webhook that I created

    • New Leave Type: Compensatory off

      Hi, there is a new Leave Type: Compensatory off. Can someone tell me how to use it, because it sounds it could work for overtime compensation for our techs. Thanks Andreas

    • Invoice status on write-off is "Paid" - how do I change this to "Written off"

      HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

    • Create a custom button to modify custom fields in zoho Inventory

      I am needing a script for two buttons, 1. Button will add todays date to a custom field named cf_sent_to_sov 2. Button will mark a checkbox or unmark a checkbox field named cf_parts_ordered I have been trying to figure out deluge but have not got anywhere

    • How to add a record for a different report

      I have one form and it has two reports I need to programmatically add records to both reports For example one report is draft and other is processed After the user performs some action on the draft report I want to create a new report in Processed and

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

      How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

    • Webhook 'when estimate is refused' is not firing

      Hello, I use a workflow through make that sends estimate with zoho books (I paid books and sign). -Those estimates when accepted are firing the webhook that I create in zoho sign (photo 1) -However when refused they are not firing the webhook that I created

    • Amazon Integration

      Hi, I am seller on Amazon , & I would like to sign up for Zoho books. However my question is can we automate/integrate invoicing, charges and returns in amazon with Zoho using API? Do you have a developer for this? I did take a look at zapier however it just has a create Invoice function nothing else.

    • Link project tasks to tasks in CRM and/or other modules.

      Hello, I have created and configured a project in Zoho Projects with a set of tasks. I would now like to link these tasks (I imagine according to the ID of each one) to actions in the CRM: meetings, tasks, analytics). The aim is to link project tasks

    • Zoho CRM API Credits & Limits for Workflow

      Hi Team, Just wanted to clarify how the API credits work for Zoho CRM and workflows with custom functions. API Credits are based on your subscription and are set at the account level. You can buy additional credits if needed. For Enterprise customers,

    • Count the NUMBER of Contacts for an Account automatically

      Hello. Is there any way Zoho can count the number of CONTACTS for a particular ACCOUNT and have a field in the ACCOUNT module update itself automatically? Currently we use Zoho to administer our language school and the Contacts represent students and Accounts represent Grupos (Classes). It would be very useful for us to have a feature like this enabled, and I can see other similar applications requiring something like this. The solution would be even better if the Contacts met a specified criteria,

    • How to use Twilio to send appointment notification and reminder SMS in Zoho Bookings

      Hit no-shows out of the ballpark by combining Zoho Bookings and SMS providers. SMS notifications help you remind customers of their appointments and reduce no-shows by reaching out where they are. In this guide, we'll configure an SMS provider called

    • geographic search filter in map view

      Hi, I have a recruiting and timesheet system built in Creator. The client wants to enhance the search for candidates based on their location and filter by job skills - currently they look on the Map View which uses the geo location or post code of the

    • Announcement: Upcoming changes to the permission grant flow for OAuth apps

      This announcement is intended for app developers who use the Zoho API console. We're going to implement an important update to the way users grant permission for the OAuth apps created through the API console. What’s changing? Currently, users can grant

    • Next Page