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

    • 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

    • Sales Receipts in UK Free tier

      Is Sales Receipts available in UK Books, specifically at the Free tier? None of the options from the help pages are available to me.

    • 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

    • Bill sent for Payment Approval

      Zoho Books currently supports three levels of transaction approval for bills: Draft, Submit, and Approved. We are looking to add a layer of approval like a bill marked for payment before initiating payment requests through HSBC Bank. Can you please guide

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

    • 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

    • How to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes

      Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.

    • Marketing Tip #24: Encourage customers to leave reviews

      Reviews are one of the strongest trust signals in ecommerce. When shoppers see real feedback from other customers, they feel more confident about buying, especially when they’re choosing a brand for the first time. Not all reviews are equal. Detailed

    • Ability to Attach Record-Specific Files Automatically in Workflow Email Templates

      Currently in Zoho CRM, email templates allow attachments to be added, but these attachments are static and remain the same for every recipient. There is no straightforward option to automatically attach a file that is stored within the specific CRM record

    • This version of app doesn't support this notecard type Error

      So this problem is happening for any notes created within the last week, as well as any note recently edited on Android. I can open them on my phone fine, but they don't open on the website version. They DO work on the desktop app version. It's just web

    • Issue with Picklist Dropdown Not Opening on Mobile

      Hello I am experiencing an issue with picklist values on mobile. While the arrow is visible, the dropdown to scroll through the available values often does not open. This issue occurs sporadically, it has worked occasionally, but it is very rare and quite

    • {Action Required} Re-authenticate your Google Accounts to Continue Data Sync

      Hello Users! To align with Google’s latest updates on how apps access files in Google Drive, we’ve enhanced our integration to comply with the updated security and privacy standards, ensuring safer and more reliable access to your data. With this update,

    • Allocating inventory to specific SO's

      Is there a way that allocate inventory to a specific sales order? For example, let's say we have 90 items in stock. Customer 1 orders 100 items. This allocates all 90 items to their order, and they have a back order for the remaining 10 items which could

    • Is this a SCAM email or is it really Zoho?

      L.S. I received the following message. Is this from Zoho? I have had a Zoho One account for many years and my website has been online for years. If it is a scam, I think you should know about it.

    • How to close an estimate ?

      Hello, I have created estimates, and converted them to invoices to get 50% payment. Now I have 2 cases where the estimate stills shows status partially invoiced, however: 1. for one of them, project stopped half way, so the remaining part will never be

    • Updating Analytical Fields Data

      Dear Zoho team, I'm having an issue with the recently added fields in both Analytical Desk and Analytical. How can I generate the data in Analytical when new fields are added? https://analytics.zoho.com/workspace/2436819000000007005/edit/24368190000

    • Looking for Guidance on Building a Zoho Website

      I'm exploring the possibility of building a custom website with specific features using Zoho as an alternative platform. My goal is to create something similar to https://gtasandresapk.com , with the same kind of functionality and user experience. I'd

    • Next Page