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:
- A connection between Zoho Projects and Zoho Desk.
- An extension configuration process that includes:
A. Creating an extensionB. Configuring the plugin manifestC. 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> <script src="" target="_blank">https://js.zohocdn.com/projects/js/client_sdk.min.js"></script> <script src="" target="_blank">https://code.jquery.com/jquery-1.12.4.min.js"></script> <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" } }; var url = "https://desk.zoho.com/api/v1/articles/search?title=" + subject + "*"; //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
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
Sticky Posts
Building extensions #10: Fetch customized user inputs, store them globally at the app level, and access them across entities
This data storage concept enables you to store data related to your extension for both entity properties and extension properties. In our previous piece, we looked at how to store data for entities using entity properties. In this post, we'll look atBuilding extensions #9: Store, retrieve, and access entity-specific data in widgets using data storage
Data storage - Overview Storing data related to the extension you are working on is essential. It can be saved as key-value pairs for an entity or extension, known as entity and extension properties, respectively. Data can be saved for the following entitiesBuilding 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 ZohoBuilding extensions #6: Custom user interfaces with Widgets
Welcome to our post on Widgets for Zoho Projects! In our last post, we explored the significance of the connections feature, showed how to use it, and provided an example use case. In this article, we'll look at the importance of widgets, another featureBuilding extensions #5: Integrating applications with Zoho Projects through Connections
In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Marketer's Space: Proven tips to improve open rates – Part I
Hello Marketers! Welcome back to another post in Marketer's Space! In this week's post, we'll discuss the ever-important concept of open rates. This will be a multi-part series, as we have a range of topics to cover. Open rates—which measure the percentageCan't send nor receive emails on my external email accounts since this morning
Greetings, I have two external accounts integrated into Zoho mail through POP3 + SMTP. These accounts have always worked normally since the day I've set them up. Starting 10:30 AM this morning (Western European Time) both suddenly stopped sending andCreating Custom PDF Template from Form
I am trying to create a custom PDF from form submissions. I have the standard subscription and it indicates that PDF forms are included. I cannot find anywhere to create PDF forms. I try to follow the instructions from here: https://help.zoho.com/portal/en/kb/forms/form-settings/pdf-settings/pdf-editor/articles/creating-your-own-pdf-template#Creating_your_template_from_the_scratchImportant Update: Facebook Metrics Deprecation & Impact on Zoho Analytics
Dear Zoho Analytics users, Facebook has deprecated a set of metrics from the Facebook Pages Insights API, effective November 15, 2025. As a result, these changes will affect any reports and dashboards in Zoho Analytics that rely on Facebook Pages data.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,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 receivingIs 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 sourcesFeature 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 aSubforms 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. BasicallyText 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?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 newestMarketer’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,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 workshopNo 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 forTurn 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 namesService 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. centralPresenting 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 deliversCan 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 actionsVideo 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,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).Enviro Recycling EHF Fee's
I'm in Canada and each province has it's own recycling program with it's own fee's. There are numerous categories that electronics fall into and each category has a taxable rate applied to it. I need a way to be able to apply the correct rate dependingZoho Desk API - Influence which layout is used
Hello, how can the ticket layout be changed using the API? I would like to choose the layout directly when creating the ticket. If this is not possible, my question would be how can I change it afterwards? Best regards, SvenHas CSS Changed for Common Elements?
I noticed today that the standard title headings on my Forms and Reports display smaller in size than before. Google Dev Tools (attached), seems to confirm my suspicion. Something appears to be overriding the 1.375rem to 1.125rem. The font size on theText field alignment
Is it possible to align text in the text field? Or even better, is there a possibility to have a field which accepts only numbers?email moderation issue when email is sent in the name of a mail group
Symptom: an email that is sent by a mail group moderator in the name of a moderated mail group is held back for approval. Reproduction: Create a moderated mail group with members and moderators. Allow that mails can be sent in the name of the group (extendedPipeline in Custom Modules
I love the way the Sales Pipeline looks and functions with reports. I would like to add the save pipeline features and visualization to a custom module, however, I only see that these pipelines are only available for the Deals module. Is there a way to add pipelines to custom modules?Tip #53- Remote Billing: Your End-to-End Billing Solution in Zoho Assist- 'Insider Insights'
Manual invoicing, after every remote support session, can be time-consuming and often error-prone. As an MSP, IT admin, or even a freelance support technician, it may become overwhelming to keep track of session time, service rates, and client invoices.Record history and ticket interaction tab in contacts and accounts
Hello everyone! We have improved the History tab to help users trace updates in the interaction activity logs of the Contacts and Accounts detail pages in the Customer Module. This enhancement make it easier to get clear details about who made each update,Is there an API to "File a Ticket" in Desk
Hi, Is there an API to "File a Ticket" in Desk to zoho projects?Keyboard UX for Assemblies
The new Assembly module has a counter-intuitive behavior that ought to be corrected. When an Assembly is ready to be entered, there are two options given, the blue-highlighted "Assemble" and the gray "Save as Draft". This correctly implies that the normalWhy can't I see images uploaded by other users in the Library for Campaigns
We are several users of zoho Campaign. I have uploaded visuals of our company, but my team members can't see them.zoho sheet stuck
I Need help. ZOHO sheets stuck on the loading screen. I've already deleted the system cache and cookies of my browser (google chrome) but it's still not opening.Tip of the Week #78 – Cut response time with multichannel shared inboxes
If you’ve ever felt your team juggling between multiple email accounts, social pages, and chat apps just to reply to customers, you’re not alone. Managing conversations in multiple channels can quickly turn messy. Important messages across inboxes, repliesNeed a way to run a client script longet than 10 seconds
By The Grace of G-D. Hi, Currently, Client Scripts are Timing out at 10 seconds. We have complex logics that needs more time. Can you add a feature request to increase the timeout?FSM Improvement Idea - Show an Import button when there is no data
I am setting up FSM for a client and I noticed that there is no option to import data, see screenshot below. Even when you click Create Contact there is only an option to Import from Zoho Invoice. It is only after you add at lease 1 record that the ImportUI Improvement - Ability to Collapse Flow
The UI for Flow is generally pretty good. However, when multiple decision trees are used, the layout can get pretty convoluted and hard-to-follow (see one of my Flows below): In these cases, even the auto-arrange fails to make this something that a normalTasks Statuses
Hi, The task status "Completed" is a final status which closes the task. We need to have a status "Cancelled". However, when the status is set to "Cancelled", the task prompt still has a blue button to Close Task. When the customer clicks that and closesAdd Lookup Field in Tasks Module
Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (Create New Tasks Layout in CRM
I am able to do this in Leads, Contacts, Meetings, Calls - every other module, but cannot create a new layout in tasks. I have the appropriate access but it's simply not appearing as an option. Only "Standard" option shows. Please help!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 configureNext Page