Building extensions #7: Create custom widgets for a simplified end-user experience

Building extensions #7: Create custom widgets for a simplified end-user experience

Discover the benefits of using widgets!

We explored the significance of widgets, prerequisites, and the availability of JS SDK methods as part of our previous post. In this post, let's go over a detailed example of using widgets along with certain Zoho Projects JS SDK methods.

Use case: A developer is working on a Zoho Projects task and wants to know if there are any existing references that could be used to get a head start on their work.

Goal: Our goal here is to simplify the developer's job by presenting them with articles that are relevant to the task at hand.

Solution: Widgets! To achieve this goal, it would be ideal for the developer to have access to relevant Zoho Desk articles from a tab on the Task Details page. This can be accomplished by developing a custom widget.

Required components:
  1. A connection between Zoho Projects and Zoho Desk.
  2. An extension configuration process that includes:
A. Creating an extension
B. Configuring the plugin manifest
C. Setting up the widget code to display the Zoho Desk articles on the Zoho Projects Task Details tab
We have already explored the steps to establish a connection, create an extension, and configure the plugin-manifest.json file as part of our earlier posts. You can refer to those resources for detailed guidance. In this case, we have already completed most of these steps (screenshots below).

1. Connection

We have created a connection to establish a secure integration between Zoho Projects and Zoho Desk.



2. Extension Configuration
A. Extension creation: We have created a new extension for Zoho Projects.



B. Plugin-manifest.json configuration: Once the extension is created, we next configure the plugin-manifest.json file to include the created connection and a widget.
For our extension use case, the plugin-manifest.json file is configured as shown in the below screenshot.



C. Setting up the widget code:
Now that we have the connection established, the extension created, and the plugin-manifest.json configured, let's go ahead and set up the custom widget code to achieve our goal.

Index.html - Widget code

<!DOCTYPE html>
<html>
<head>
<title>App Default Screen</title>
<style>
div.a {
line-height: 200%;
}
</style>
</head>
<body>
<div class="a">
<ul id="demo" style="font-size:20px"> <b>Article Details</b></ul>
</div>
</body>
<script>
var subject = "";
Util = {};
zohoprojects.init().then(function() {
//Fetching the task subject using the Zoho Projects JS SDK method
zohoprojects.get("task.name").then(function(response) {
subject = response.data;
var articledetails = {
type: "GET",
headers: {
"orgId": "xxxxxxx",
"Content-Type": "application/json"
}
};
//Using the request JS SDK method to invoke and get the Desk articles matching the task subject 
using the connection
zohoprojects.request(url, articledetails, "zohodeskforlistingarticles").then(function(response) {
var list = document.getElementById('demo');
var a = document.createElement("a");
var result = response.result;
var data = result.data;
//Looping through the articles
for (i = 0; i < data.length; i++) {
var title = data[i].title;
var author = data[i].author;
var authorname = author.name;
var weburl = data[i].webUrl;
var entry = document.createElement('li');
entry.innerHTML = title.link(weburl) + " by " + authorname;
list.appendChild(entry);
}
});
});
});
</script>
</html>
  • Here, we utilized the Zoho Projects JS SDK method to extract the task name, which is the task subject.
  • We then used the Zoho Projects Request method to invoke the Zoho Desk API to search for articles.
  • The Request method is used to make requests to third-party applications. It must be invoked with the belowparameters:
  • Third-party API URL: This is the URL of the third-party application's API that needs to be invoked. In our case, we need to fetch articles from Zoho Desk based on a search value, so we used the Zoho Desk Articles Search API. We've included a search query parameter in the API as the title of the help article (wildcard search), and we've set the value of the search query parameter (title) as the task's subject. As a result, the API will look for any Zoho Desk help articles that satisfy a wildcard match with the task subject.
  • Data object: Depending on the type of action being performed, each API requires a method type, body, header, and/or parameters to be invoked. To invoke the third-party application API, a data object with the necessary API details must be created. In our scenario, a header providing the Zoho Desk org ID is required to call the Zoho Desk article search API, which we have hardcoded.
  • Connection: To work on the data of a third-party application safely, we would need to connect to that application. The link name of the connection created for the third-party application is the value of the connection parameter. This value will be available in the JSON code generated when the third-party application connection is established. This connection allows you to invoke the Zoho Desk API securely.
  • Once the API is invoked by providing the necessary parameters for the Request method, the response for the invoked Zoho Desk search articles API is returned. We extract the information we require from the response, like the title, author name, and web URL. We then list and display this data in the Zoho Projects task details widget, Related Articles.
Sample output
  • Access your Zoho Projects portal and enter into a task.

  • Choose the Related Articles task tab, which is the widget we created.

  • The widget displays the available Zoho Desk articles that are related to the task at hand.

  • Finally, click on an article to view its detailed information in Zoho Desk.


Using this method, developers working on Zoho Projects tasks can discover relevant articles and get helpful information to troubleshoot problems.

You can further enhance this use case by including a text box in the widget that allows the developer to enter a keyword and search for related articles using the Zoho Desk search articles API.

You can also accomplish use cases such as creating a task tab widget to associate data with a task. Every time the task loads, task-specific data can be displayed on the Task tab. To accomplish these kind of use cases, the data storage feature is available in Zoho Projects. We look forward to exploring the data storage feature,, and other use cases for custom widgets, in future posts.

We hope you found this information useful. Follow this space for further updates!

Sign up for a Zoho Developer account and start developing extensions for Zoho products using Sigma.

SEE ALSO


Next>>

      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

                                  • Widget Height were destroyed

                                    All widget heights in the Details Canvas view are broken.

                                  • Introducing Zoho POS for Restaurants

                                    Hello Community, We’re thrilled to announce the launch of Zoho POS for Restaurants, unveiled at the 30th milestone edition of Zoholics India 2026. Running a restaurant involves multiple teams and workflows. A single table journey, from seating a guest

                                  • WhatsApp Business Message Pricing Update: Effective October 1, 2026

                                    Hi everyone, Starting October 1, 2026, Meta is updating how WhatsApp Business messages are charged. This guide explains the new per-message pricing model, how message categories work, and what changes for service messages specifically. How Meta charges

                                  • Task Module quick create settings

                                    Hello, requesting the Task module receive a quick create customization settings. We have added custom fields and have to select "More fields" at the bottom of the pop-up to access the custom fields.

                                  • Zoho Calendar integration for Bigin

                                    Hello everyone, We're excited to introduce Zoho Calendar's integration in Bigin! For a while now, users have been able to sync events in Bigin with Google Calendar and Outlook Calendar - but with this new topping, it syncs with Zoho Calendar as well.

                                  • Does Updating Employee Names and Profile Pictures in Zoho One Automatically Sync Across All Zoho Applications?

                                    Hi Zoho Team, We are currently using Zoho One in our organization and want to centrally manage employee profile information. As a Zoho One Super Admin, if I update the employee name and profile picture for all users from the Zoho One Admin Panel, will

                                  • Enhanced shared mailboxes: Dedicated Sent folders, Run-through filters & fresh UI

                                    Hi everyone, Collaborative communication is the backbone of smooth operations; whether you are handling customer support queries, managing vendor requests, or tracking sales leads. Shared mailboxes in Zoho Mail ensure your team stays on the same page

                                  • How to Manage Two GST Numbers / Two Companies in a Single Zoho Inventory Organization?

                                    Hi Team, We currently have two separate legal entities: A Proprietorship Firm with its own GSTIN A Private Limited Company with a different GSTIN However, operationally, both companies deal with the same products, and we would like to manage the physical

                                  • 10/22 15時〜 オンラインもくもく会のお知らせ | Zoho ワークアウト

                                    ユーザーの皆さま、こんにちは。コミュニティグループの中野です。 10月22日（木）開催の「Zoho ワークアウト」をご案内します。 Zoho ワークアウトは、参加者それぞれが取り組みたいテーマを持ち寄り、ユーザー同士で交流しながら、 設定・検証・運用改善を進めるオンラインの「もくもく会」です。 「試してみたい設定があるけれど、なかなか時間を取れない」 「一人で進めていると、途中で手が止まってしまう」 「他のユーザーの活用方法や工夫を聞いてみたい」 そんな方は、Zoho ワークアウトで一緒に取り組んでみませんか？

                                  • Convert MBOX to PST File Using Free Methods

                                    MBOX is a mailbox format that is used by various email clients and services, such as Thunderbird, Apple Mail, Eudora, and Google Takeout. Yet, in order to be able to open your MBOX emails in Microsoft Outlook, you have to convert them from MBOX to PST

                                  • Reporting tags associated to Project in Zoho books?

                                    Hi, I know you can add reporting tags to contact, articles and transactions. Is it possible to add reporting tags to Project. We Zoho reports I would be able to generate reports by tags. Sometimes tags for a contact is different for projects (ie Projects

                                  • Reporting Tags in Profit and Loss Reports Analysis

                                    Hello Community and Zoho Books Product Team, I would like to highlight a limitation I encountered with Reporting Tags in Zoho Books. Reporting Tags Not Applying to Automated Inventory Journal Postings from Product Invoices. For inventory product invoices,

                                  • Email Blast

                                    Hi, How do we send an email blast to thousands of customers? The email addresses are not yet saved in Zoho Desk.

                                  • Spam Quarantine: Manage suspicious emails in Zoho Mail

                                    When an email is quarantined by spam processing, it need not always be blocked right away. Some emails may be marked incorrectly, or may need to be reviewed before a final decision is made. The Spam Quarantine feature in the Zoho Mail Admin Console gives

                                  • What is the difference between "Reply" and "Public Comment" in a ticket?

                                    Hey, my company is thinking about switching to Zoho Desk but we do not understand the difference between the "Reply" and the "Public Comment" feature. When should we use which? And why? What is the difference between them? Thank you for your help! Kindest

                                  • Comments Vs. Replies

                                    I'm curious as to the difference between a "Reply" and a "Comment" on a ticket. It appears that "Replies" are what's used to determine response time SLA's and there are also used to automatically re-open tickets. I'm just trying to understand the key differences so I can educate both our clientele and our back-end users on which function/feature to use to better improve the ticket lifecycle. If anyone has any insight it would be appreciated. Thanks!

                                  • CRM Address Field - States with Countries in brackets

                                    Hi, Could you please remove the country in brackets from the Global State List, or at least allow us to edit these entries? It looks like the brackets were added during the initial data population, perhaps by someone building the list in a spreadsheet

                                  • What's New in Zoho Inventory | July & August 2026

                                    Hello users, The July and August 2026 releases bring a range of new features and improvements across the product. From the Nigeria Edition and Super Admin enhancements to Sri Lanka IRD-compliant invoicing, Loyalty Program Management, and improvements

                                  • Forms data export bug

                                    The export csv with a password has changed for the worst. It is less secure by not allowing complex passwords. Just last week and the last year (at least) I was able to use a complex, secure password. Export CSV moreover doesn't even work if I use a simple

                                  • Fax and email questions

                                    Does Zoho offer faxing capability? If so, how to do it? And, why is has my email inbox stopped in 2019? There are no more emails since then. Also if I delete all of those emails, will they delete it from my gmail account (I'm linked to a gmail email address).

                                  • Create a single record from multiple images with ICR

                                    Hello all, Zia's Intelligent Character Recognition can now create a single record from multiple images based on the configured ICR rule. Users can upload up to three images at once, such as an ID, a passport, and a business card, and Zia will extract

                                  • How to present an Analytic on a CRM dashboard and filter it on loginuser id

                                    How to present an Analytic on a CRM dashboard and filter it on loginuser id? I want to display an Analytics pivot table (as a widget) on a CRM dashboard and have the pivot filtered on the loginuser. I want additional user-filters available, such as date,

                                  • CNIL - Suivi de Pixel

                                    Bonjour à tous, À la suite de la nouvelle recommandation de la CNIL sur les pixels de suivi dans les e-mails, savez-vous si Zoho Campaigns permet : de conditionner le suivi des ouvertures au consentement de chaque contact ; de proposer un lien permettant

                                  • Live connection to DS files in Zoho Creator / ChatGPT

                                    As an idea, we are using ChatGPT to build with Zoho Creator (outside of Zia), which is works brilliantly to assist write deluge, provide test suggesitons etc. Currently we are uploading the DS files which are very point in time, it would be great to have

                                  • Setting default From address when replying to request

                                    At the moment, if I want to reply to a request, the From field has three options, company@zohosupport.com, support@company.zohosupport.com, and support@company.com. The first two are really internal address that should never be seen by the customer and

                                  • Zoho Payroll: Product Updates - Q3, FY2026

                                    Over the past quarter, Zoho Payroll has added several updates to make payroll easier to process, configure, and manage. The most notable improvements cover bank integrations, reimbursement support, payslip enhancements, employee exit documentation, payroll

                                  • Convert OLM to PST on Mac and Windows Using Free Methods

                                    When your Outlook for Mac data is stored in an OLM file and you want to use it with Outlook for Windows, the simplest approach to transfer your emails and other mailbox information is to convert the OLM file to a PST file. OLM is primarily associated

                                  • Add Payment Information (like Bank details)

                                    I am using the Free plan of Zoho Books. I need to add the bank details/ UPI details on the invoice. How can I do that. I have added the details in the Bank Section.

                                  • Placeholders for Multi-Level Discount

                                    I am using custom templates for Invoices and all other modules. Since i have activated multi-level discount (an early-access feature from zoho) "discount at line-item and transaction level", I need placeholders for using them in my custom templates. With

                                  • Running Balance

                                    Please add automatically Running balance in ledger view. Taking lot of time, every time to add manually

                                  • Accounting on the Go Series-47: Effortless GSTIN Management- Auto Populate TaxPayer Details in Zoho Books Mobile App

                                    Hello everyone, Welcome back! Today, we're focusing on a feature specifically designed for our Indian users in the Zoho Books-Indian edition, particularly those who deal with GST compliance regularly. We understand the importance of accurate and efficient

                                  • URGENT: Stalled DC Migration >72 Hours - Records Locked [Ticket #: 167813877

                                    The DC migration was started on 1st October at 6 pm and we were informed migration period as 48 hours but even after more than 72 hours, the migration seems still in progress. We sent two emails to check the status but no responses. We need the migration

                                  • Zoho Webinar - Sharing System Audio (NOT AVAILABLE)

                                    Hi, We are having a serious problem with Zoho Webinar. In the webinars we run, we very often share the audio from a video we are streaming directly from YouTube or other applications. Until recently we were using Zoom, but as we use other Zoho applications

                                  • Cash Recipt

                                    You can not receive cash more than 10000 from one party in a day and two lakh in a year. In statement you can't differentiate cash or bank receipt. zoho does not support this

                                  • Need to set workflow or journey wait time (time delay) in minutes, not hours

                                    Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integer

                                  • Concern Regarding Stock Validation in Inventory Management

                                    Hi Zoho Team, We would like to highlight a concern regarding stock validation in the inventory system. As per standard inventory management practices, if the stock level is zero, the system should not allow users to create a shipment, packing slip, or

                                  • Change from OST to PST on Windows 10/11 Using Free Method

                                    There is an advantage in converting OST files to PST format if you need to access your Outlook data on a different computer, want to keep a local copy, or are trying to recover items from an old Outlook profile. The good point is that users of Windows

                                  • Meet PageHealth by Zoho PageSense: a free way to find out what's holding your page back

                                    We all know the feeling. You've spent days tweaking headlines, moving buttons, and rewriting copy, and you're still not sure why visitors aren't sticking around. Revamping your website is hard, and figuring out what's actually getting in the way is even

                                  • Important: Whitelist new proxy outgoing IPs for IN, SA, and UAE data centers

                                    Hello everyone, We're expanding the pool of proxy outgoing IP addresses for our IN, SA, and UAE data centers by introducing new IPs alongside the existing ones. This helps ensure high availability, optimal load distribution, and redundancy for outgoing

                                  • Zoho Flow Custom Function Issue

                                    I have a use case where I will be needing to post data to a wordpress site. Specifically to a custom post type with a bunch of ACF fields. I have setup trigger event correctly for Tookan and can receive data from the webhook. In order to post the data

                                  • Next Page