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

      • Conditional Field Visibility in Bigin CRM

        I would like to request support for conditional field visibility within Bigin CRM. This feature should allow administrators to configure show/hide rules for fields based on predefined criteria (e.g., field values, picklist selections, stage changes,

      • Tag Adding Option in Kanban Card Customization Bigin CRM Mobile App

        I would like to request an option to add and display tags on Kanban cards in the Bigin CRM mobile app. This feature would make it easier to categorize deals and quickly identify priorities while working on the go.

      • WhatsApp Voice Message Sending Option in Bigin CRM

        I would like to request a feature that allows users to send WhatsApp voice messages directly from Bigin CRM. This would help improve communication efficiency and make it easier for teams to respond quickly to customer inquiries.

      • Introducing Zoho MCP for Bigin

        Hello Biginners! We're excited to introduce Zoho MCP for Bigin, a completely new way of interacting with Bigin data using AI. With Zoho MCP, you can securely connect your Bigin account with popular AI agents like Claude, Cursor, Windsurf, and VS Code,

      • Introducing the Zoho Projects Learning Space

        Every product has its learning curve, and sometimes having a guided path makes the learning experience smoother. With that goal, we introduce a dedicated learning space for Zoho Projects, a platform where you can explore lessons, learn at your own pace,

      • Ask the Experts 26: Brighten every customer interaction with Zoho Desk all year long

        Hello everyone, Greetings and welcome to Ask the Experts 26. As we wrap up 2025, we are excited to invite you to the 26th episode of our Ask the Expert series. 🎄The Merry Metrics Edition = Best of Zoho Desk [Best Practices + Holiday Automation + Year-End

      • MCP > Creator connection failing with Claude

        I'm trying to get claude to access any of my Zoho Creator apps and it keeps failing. I have enabled all tools for creator and ensured in claude settings that everything is authorised. Here is what claude says : Unfortunately, the error messages I'm receiving

      • Is it possible to sync data every 5–10 minutes in Zoho Analytics (CRM or Excel imports)?

        Hello Team, I want to know if Zoho Analytics supports near real-time syncing of data from different sources. My requirements: I am importing data from Zoho CRM → Zoho Analytics I also have some datasets maintained in Excel/CSV I want both data sources

      • Feature Request: Dynamic Dimension Control for zc_LoadIn Popups

        As detailed in this community discussion, Zoho Creator's zc_LoadIn parameter is a vital tool for opening components (forms, reports, or pages) in modal dialogs via HTML snippets, Notes, or Rich Text Fields. While powerful, this feature suffers from a

      • Subforms in stateless forms

        I think the title says it all. We need to be able to add subforms to stateless forms. Currently the only workaround is to create a Form and delete each record upon submission of the form. I need to build an interface to update our inventory. Basically

      • Text wrap column headers in reports?

        Is it possible to auto wrap column headers so that a longer multi-word header displays as two lines when the column is narrower than the width of the header title?

      • Converting Sales Order to Purchase Order

        Hi All, Firstly, this code works to convert a sales order(SO) to a purchase order (PO) via a button, however I am running into an issue when I convert the SO where the values from the line items are not pulled across from the SO to the PO. The ones in

      • What’s New in Zoho Inventory — Latest Features, Integrations & Updates | December 2025

        Zoho Inventory has evolved significantly over the past months, bringing you smarter, faster, and more connected tools to streamline your operations. Whether you’re managing multichannel sales, complex fulfillment workflows, or fast-moving stock, our newest

      • Marketer’s Space - Multi-Channel Campaigns for the Biggest Shopping Week with Zoho Marketing Automation

        Hello marketers, Welcome back to another post in Marketers Space! The biggest shopping week of the year is almost here, and it’s your moment to shine without the stress. With Black Friday and Cyber Monday just around the corner, being present across email,

      • Auto-Invite Users to Portals in Zoho CRM based on Conditions

        Hello Everyone, You can now automate portal invitations in Zoho CRM with the new Auto-Invite users feature in Portal management. No more manually enabling portal access one by one. With this enhancement, you can automatically send invites for users to

      • Pricing Strategies: #5 Stay local, Price & Sell Global

        Arun had always dreamed of taking his handmade craft business beyond his hometown. For years, he sold locally. Most of his customers are familiar faces, in our usual currency and with the exact expectations. But one day, a traveller visited his workshop

      • Best practice to structure reporting to include events covering multiple months / quarters.

        Hi, I'm new to Zoho, have some experience of more "enterprise" tools, looking for some input from the community. I'm looking to create a report that includes events that cover a long period, each event has a start / end date and I'm struggling undertanding

      • Incorrect Email Notifications for Product Reviews

        Dear Zoho Commerce Support Team, I am writing to report a technical issue that occurs frequently on our platform. Problem Description: We regularly receive email notifications informing us of new product reviews awaiting approval. However, when we access

      • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

        Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

      • FSM - Associating and selecting Contacts based on Service Addresses

        Hi FSM team, I've come across an FSM limitation I wanted to share for improvement. I'm currently configuring FSM for a client who provides heating system install and maintenance services. The are often sub contracted by building management companies to

      • What is the easiest way to move Hotmail emails to an IMAP server?

        The easiest way to move Hotmail (Outlook.com) emails to an IMAP server is to add your Hotmail account directly to any email client that supports IMAP, then copy the messages across. This avoids paid tools and keeps the process simple. Fastest free method:

      • No feedback from Zoho Books regarding Yodlee feeds for Investec

        I reported on 6 Feb 2025 that the Bank Feeds for Investec bank via Yodlee are not working. To date there has been no resolution. You are charging us for a suite of products where the functionality does not work. Please advise how you will refund me for

      • Turn off Knowlege Base Follow options and Follower lists

        Is there a way to hide or turn off the option in the Knowledge Base for users to follow specific departments/categories/sections/articles? If not, is there a way to turn off the public list of followers for each of those things? Otherwise, customer names

      • Custom validation in CRM schema

        Validation rules in CRM layouts work nicely, good docs by @Kiran Karthik P https://help.zoho.com/portal/en/kb/crm/customize-crm-account/validation-rules/articles/create-validation-rules I'd prefer validating data input 'closer to the schema'

      • Meet Canvas' Grid component: Your easiest way to build responsive record templates

        Visual design can be exciting—until you're knee-deep in the details. Whether it's aligning text boxes to prevent overlaps, fixing negative space, or simply making sure the right data stands out, just ironing out inconsistencies takes a lot of moving parts.

      • Zoho DataPrep switching Date Format

        When using a pipeline that is importing Zoho Analytics data into Zoho DataPrep, the month and day of date fields are switched for some columns. For example, a Zoho Analytics record of "Nov. 8, 2025" will appear in Zoho DataPrep as "2025/08/11" in "yyyy/MM/dd"

      • Introducing Withdrawal Reasons for Offers

        We’re excited to introduce a new enhancement to the Offer module that brings more clarity and accountability to every withdrawn offer. The Withdrawal Reason update ensures that each withdrawal — manual or automatic — is backed by a clear explanation,

      • Send Automated WhatsApp Messages and Leverage the Improved WhatsApp Templates

        Greetings, I hope all of you are doing well. We're excited to announce a major upgrade to Bigin's WhatsApp integration that brings more flexibility, interactivity, and automation to your customer messaging. WhatsApp message automation You can now use

      • Text snippet

        There is a nice feature in Zoho Desk called Text Snippet. It allows you to insert a bit of text anywhere in a reply that you are typing. That would be nice to have that option in Zoho CRM as well when we compose an email. Moderation Update: We agree that

      • issue with deluge script

        i used chat gpt to build this script and I am getting 2 errors which I cannot figure out how to fix: void monthly_sales_order_generation() { try { // ---------------- CONFIG ------------------- analytics_url_1 = "https://analytics.zoho.com/api/<workspaceID>/report/<reportID1>/data";

      • Zoho Books "Update" Trigger for Zapier?

        Hi Zoho Team, I've been in talks with Zapier about using their services to connect my Zoho Books account to various apps, but I require an additional trigger beyond the "New" trigger. I require an "Update" trigger, which will allow me to filter and create Zaps only when certain conditions are fulfilled on the Zoho Books end before I automate a separate app. Specifically this will help me create invoices in QuickBooks Online only when payments are recorded in Zoho Books, rather than when a new invoice

      • Service One. Bill Another. Zero Hassle.

        In field service operations, one challenge often comes up: the person who needs the service isn’t always the one who pays for it. Think about tenants vs. property managers, corporate offices vs. their finance departments, or school buildings vs. central

      • Presenting ABM for Zoho CRM: Expand and retain your customers with precision

        Picture this scenario: You're a growing SaaS company ready to launch a powerful business suite, and are looking to gain traction and momentum. But as a business with a tight budget, you know acquiring new customers is slow, expensive, and often delivers

      • Can we do Image swatches for color variants?

        We want to do something like the attached screenshot on our new zoho store. We need image swatches instead of normal text selection. We want to user to select an image as color option. Is this doable? I don't see any option on zoho backend. Please h

      • Can Zoho Flows repeat Actions more than once?

        I'm attempting to make an intentional Zoho Flow loop using the below layout. However, when "WithinLimit" condition is met, the program fails to execute the action "Get & Add Request Co..." again. Is this by design? Is Zoho Flows unable to repeat actions

      • Video interviews not compatible on mobile

        Hi Zoho,  The 2-way video interview feature you have added to Recruit would be great if the candidate was able to use the link to the video on a mobile phone, it doesn't work on Samsung browser, it doesn't work on chrome/firefox mobile version of browser,

      • From Zoho CRM to Paper : Design & Print Data Directly using Canvas Print View

        Hello Everyone, We are excited to announce a new addition to your Canvas in Zoho CRM - Print View. Canvas print view helps you transform your custom CRM layouts into print-ready documents, so you can bring your digital data to the physical world with

      • What is the difference between Zoho Campaigns and marketing hub?

        Zoho Campaigns is a permission-based email marketing tool for sending marketing emails and mass emails. Marketing Automation is a multichannel marketing automation tool that caters to organizations looking for tools to engage their users across multiple

      • Can I use a Standalone CRM Function as the Callback URL For Async Export Data API?

        I am creating an export job using this API https://www.zoho.com/analytics/api/v2/bulk-api/export-data-async/create-export/view-id.html There is a "callbackUrl" key in the CONFIG object. I tried copying the URL for a standalone function in CRM which can

      • Zoho Desk View Open Tickets and Open Shared Tickets

        Hi, I would like to create a custom view so that an agent can view all the open tickets he has access to, including the shared tickets created by a different department. Currently my team has to swich between two views (Open Tickets and Shared Open Tickets).

      • Next Page