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




      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ




                                ご検討中の方

                                  • Recent Topics

                                  • Option in pipeline deal to select which hotel or branch or store if client has more than one local store

                                    Hi, I would like to know if there is an option in the deal pipeline to select which hotel, branch, or store a deal is related to—if the company has more than one location. For example, I have a client that owns several hotels under the same company, and
                                  • Undo article like/dislike

                                    It seems to be not possible to undo your like/dislike for an article. Would be great if you can. Kind regards, Helen
                                  • Nested notebooks

                                    Dear Sir/Madam, I would like to know if it is possible to nest notebooks. It would be very helpful when there are too many, as it would improve organization. Thank you for your response. Best regards.
                                  • Tax in Quote

                                    Each row item in a quote has a tax value. At the total numbers at the bottom, there is also a Tax entry. If you select tax in both of the (line item, and the total), the tax doubles. My assumption is that the Tax total should be totalling the tax from
                                  • Dynamically Fetching Lookup Field Display Value

                                    I have an audit trail form, Audit_Changes, that tracks old vs new values across different forms. For lookup fields, the old/new value is the ID, but I also need the display value. What's a best practice for dynamically fetching the display value of the
                                  • Stop Scrolling, Start Asking: Meet Zia for Your Files

                                    Hey everyone 👋 The era of 'scrolling and searching' is officially over. Whether it's a dense legal contract or a long meeting recording, searching for specific details is a massive time-sink. We think you should be able to interact with your files, not
                                  • How to create a new Batch and update Stock via Inventory?

                                    Hi everyone, We are building an automation where a user enters batch details (Batch Number, Mfg Date, Expiry, and Quantity) into a Custom Module. I need this to trigger an API call to Zoho Inventory to: Create the new batch for the item. Increase the
                                  • How do I open MSG files in Microsoft Word?

                                    If you want to open MSG files in Microsoft Word is not natively supported, as MSG is an email file format created by Microsoft Outlook. However, there are professional approaches to access MSG content in Word. First, open the MSG file in Outlook and copy
                                  • Unable to charge GST on shipping/packing & Forwarding charges in INDIA

                                    Currently, tax rates only apply to items. It does not apply tax to any shipping or packing & forwarding charges that may be on the order as well. However, these charges are taxable under GST in India. Please add the ability to apply tax to these charges.
                                  • How to add packing & forwarding charge in purchase order & quotation???

                                    Hello Zoho Team I have just started using Zoho for my company and I wanted to make purchase order. My supplier charges fix 2% as packing & forwarding on Total amount of material and then they charge me tax. For example, Material 1 = 100 Rs Material 2
                                  • How to create a boxplot chart in Zoho Analytics?

                                    Hi, I'm looking forward to making a boxplot in Zoho Analytics, either with all my data or with a time segmentation. No documentation or YouTube video explaining that was found. I guess this is a feature gap. How feasible would it be to add this to Analytics?
                                  • What are the create bill API line item requiered fields

                                    While the following documentation says that the line items array is requiered it doesn't say what if any files are requiered in the array. Does anyone know? API documentation: https://www.zoho.com/inventory/api/v1/bills/#create-a-bill I'm trying to add
                                  • WorkDrive issues with Windows Explorer Not Responding

                                    We are using WorkDrive to collaborate on editing video content. We have a lot of files and quite a few are a few gigs. Recently anytime I try and work with the files Explorer freezes for a couple minutes whether it's dragging the files into Premiere or
                                  • Connecting Zoho Inventory to ShipStation

                                    we are looking for someone to help connect via API shipStation with Zoho inventory. Any ideas? Thanks. Uri
                                  • Where is the settings option in zoho writer?

                                    hi, my zoho writer on windows has menu fonts too large. where do i find the settings to change this option? my screen resolution is correct and other apps/softwares in windows have no issues. regards
                                  • Using IMAP configuration for shared email inboxes

                                    Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure
                                  • When Does WorkDrive integrate with Books?

                                    When Does WorkDrive integrate with Books?
                                  • POP mailbox limits

                                    If I am accessing a remote POP mail server using Zoho Mail is there a mailbox quota for the account or is it all related to my mail account storage limits?
                                  • Warranty Service and Repair in Zoho FSM

                                    Hi There, We are a retail store that sells products and also performs installations and repairs. Our field technicians handle this work. Some repairs are covered by manufacturers, who reimburse us for both parts and labour. In these cases, we perform
                                  • Zoho Sheet for Desktop

                                    Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?
                                  • WhatsApp phone number migration

                                    Hi @Gowri V and @Pheranda Nongpiur, Thanks for implementing the promised enhancements to the integration between Zoho CRM and WhatsApp. The previous discussion has been locked, so I'm opening this new one. I am copying below a specific
                                  • WebDAV support

                                    I need WebDAV support so that I can upload/download (and modify) documents from my local file system. Is anything planned in his direction?
                                  • SPF: HELO does not publish an SPF Record

                                    I am using Zoho mail. Completed all of the required prerequisites from the dashboard to avoid any issues with mail delivery. But when checking on mail-tester.com getting the following error. Can anyone help me solve this?
                                  • How do I create an update to the Cost Price from landed costs?

                                    Hi fellow Zoho Inventory battlers, I am new to Zoho inventory and was completely baffled to find that the cost price of products does not update when a new purchase order is received. The cost price is just made up numbers I start with when the product
                                  • Price Managment

                                    I have been in discussions with Zoho for some time and not getting what I need. Maybe someone can help explain the logic behind this for me as I fail to understand. When creating an item, you input a sales rate and purchase rate. These rates are just
                                  • Regarding the integration of Apollo.io with Zoho crm.

                                    I have been seeing for the last 3 months that your Apollo.io beta version is available in Zoho Flow, and this application has not gone live yet. We requested this 2 months ago, but you guys said that 'we are working on it,' and when we search on Google
                                  • Actual vs Minimum

                                    Hi all, I am sure I am not the only one having this need. We are implementing billing on a 30-minute increment, with a minimum of 30 minutes per ticket. My question is, is there a way to create a formula or function to track both the minimum bill vs the
                                  • Generate leads from instagram

                                    hello i have question. If connect instagram using zoho social, it is possible to get lead from instagram? example if someone send me direct message or comment on my post and then they generate to lead
                                  • Kaizen #234 - Automating Deal Handoff with Zia Assistant API, Workflow, Deluge, and Widget in Zoho CRM

                                    Hello all! Welcome back to a fresh Kaizen week. In this post, we will explore how to automate the deal handoff process in Zoho CRM using Zia Assistant API + Workflow + Deluge + Widgets. Here’s how the final output looks when a deal is reassigned 1. Deal
                                  • How do you print a refund check to customer?

                                    Maybe this is a dumb question, but how does anyone print a refund check to a customer? We cant find anywhere to either just print a check and pick a customer, or where to do so from a credit note.
                                  • Ability to assign Invoice Ownership through Deluge in FSM

                                    Hi, As part of our process, when a service appointment is completed, we automated the creation of the invoice based on a specific business logic using Deluge. When we do that, the "Owner" of the invoice in Zoho FSM is defaulted to the SuperAdmin. This
                                  • Enhancement to ICR’s field prompting: Preferred data extraction using advanced field prompting

                                    Dear Customers, We hope you’re well A quick background Intelligent Character Recognition (ICR) comes as part of Zia’s optical recognition capability called Zia Vision. When we introduced it last April, the data extraction was training-based and was applicable
                                  • See a list of all records enrolled in a cadence?

                                    I am looking for a way to see a list of all leads or contact currently enrolled in a cadence. I do not see any way to do this through the cadence UI.
                                  • Limitation in chart of accounts

                                    There is a limitation of 4000 accounts in chart of accounts  Zoho needs to remove this limit
                                  • How do I change the account bank charges are charged to?

                                    I want bank charges charged to my Credit Card Fees account. Is there a way to do this?
                                  • Real signature in Zoho Expense PDF report ?

                                    Hello ! Is there a way to put a real signature on the signature line when a PDF report is generated in Zoho Expense? Through Zoho Sign or another way? Can't seem to make it work.
                                  • Copy paste settings

                                    Hello all i have 2 organizations running in ZOHO books in one organization i have customised Tax rates, codes and customized templates instead of manually doing again in org 2 can i have some shortcut to copy paste or export and import??
                                  • Custom TDS on Vendor Credits via API

                                    Hi, We are using Zoho Books APIs for posting Bills and vendor credits. We are unable to post custom TDS amount posting vendor credits. Can you please share the API spec and Payload that need to be sent for Custom TDS for Vendor Credits.
                                  • "Unlink" Advance from Bill without Deleting the Payment Record

                                    I am writing to highlight a significant workflow issue in Zoho Books (India Edition) regarding Vendor Advances and Bills. The Scenario: I recorded an Advance Payment to a vendor. I matched/reconciled this payment in the Banking module. I received a Bill
                                  • Advance Payment Record Removed When Deleting Applied Credit from Bill

                                    Hello, So while working with vendor advance payments, I noticed that removing the applied credit from a bill also removes the corresponding entry from the Payments Made section. What I did : Recorded an advance payment to a vendor through Payments Made.
                                  • Next Page