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

                                  • Zoho Projects app update: Voice notes for Tasks and Bugs module

                                    Hello everyone! In the latest version(v3.9.37) of the Zoho Projects Android app update, we have introduced voice notes for the Tasks and Bugs module. The voice notes can be added as an attachment or can be transcribed into text. Recording and attaching

                                  • Boas práticas de desenvolvimento em Deluge

                                    O Deluge (Data Enriched Language for the Universal Grid Environment) é a linguagem de script utilizada em diversas aplicações do ecossistema Zoho, como Zoho Creator, Zoho CRM, Zoho Books e Zoho Flow. Ela foi projetada para permitir automações rápidas

                                  • How do I automate my package and shipment process

                                    Hey, I have a very basic problem regarding automating my package and shipment. My business does not require me to have those modules and manage them currently and since I'm new to zoho I want to start with just the basics. I just need to automatically

                                  • How do I automate my package and shipment process

                                    Hey, I have a very basic problem regarding automating my package and shipment. My business does not require me to have those modules and manage them currently and since I'm new to zoho I want to start with just the basics. I just need to automatically

                                  • Intergrating multi location Square account with Zoho Books

                                    Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.

                                  • Emails being blocked / spamcop

                                    Hello, I am unablr to send any single email during the whole time due to the Zoho IP 136.143.188.16 being blocked by SpamCop.net Please help on this.

                                  • Zoho IP blocked by SpamCop 136.143.188.16

                                    Hello, I am unble to send any single email during the whole time due to the Zoho IP 136.143.188.16 being blocjed by SpamCop.net Please help on this.

                                  • Is there a way to configure dark mode for Campaigns emails that go out to customers?

                                    I've found a lot of information on how to configure dark mode for my (The user) personal Zoho workspace and email, but is there any way to edit dark mode settings on emails that we send out to customers via campaigns?  We sent out a test email the other

                                  • Can I hide empty Contact fields from view?

                                    Some contacts have a lot of empty fields, others are mostly filled. Is there a way I can hide/show empty fields without changing the actual Layout? I would like to de-clutter my view, and also be able to add information later as I am able. I would be

                                  • Auto-publish job openings on my Zoho Recruit Careers Website

                                    I have developed a script using the Zoho Recruit API that successfully inserts new jobOpening records to my Zoho Recruit website, but my goal is to auto-publish to the Careers Website. The jobOpening field data shows two possible candidates to make this

                                  • Credit Card Terminal for Zoho Books

                                    Hello, Instead of punching the credit card number manually for customer payment, do you have a third-party hardware credit card reader that works with Braintree? Thank You

                                  • How do you print out the invoices comments

                                    I have some invoices where i need to print out the comments that show when reminders and etc were sent how do we print those out in Zoho Books.

                                  • Feature Request: Enable Custom PDF Layout Editor for All Modules (Including Package Slips)

                                    Hello Zoho Community and Product Team, I am writing to share a suggestion that would significantly enhance the customization capabilities within Zoho Books. We all appreciate the power of the Custom PDF Layouts (the "New" template engine) that allows

                                  • Need advice for product/item search functionality when adding invoices.

                                    My client uses "Catalog or Vendor" name and Product code to search for his items. But Zoho only allow to search by product name and SKU when adding items to Invoices/Estimates. Clients product codes are not unique as they may overlap from different catalogs/vendors.

                                  • How to dynamically pass IDs from one API response to a second API call in Zoho DataPrep?

                                    Hi Team, I am setting up a global consolidated reporting pipeline in Zoho Analytics (India) using Zoho DataPrep as the ETL engine. I am pulling data from multiple Zoho Books Data Centers (US, Singapore, India) thats why i used the URL Source (OAuth 2.0)

                                  • Feature Request: "Send Invitation" Toggle for Events

                                    I am writing to request a critical "Quality of Life" update for the Activities module. Currently, adding people to the Participants field in an Event triggers an automatic email invitation/acceptance tracking with no way to opt-out. For general events

                                  • Account Review Pending - Daily Limit 100

                                    Hi ZeptoMail Team, I'm writing to request a manual review of my account. I am currently stuck on the 100-email daily limit and cannot purchase credits. Status: My domain is already verified (DKIM/CNAME). Issue: The "Customer Validation" option is no longer

                                  • Automation Series: Move Tasks to a different Task List on Status Change

                                    In Zoho Projects, you can automatically move a task from one task list to another when its status is updated. This keeps your tasks organised and ensures better visibility while reducing manual work. For instance, during a product launch, the marketing

                                  • Introducing Bigin's all new integration with Microsoft Teams

                                    Picture this: You are on call with your team to discuss some important deals that need to be closed soon. While discussing each deal, your team has to switch back and forth between your Teams account and Bigin account to refer to details about the deal.

                                  • Scaling the customer journey: What's new in CommandCenter

                                    Dear Customers, The last time we connected about CommandCenter, it was about the tool's new controls and revamped UI. Personally, the overhaul of the UI from the last update, still excites me. Today, we're here with news about its scalability and added

                                  • Adjusting Physical Inventory

                                    Not getting very far with support on this one, they say they are going to fix it but nothings happened since November. Please give this a thumbs up if you would like to see this feature or comment if you have some insight. Use Case: Inventory set to be

                                  • How to book GST paid in zoho books

                                    hi, i am a new user to Zoho books and not able to book GST paid in books, kindly suggest how i can book it in books. thanks, siddharth

                                  • Dynamic Remaining Quantity in Lookup During Allocation

                                    Hi everyone, From what I understand in Zoho Creator, lookup fields only display the stored value from the source record and do not dynamically update while a form is being filled. Because of this, showing a real-time updated remaining quantity inside

                                  • Is it possible to use HTML formatting in SMS messages sent from Zoho?

                                    Hi everyone, I have a question regarding sending SMS from Zoho When we send emails from Zoho, we can include HTML code to format the message (like adding links, styling, etc.). Is it possible to do something similar when sending SMS messages through Zoho

                                  • Important update: Migrate to the new SalesIQ live chat widget before April 14, 2026

                                    The old SalesIQ live chat widget will be deprecated on April 14, 2026. This is a final reminder to migrate to the new SalesIQ live chat widget before this date. After April 14, 2026, the old widget will no longer be maintained, which can lead to slower

                                  • If your IM chats aren’t auto-assigning, here’s what to check

                                    Hey everyone! We’ve been seeing quite a few questions around Instant Messaging (IM) Chat Routing in Zoho Desk, especially around how it actually behaves in real time. So I thought I’d share a practical breakdown of what’s happening behind the scenes.

                                  • connect zoho creator with google drive

                                    Hello everyone, I need to connect to a folder drive. The idea, is that google drive loads a text document with some data, I must read that text document to be able to autofill a form that I have in zoho creator with that data. I also attach PDFs and place

                                  • Uploaded files are not included when using "Include user submitted data" in Email Notification

                                    In Send Email notification workflow in Zoho Creator, there is an option called "Include user submitted data" which allows the email to contain all the form submission details. However, when this option is enabled, files or images uploaded through File

                                  • Extend Zoho Canvas Customization to Zoho Creator Forms and Reports

                                    Currently, Zoho Canvas allows users to design and customize the UI of Zoho CRM modules with a much better visual experience. This helps organizations create cleaner layouts, improve usability, and design interfaces that match their workflows. However,

                                  • Kanban View for Projects.

                                    At our organization, we describe active projects with various statuses like "In Proofing" or "Printing" or "Mailing". In the Projects view, one can set these project statuses by selecting from the appropriate drop-down. While this works, it's difficult to view and comprehend the progress of all of your projects relative to each other in a table. Creating a Kanban view for projects where I can move them from one status to another allows me to see where each project is in the order of our workflow.

                                  • Performance issue with too many notebooks or notebooks that are too large?

                                    I just migrated around 30 folders from Evernote. Most of these folders were created in order that the enex migration files would be < 500mb (requirement by Zoho Notebook). I want to now clean up many of these artificial notebooks mostly by combining them

                                  • Tags with spaces

                                    I imported notes from Evernote where tags can have spaces in them (for example "House Expenses" or "House Improvements". The import worked fine. Now I want to add a new note and assign it a tag. As soon as I type "House" followed by the space I get a

                                  • Javascript Error

                                    I don't know how this happened but I'm constantly getting popup windows with Javascript coming from Notebook. I have no idea why this is happening. Screen shot attached. Thanks, Joe Berry

                                  • Serious problem with file that contains non-ASCII characters

                                    I imported many pdf files from Evernote whose names contain Hebrew characters, such as ח רבעוני - ביטוח חיים - סוף רבעון 3 - לשנת 2025.pdf I have two very serious problems: (1) Zoho Notebook cannot open the pdf file; (2) It cannot download the pdf file.

                                  • NOTAS INVISIBLES

                                    Siempre que abro mis notas salen invisibles, muchas no resaltan las *negritas* en la vista previa hasta que te metes en ellas y modificas algo. Pero omg con el equipo de Zoho. Les dije que las usaba mucho precisamente por la VISTA PREVIA y encontrar las

                                  • Button ''I'm Interested'' won't translate

                                    Since our main platform is in French, I would like to get this ''I'm Interested'' button translated to French ''Je suis intéressé''. We managed to translate the whole carreer site in French, except the button. How come ? We have a standard subscription,

                                  • Feature request - image resizing on sales orders

                                    I need to be able to show the items on the sales orders, currently the item image shows really small and no way to resize it, need the ability to make the image larger to showcase the product on the pdfs

                                  • Email Parser Not Extracting Fields Correctly with Certain Label Formats

                                    I’ve been testing the Email Parser functionality in Zoho CRM to automatically extract data from incoming emails and map it to CRM fields. During testing, I noticed that parsing sometimes fails when the email contains field labels formatted like this:

                                  • Zoho CRM Community Digest - February 2026 | Part 1

                                    Hello Everyone! February has been off to a productive start in the Zoho CRM Community, with several thoughtful product enhancements and helpful technical discussions making their way into the forums. To help you stay up to speed, we’ve rounded up the

                                  • Nouvelle fonctionnalité : donnez du style à vos pages avec le Branding

                                    Que vous prépariez un webinaire important. Vous avez investi du temps dans votre contenu, invité des intervenants de qualité, et les inscriptions commencent à affluer. Mais votre page d’inscription ? Elle ressemble à toutes les autres : générique, sans

                                  • Next Page