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

    • Allow us to disable the Reopen Ticket button after a ticket is closed

      Disabling the Reopen Ticket will allow us to have more control over the ticket's flow. According to support, this is currently not possible. Please add this to let us, the customers, mold the ticketing system into something that we can use for our business

    • How to Enforce Mandatory Fields (Category/Sub-category) Before Closing a Ticket?

      Hi, I'm currently using Zoho Desk and encountering an issue where agents are able to close tickets without filling out mandatory fields, specifically Category and Sub-category. I’ve already set them both as a mandatory field, but it can still be bypassed

    • Admin Control for Default Email Templates in Zoho Desk

      Hi Zoho Desk Team, We would like to request a feature enhancement related to default email templates. Currently, agents can select and set their own default email templates when replying to tickets. However, we believe this setting should be managed centrally

    • Lock out of account after password update

      This is a bit of a catch 22 situation. I updated my account password using password generator in ZohoValut. Now I am locked out of everything, as I cannot get into OneAuth for 2FA, as the password is randomly generated, without getting into ZohoValut,

    • Guidance on Making Zoho Desk Connections Available for All Data Centers

      Hi Team, I’m currently developing an application using Zoho Desk connections to manage OAuth for my third-party products. Could you please advise on the steps required to make it available across all data centers? Looking forward to your thoughts on

    • Multibrand Help Center - Share knowledge base catgories between multiple departments

      Hello, I would like to know if it is possible to share categories between multiple departments when the multi brand feature is enabled. So that then one portal exists per department, but certain categories are visible in multiple portals. After all, we

    • Unable to upload document error on zoho sign

      i am creating a document using laravel php and here is my code and i get this reponse {"code":2005,"message":"Unable to upload the document","status":"failure"} $path = storage_path($file); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://sign.zoho.com/api/v1/requests');

    • Cloud to cloud folder migration from Sharepoint to Workdrive

      I am aware of OneDrive migration: https://help.zoho.com/portal/en/kb/workdrive/migrations/microsoft/articles/migrate-from-onedrive-to-zoho-workdrive#Whats_migrated would this cover a Sharepoint migration meaning I can move a whole Sharepoint (team) folder

    • Zoho Sign / Prefill By You - Editable by Them!

      Zoho Sign seems to have two field options available - an empty field for signer(s) to complete or a field that has been prefilled by you, that becomes read only once sent.  What I would like is an option on the pre-filled by you fields, to leave them

    • Kiosk Studio wrap-up | How our community used kiosks in 2024

      Hello, everyone! Happy new year! The end of 2024 has been busy, and 2025 promises to be bigger and better. As we ring in the new year, let's rewind and look at Kiosk Studio, our no-code customization tool. The past 300 days have seen the CRM community

    • Zoho Crm - Inventory Integration

      Hello, I need help about Map Fields between CRM and Inventory. For Example, I can't match amount of stock between these 2. I can put opening stock number  in Inventory but I can't see it on CRM. Also I want to see categories and parent categories on Inventory, in CRM too. Best Regards.

    • Inventory Valuation Method Feature

      Zoho added another feature so called Inventory Valuation Method of each Item. This is actually good to see and it will benefit us so much but I have a question on this. For Existing Items that already have transactions, Zoho made it a default and assumed

    • Where is the customization and extendibility of zoho inventory?

      After delving into zoho one subscription to test out systems we need for our business, I'm really disappointed after working in Zoho Inventory. Its features and customizability are extremely lacking compared to the other tools like CRM. In our case we

    • Organization Variables - Restrict Access

      Currently, there is no way to restrict the access to organization variables. This leads to a problem when storing API related values that should be kept secret as anyone with access to create and edit email templates, workflow rules, or inventory templates

    • Zoho takes too long to load...

      I am based in Europe and in the last couple of weeks, Zoho CRM takes minutes even to load modules. Is there a specific reason this is happening? Is this happening to other people?

    • Modules are continuously loading

      Hi! We are not able to open the task modules, it keeps continuously loading

    • Execution failure when fetching a Name field from another app

      In creator I have one app [Employee Directory] with a form [Employees]. One of the fields is a name field called [Name]. Here is a sample that works, if executed from the Employees app: test_Employee = Employees[Name.first_name == "Alex"]; info test_Employee.Name;

    • Accessing Subform Data using getRecordByID

      I am getting data from Zoho Creator using deluge zoho.creator.getRecordByID task, from another application. The report contains a subform, and that subform is in the detail view of the report. I do not appear to have any subform data in the JSON response,

    • Allow customer to select meeting duration

      I would love to see a feature where I can give the customer the option to select the meeting duration they require based on a dropdown list which I have predefined in the service settings. For example: 15, 30, 45, 60, 90 minutes.

    • Can you internally tag/categorize posts for campaigns?

      Would love to easily sort through posts by tags or categories (i.e. we have multiple memberships and share studies from each. It would be nice to pull reports in a second for "membership A studies" for a campaign etc.).

    • Function 56: Automatically enable the option for customers to pay via bank account

      Hello everyone and welcome back to our series! One of the key features of Zoho Books is its integration with multiple payment gateways, allowing you to receive online payments for your invoices. This ensures faster payments, automates payment tracking

    • Connect multiple Facebook ad accounts to Zoho Social

      Hi there. I'm doing the Facebook Ads and Zoho Social integration to automate the leads that come from Potential Customer campaigns on Facebook to Zoho CRM. I have a company (1 fanpage, 1 brand), but within the business or brand on Facebook, I manage several

    • Custom service report or Zoho forms integration

      Hello, So far the experience with Zoho FSM and the integration with Books has been good, however there are limitations with service reports. As with my business, many organisations send technicians to different types of jobs that call for a different

    • Assign task owner using Deluge

      Use Case: Each task is a document development task wherein once the developer has completed the first draft, the next step in the process is for the document to be QA-ed by the project's assigned auditor. Thus, I am currently working out a blueprint where

    • Meta and Facebook data report discrepancy

      I have been currently gathering manually facebook follower data thru meta. In zoho marketing plus the social media reporting only allows for page likes, and so there is a discrepancy with the data. please the difference in files attached. Is there way

    • Links in Instagram

      Hi there, I have been using Later for a while now but keen to come back to Zoho Social as Later doesn't offer tagging of pages on Facebook but they offer something Zoho doesn't. You can add a link to your bio which opens up your profile feed where images

    • If I turn off the Task Prefix & ID in the Portal Configuration section, will it remove the dependencies in my projects?

      Hi all, basically the title, I am new to zoho projects and trying to get my head around some basic principles. Unfortunately I have not found this information via the search option and after deleting yesterday some Phases I had created in the Phases tab,

    • Enter dates in tasks with just "tue" or "+10" or "5d" ???

      Is there any way to enter due dates in tasks without typing the whole date or making time consuming clicks in the calendar? I don't see anything online in the help or third party videos.

    • Multiple time zones in zoho projects

      We are working in an international team. We need to set up different time zones in the organizational settings or at least for one project within zoho projects. Any ideas or help? Thx in advance

    • Zoho Desk : Field for 'Layout'

      I have many different layouts on my helpdesks and I want to be able to identify the stats for each one, however I can not find the field in the raw data from the Zoho Desk datasource. I thought it might be in the "Tickets" table but there is nothing.

    • Customize Zoho One Dashboard and URL?

      Hi everyone, Is there a way to customize my Zoho One URL to be different from the default portal URL? The current portal URL is: one.zoho.com/zohoone/[organization] I want to map it to its own standalone domain that we own. eg) domain.com instead of one.zoho.com/zohoone/[organization]

    • JOB Sheet can not send PDF as service rapports and more info needed other topic

      Goedendag, - Jullie hebben nu job sheet erin gedaan en dar is echt super goed, enkel kunnen we de werkbon ( JOB sheet) nu niet verzenden als PDF als een service rapport naar onze hoofdaannemer hoe we dat nu doen als bewijs van de levering van het werk

    • Tax Deduction at Source (TDS)

      I issued a sale invoice outside UAE , the customer apply TDS on the invoice , i checked my Zoho ( professional version ) i couldn't find the option of Enable TDS to let it appear while posting the incoming payment , please how to make it and how to configure

    • UNAPPROVED record management

      When the unapproved list of duplicates is long, one needs the some tools to manage them - when this list has over 1500 records, we cannot manage it without some tools, such as: 1. The ability to apply a filter - ie similar to creating a CREATE a NEW VIEW

    • Zoho mail filter Add to WorkDrive doesnt't work

      Hello, We have a problem with using the filter in the email. So, we want that when a bulk payment confirmation from the online store arrives, this email is automatically saved in HTML format on the drive using the action 'Add to Zoho WorkDrive -> Email

    • Introducing Zia GenAI: Zoho's Native Generative AI for Zoho Desk

      Hello everyone, Zia GenAI is available on Early Access for Zoho Desk Enterprise subscribers. Kindly fill out this Registration Form to request early access. We are excited to announce the Beta release of Zia GenAI in Zoho Desk, now available through our

    • Add blueprint buttons to listview and kanban

      Hello, just started to use the Blueprints feature - really useful. I have one suggestion to help this work even better - can there be transition buttons that appear on the top of listview & Kanban? Maybe an option as well - "Blueprint transitions appear

    • Deleted message in SPAM

      In one of my gmail accounts (getnickifit@gmail.com) I had an email from PayPal in the SPAM folder. I thought I was moving the message to the inbox from the zoho mobile but it looks like it was deleted. It is no where to be found--inbox, trash, etc. Can it be restored?

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • Multiple Facebook Pages under Single Brand

      Hi everyone, I'd like to know if there is a possibility of connecting multiple Facebook pages under a single brand on Zoho? At the moment, there are different Facebook pages of a single brand and would want to keep under the same brand on Zoho as we

    • Next Page