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

    • Cliq Bots - Post message to a bot using the command line!

      If you had read our post on how to post a message to a channel in a simple one-line command, then this sure is a piece of cake for you guys! For those of you, who are reading this for the first time, don't worry! Just read on. This post is all about how

    • 【Zoho CRM】営業日のロジックに関するアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、営業日のロジックに関するアップデートをご紹介します。 本アップデートにより、ワークフローにおける営業日の計算方法が改善されました。 週末などの非営業日にワークフローのトリガーが発生した場合でも、 「+0」「+1」「+2 営業日」といった設定が、意図どおりに正確に動作するようになりました。 営業日に基づくワークフローでは、日付項目を基準に「何営業日後に処理を実行するか」を指定します。

    • Merged cells are unmerging automatically

      Hello, I have been using Zoho sheets from last 1 year. But from last week facing a issue in merged cells. While editing all merged cells in a sheet became unmerged. I merged it again, but it again unmerged. In my half an hour work I have to do this 3-4

    • Introducing Built-in Telephony in Zoho Recruit

      We’re excited to introduce Built-in Telephony in Zoho Recruit, designed to make recruiter–candidate communication faster, simpler, and fully traceable. These capabilities help you reduce app switching, handle inbound calls efficiently, and keep every

    • Just want email and office for personal use

      I am unclear as how to how I would have just a personal email (already do have it and love it) and get to use docs, notebook, workdrive etc. In other words mostly everything I had a google. I find gocs can be free with 5gb and so can mail with 5gb. Are

    • Unable to change the "credentials of login user" option when creating a connection

      I want to create a new Desk connection where the parameter to use 'credentials of login user' is set to YES. I'm able to create a new connection but am never given the option to change this parameter. Is this a restriction of my user profile, and if so,

    • Show backordered items on packing slip

      Is it possible to show a column on the Packing Slip that shows number of backordered items when a PO is only partially filled? I would also like to see the Backordered column appear on POs after you receive items if you didn't get ALL of the items or partial amounts of items. And lastly, it would be nice to have the option of turning on the Backordered column for invoices if you only invoice for a partial order. -Tom

    • Zoho CRM Community Digest - January 2026 | Part 1

      The new year is already in motion, and the Zoho CRM Community has been buzzing with steady updates and thoughtful conversations. In this edition, we’ve pulled together the key product enhancements, Kaizen learnings, and helpful discussions from the first

    • Zoho CRM Feature Requests - SMS and Emails to Custom Modules & Time Zone Form Field

      TLDR: Add Date/Time/Timezone form field, and be able to turn off auto timezone feature. Allow for Zoho Voices CRM SMS Extension to be able to be added to custom modules, and cases. Create a feature that tracks emails by tracking the email chain, rather

    • Introducing Bigin's Add-in for Microsoft Outlook

      Hello Everyone, Email is an important way to communicate with customers and prospects. If you use Outlook.com for emails and Bigin as your CRM, the Outlook Add-in helps you connect them easily so you can see your Bigin contact details right inside Outlook.com.

    • Ask the Expert – Zoho One Admin Track : une session dédiée aux administrateurs Zoho One

      Vous administrez Zoho One et vous vous posez des questions sur la configuration, la gestion des utilisateurs, la sécurité ou encore l’optimisation de votre back-office ? Bonne nouvelle : une session Ask the Expert – Zoho One Admin Track arrive bientôt,

    • Zoho Commerce

      Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if not

    • How to Associate Zoho Projects in Zoho CRM

      Hi I need script for associating projects in zoho projects to particular Account in zoho CRM side. It can be done manually but I need the automation for this process. There are no api regarding associating a project in zoho crm account. Need assistance

    • Add Claude in Zoho Cliq

      Let’s add a real AI assistant powered by Claude to your workspace this week, that your team can chat with, ask questions, and act on conversations to run AI actions on. This guide walks you through exactly how to do it, step by step, with all the code

    • Need to set workflow or journey wait time (time delay) in minutes, not hours

      Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integer

    • Editing Item Group to add Image

      I did not have the image of the product when the Item Group was created. Now I have the product image, and would like to associate/add to the Item Group. However the Item Group Edit functionality does not show/allow adding/changing image. Please hel

    • Zoho Books - France

      L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité

    • New in Office Integrator: Download documents as password-protected PDFs

      Hi users, We're excited to introduce password-protected PDF as a download option in Zoho Office Integrator's document editor. This allows you to securely share confidential information from within your web app. Highlights of the password-protected PDF

    • Sales IQ - Zobot en multilangue

      Bonjour, J'ai un Zobot installé sur mon site depuis longtemps. J'ai ajouté plusieurs langues, dans la configuration et dans le générateur de bot sans code Pourtant, le Chat continue à s'afficher en Francais. Comment enclencher le multilangue en front

    • Streamlining E-commerce Photography with AI Background Tools

      Hey Zoho Community, I’ve been messing around with ways to make product images less of a headache for fashion brands on Zoho Commerce. You know how boring generic backdrops can get, and how much time traditional photoshoots eat up, right? I tried out this

    • Unable to Assign Multiple Categories to a Single Product in Zoho Commerce

      Hello Zoho Commerce Support Team, I am facing an issue while assigning categories to products in Zoho Commerce. I want to assign multiple categories to a single product, but in the Item edit page, the Category field allows selecting only one category

    • Collapsing and expanding of lists and paragraphs

      hello Would you ever implement Collapsing and expanding of lists and paragraphs in zoho writer ? Best regards

    • Saving issue

      First problem I opened a MS word file in writer. after the work is done, it does not save instantly, I waited for like 10min and it still did not save. second problem When I save a file, then file gets saved as another copy. I just did save, not save

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

    • Notifications Feeds unread count?

      How do I reset the unread count on feeds notifications?  I've opened every notification in the list.  And the count never goes to zero.

    • Zoho Finance Limitations 2.0 #3: Can't assign a Contact to a Finance Record (estimate, sales order or invoice)

      If you use a business to business scenario with different contact people within the company you can't assign a finance record (estimate, invoice, etc...) to that person. Why this matters? No way to find out which person placed the order without manual

    • Zoho Community Digest — Febrero 2026

      ¡Hola, comunidad! Un mes más os traemos las novedades más interesantes de Zoho para febrero de 2026, incluyendo actualizaciones de producto publicadas oficialmente, cambios de políticas y noticias del ecosistema. Pero antes de lanzarnos a las actualizaciones,

    • Disable Zoho Contacts

      We don't want to use this app... How can we disable it?

    • Filter button in the Zoho Sheet Android App doesn't toggle on

      I am a new Zoho Sheets user and experiencing a specific issue with the filter functionality in the Android mobile application. Detailed Issue Description: The filter icon appears correctly in the toolbar. Upon tapping the filter icon/button, the toggle

    • 【Zoho CRM】商談タブへのデータインポート

      Zoho使用前にエクセルで管理していた商談情報を、Zoho一括管理のため、商談タブにインポートしたいのですが、お客さまの氏名だけが紐づけられませんでした。 「Zoho CRMにインポートする項目を関連付ける」のところが画像のようになっています。 （弊社では、「姓」を「★個人データ名」という項目名に変更し、フルネームを入れて使用しています。） どのようにしたら氏名をインポートできるかご存じの方がいらっしゃいましたら、ご教示いただきたく、よろしくお願いいたします。 （投稿先が間違っていましたらご指

    • CRM Cadences recognise auto-responses

      I have leads in a Cadence. I get an auto-responder reply "I'm out of the office..." Normally Cadences seems to know that isn't a real reply and keeps the lead enrolled in the cadence. However, today, Cadences has UNENROLLED a Lead who sent an auto-reponse

    • SalesIQ Chat Notifications

      I am the admin of our salesIQ implementation. About two weeks ago, I started hearing/seeing notification for ALL chats messages from monitored agents/chat participants. I don't need to see these, we have a manager who deals with this. I can't stop the

    • How to Create a Fixed Sliding Time Window (D-45 to D-15) in Zoho Analytics ?

      Hello, I would like to create a report in Zoho Analytics based on a sliding time window between D-45 and D-15, with a fixed snapshot of that specific period. The data displayed should strictly reflect activity recorded between D-45 and D-15 only, without

    • Export Zoho Books to another accounting package?

      Is an export feature to Quickbooks or Accpac available (or a form that is easily imported by them)?  My reasons: 1) my accountant, who prepares my corporate tax return, prefers to work with their own accounting system.  If I can convert Zoho books a form that is easily importable into Quickbooks or an Accpac format, this process would be easy. 2) I don't want to keep my data in a proprietary format on the cloud somewhere without a way to easily extract it to a format that can be read my a well established

    • Anchor Links in Dashboards

      Hello,  Our dashboards frequently have multiple sections that would be more easily skipped between using anchor links. Please consider adding an anchor link feature to the text widget? This could be done by adding an anchor link option to the text widget next to the "remove" option (see screenshot). The option would assign an ID to the <div> containing the text widget in the live dashboard. Then, the chosen ID could be linked using a traditional <a href="#link_id"> in the html section of the text

    • Introducing Auto-trigger for Screening Bot

      Still manually sending screening tests after every application? Not anymore. With Auto-trigger for Screening Bot, screening now begins automatically. When a candidate applies for a job that has an attached assessment, Recruit checks whether the test has

    • Importing into Multiselect Picklist

      Hi, We just completed a trade show and one of the bits of information we collect is tool style. The application supplied by the show set this up as individual questions. For example, if the customer used Thick Turret and Trumpf style but not Thin Turret,

    • Add line item numbers to sales order/invoice creation page

      It would be really helpful if there were line numbers visible as we are creating a sales order and/or invoice. There are line numbers visible in the PDF once the sales order is created. I would like to be able to see the line numbers as I am building

    • API to Apply Retainer invoice payment to Invoice

      Hi Team, I could not find  API to apply the Retainer invoice payment to existing Invoice. Can you please help ? Attaching the screenshot

    • Reconciling a month with no transactions

      I'm treasurer for a small non profit cemetery association and I'm trying to reconcile a bank statement for a month that did not have any transactions. Do I skip the month entirely and go a month with transactions?

    • Next Page