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



        • Recent Topics

        • Using assigned value from a dropdown list to populate a field

          Hello, I use a dropdown with a global list that has assigned values. The value is a name, the assigned value is the corresponding email. When selecting my name from the drop down, I want the "Save for later" template to use the assigned email as recipient.

        • Inventory Barcode Creation - Add Picture of Item

          Hi I am trying to set up bar code labels and include a picture of the item on the label - any idea on how to add that field to the barcode generator?

        • Form in ticket reply

          Good day, I know I can use Snip to reply, but is there a way to create a web form to request specific additional information for a ticket? e.g., When a ticket is resolved for a telephone or printer issue, is there a way to reply via a web form to request

        • SalesIQ operators do not receive any messages or see any chat from customers if the customers do not answer the form field questions in Flow Controls.

          Hi Zoho SalesIQ Team, I am reaching out to report a issue regarding the Brands > Flow Controls When a customer continues typing messages without answering the form field questions, operators do not receive any of the customer’s messages in SalesIQ. (before

        • 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

        • Zoho Inventory Feature Roadmap Visible To All

          Hello, please consider making your feature roadmap visible to us users so that we know what to expect in future. This may appease current users who are seeking clarification on feature implementation dates, so that they can make an informed decision whether

        • Cannot Access Subform Display Order in Deluge

          As highlighted in this community post, we still have to deal with the significant limitation of not being able to access the user-sorted order of subform rows through Deluge. This creates a major disconnect between the UI capabilities and backend automation,

        • Delete Tags - Maximum for Module

          Hello, I have just received the message that I have reached the maximum tags for a module. We'd like to consolidate tags so some deletion is required. Can you please advise how we can do this? Thanks / Stephanie

        • I need targets and actuals achieved data to be visible in zoho. It might be calls revenue emails or whatever how do i make it visible in analytics?

          I need targets and actuals achieved data to be visible in zoho. It might be calls revenue emails or whatever how do i make it visible in analytics?

        • Reporting phishing emails to Zoho?

          I came across a few threads after searching for info about reporting phishing emails to Zoho. From what I read, it appears that Zoho doesn't want to hear about phishing. You suggest marking such messages as Spam. Phishing and spam are separate issues, and I believe that phishing is the more dangerous. A user who is not paying close attention is in danger of giving away important data - usernames, passwords, email addresses, SSNs, etc. - to people who are happy to misuse such data and victimize email

        • 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

        • Deploy or update Zoho CRM custom functions via curl

          How can I deploy/modify/update my custom deluge functions using curl? Can't find related API endpoints in CRM documentation Provide me with examples I need it for making autodeploy process from git repo Thank you

        • SEO recommendation of H1 tag for website tittle

          The exact words are “ It is good practice to place the page title inside the H1tag.” Now I already have one H1 tag on my website but it is not website tittle. In the SEO recommendation that is clear too that I have h1 tag on my page. Now I don’t know

        • Store WorkDrive Recordings Locally Until Upload Completes

          Hi, Hope you are doing well. We would like to submit a feature request regarding the video recording functionality in Zoho WorkDrive. Currently, when a user records a video through WorkDrive and the upload process fails or gets stuck, the recording may

        • Functional URLs and Environments

          I am developing my creator application with my application in an environment. I have a Page that has two buttons and an embedded section. When I first developed this page, each of the buttons had functional URLs to export the page as a PDF and one to

        • Zoho Analytics Filter Bug

          I encountered a bug where typing the letter "A" in the drop-down filter of a table or query table causes the drop-down to close unexpectedly. For example, when typing "Today", the drop-down list closes as soon as "a" is entered. I tested this on another

        • Zoho CRM to Google Calendar time synchronization

          Hello Enterprise Support Community, Our developers have identified an ongoing issue with the Zoho CRM and Google Meeting sync. Currently, there is a delay in syncing meetings/events between the two applications. Additionally, when a meeting is created

        • Allow Zia Agents using Zoho One Account

          When I went to try Zia Agents, it forced the creation of a new, separate account. This seems counter-intuitive to me. I don't want to manage a separate account. Plus, aren't Zoho One users the ones most likely to adopt Zia Agents most quickly? It seems

        • Zoho Flow needs a comprehensive public API — the foundation for agentic flow building, self-healing flows, and MCP

          Zoho is going all-in on agentic AI: Zia LLM, 25+ prebuilt Zia Agents, the no-code Zia Agent Studio, and an MCP server that opens up the action libraries of 15+ Zoho apps to any MCP client. That direction is exactly right. But there is a structural gap

        • The 3.1 biggest problems with Kiosk right now

          I can see a lot of promise in Kiosk, but it currently has limited functionality that makes it a bit of an ugly duckling. It's great at some things, but woeful at others, meaning people must rely on multiple tools within CRM for their business processes.

        • Does Zoho Learn integrate with Zoho Connect,People,Workdrive,Project,Desk?

          Can we propose Zoho LEarn as a centralised Knowledge Portal tool that can get synched with the other Zoho products and serve as a central Knowledge repository?

        • Zoho Desk : How to Filter Tickets by @Domain or Email Address

          Hi Zoho Desk Support Team, I would like to know how to filter tickets by a specific @domain or email address in Zoho Desk — not by Contact Name. For example, is it possible to search or create a view that shows all tickets from a particular domain (e.g.,

        • Zoho Desk: Quick Filter/Quick Search InputBox in Ticket View

          Hi Zoho Desk Developer Team, I would like to suggest adding a “Quick Filter” search box in the Ticket View page. It would be very helpful, We can search for it immediately by ticket title, email, sender name, or ticket ID directly from the view. This

        • Zoho Analytics UI Bug

          Hello, all, The Aggregate Formulas in Zoho Analytics' list of fields have a 3-dot menu: If the formula has a long name, the name is not fully visible in the list, and a 3-dot menu is not accessible from it: This is not convenient, especially when the

        • [Free Webinar] Learning Table Series June 2026 - Mobile-first field operations with Zoho Creator

          Hello everyone, We’re excited to announce the next session in Learning Table Series 2026, where we will continue with our purpose-driven approach—focusing on how Zoho Creator’s features help solve real-world business challenges. Each session in this series

        • How to handle email attachments >5MB from Zoho Mail to Zoho Creator via Zoho Flow?

          Hi Zoho Community, I'm building an email management system that automatically captures incoming emails from Zoho Mail into Zoho Creator records via Zoho Flow. Everything works fine except for one major blocker — email attachments larger than 5MB. Current

        • Facturation électronique 2026 - obligation dès le 1er septembre 2026

          Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,

        • Is there a way to add custom fields to Company Details?

          Hi Zoho community, I'd like to store a bunch of custom related values (eg registration date, paid up capital etc) in CRM. Please note I'm talking about my own company not clients. I dont want to pollute Account module with irrelevant fields since i want

        • Zoho Analytics "Esc" key problem

          I frequently use the Escape (Esc) key while building dashboards, reports, and writing SQL queries. Since the recent updates to Zoho Analytics, the Esc key no longer behaves as expected. When writing SQL queries, pressing Esc to dismiss a suggestion now

        • Spotlight Series #28: Power up your Mac presentations with Apple Intelligence

          Hello, Mac users! This month's spotlight is for you. Zoho Show's desktop app for Mac just got a whole lot smarter, and we think you're going to love what's inside. Apple Intelligence is now built directly into Zoho Show for Mac, not as a sidebar, not

        • Reach us through our official support channels

          Dear Customers, Thanks a lot for choosing Zoho! Our applications are built to help achieve your day-to-day business goals. We are committed to engaging with you, to understand and develop solutions that enhance your productivity. We are happy and ready

        • Zoho Desk / Assist Integration

          Good day, We use both Zoho Desk and Assit, and were wondering if there is a way to schedule a remote session from within Desk. I know Desk has the "Remote Assist" option, but even that is not the most user-friendly process. Or even if there is a way to

        • Can you sell Subscriptions using Zoho Commerce?

          In addition to physical products and the apparently coming soon 'Digital Products', it is possible to sell Subscriptions using Zoho Commerce?

        • 5 dashboards no Zoho Analytics que transformaram a gestão dos nossos clientes

          Nos últimos anos, implementamos o Zoho Analytics em empresas dos mais variados segmentos: varejo, saúde, jurídico, logística, SaaS. E uma coisa é certa: os CEOs que passam a ter dashboards em tempo real tomam decisões de uma forma completamente diferente.

        • #8 Your First Invoice for Real This Time

          Imagine standing at the edge of a journey you have carefully prepared for. Every setting configured, every detail arranged, every piece of your invoicing workflow thoughtfully put into place. What began as less than 30 minutes of setup has now transformed

        • Resolved (11:52am CDT): Uploading Files into Zoho CRM (US DC)

          Hello, Enterprise Support Community, We have begun receiving reports of issues with uploading files into Zoho CRM in our US DC, with file uploads failing during the upload process. Our teams are currently actively engaged in diagnosing and troubleshooting

        • Introducing the new Zoho Announcements Hub

          Hello, Enterprise Support Community! We are excited to announce a new way to keep up to date with recent product releases and announcements for the Zoho apps you use on a regular basis. Introducing our new centralized location to bring together all Zoho

        • GLM 5 not available

          Hello, I am trying to setup a Zia Agent using agents.zoho.com. The settings says that GLM5 is among the list of free zoho hosted models available. However, when I try to setup an agent and pick a model from the list only GLM 4.7 Flash is available. How

        • Zia Agent built in ChatKit UI does not render markdown

          Hi, You have a major shortcoming in the Zia Agent UI. The test UI that is embedded in agents.zoho.com allows you to test the agent has full support for rendering markdown, but your ChatKit UI does not have support for rendering markdown. If I embed it

        • Using gift vouchers

          We would like to be able to offer a limited number of gift vouchers, of varying values, to our customers, and are looking for the best way to do this. We have looked at Coupons and Gift Certificates, but neither seem to fit the bill perfectly. Coupons:

        • Next Page