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

This widget should know the receiving widget's identity.
When it knows that identity, it can send the desired data to the receiving widget.

Receiving widget

This widget needs to be active to receive data from any sender.
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.

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.
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.
var siblingWidget = App.instance.getWidgetInstance(siblingwidgetId): This returns the whole instance of the selected widget.
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 Identity	Need to be active to receive the data
Get the instance of the desired widget	Receive 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.

Fetch the details of the customer from Zoho CRM.
Showcase the required customer’s information in Zoho Desk.

Platform features

To implement the above scenario, the following Desk platform features are used.

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.
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.
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.