Create custom widgets for a simplified end-user experience | Community | Zoho Projects

Create custom widgets for a simplified end-user experience | Community | Zoho Projects

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

        • Has anyone created a public ASAP Guide that I can check out?

          I am thinking of adding an ASAP guide to my web application, but I have noticed that the ASAP widget itself can be really slow to load sometimes. Has anyone created a public ASAP Guide that I can check to see how performant it is? I don't want to spend

        • Zoho Desk Partners with Microsoft's M365 Copilot for seamless customer service experiences

          Hello Zoho Desk users, We are happy to announce that Zoho Desk has partnered with Microsoft's M365 to empower customer service teams with enhanced capabilities and seamless experiences for agents. Microsoft announced their partnership during their keynote

        • What’s New in Zoho Analytics – September 2025

          Hello Users!! In this month’s update, we’re raising the bar across multiple touchpoints, from how you bring in data, plan and track projects to how you design and brand your dashboards. We’ve added the all-new Gantt chart for project visualization, expanded

        • Zoho MCP has no tools for Creator or 3rd Party Apps?

          I don't see a Zoho MCP community forum so putting this here. Two big problems I see: 1) Although Zoho advertises "over 950 3rd party apps" as available through their MCP, when I go to "Add Tools" there are ZERO 3rd party apps available to choose from.

        • Zoho Forms - Zoho Drive connection - Shared Drives not supported

          Hello i am stuck with Google Drive Connection There is no supported shared drives Connection is not support shared drives boolean Query Parameters - supportsAllDrives=true&supportsTeamDrives=true to activate fetch files from the shared drives. Ahat need

        • Apply Advance option not shown in report

          We are facing an issue in Zoho Expenses. While approving an Expense Report, the "Apply Advance" option is not appearing under the three dots (More Options). Details: Module: Expense Reports Issue: "Apply Advance" option not visible Status of Report: Awaiting

        • Can't create package until Bill created?

          I can't understand why we cannot create a package until a Bill is created? We are having to created draft Bills to create a package when the item is received, but we may not have received a Bill from the supplier. Also, Bill # is required, but we normally

        • Whats the Time out Limit for API Calls from Deluge?

          Hi Creator Devs, We are making API calls to third party server via Deluge. Getting this error message: Error at line : 24, The task has been terminated since the API call is taking too long to respond. Please try again after sometime. Whats the default

        • Community Digest Agosto 2025 - Todas las novedades en Español Zoho Community

          ¡Hola, Zoho Community! Agosto llega a su fin y septiembre nos trae aire fresco a la comunidad: más inteligencia con IA, actualizaciones que elevan la productividad y la recta final hacia Zoholics España 2025. Aquí tienes lo más destacado del mes para

        • Tip #3: How to change your booking page language

          Displaying your booking page in your target audience's language can greatly increase customer satisfaction. By speaking their language, you will help customers feel more comfortable scheduling with you and create a stronger connection with them. Let's

        • How can I optimize a Zoho Site page for SEO when embedding external menu or restaurant links?

          Hi everyone, I’m experimenting with building small content hubs on Zoho Sites and want to make sure I’m doing it in an SEO-friendly way. For example, I tried creating a page that highlights restaurant menu items and linked out to a resource like this:

        • Diff signature for compose new email and replies

          Hi,   How do i have different signature for replies and new emails. its inconvenient to have one large signature for replies. Usually on Outlook we have the option to keep separate signatures for new emails and for replies.

        • Zoho Website Site Speed Up & Setting

          We are experiencing slow loading speeds on our Zoho website and would like assistance in optimizing its performance. Kindly review the site and suggest or implement necessary improvements to enhance speed, especially related to: > Caching mechanisms >

        • Clickjacking: Zoho Vault's Response

          Issue Password manager browser extensions are found vulnerable to clickjacking security vulnerabilities that could lead attackers to steal account credentials, TFA codes, card details, under certain conditions. Reported by Marek Toth, Independent Security

        • No option for pick up in Zoho Books / Inventory but yes on commerce

          Is it planned to release soon on books/inventory?

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

        • Blueprint Issue - Being able to set a subform field as mandatory

          I'm creating a blueprint. My record involves a subform which is only shown once field is set but the field gets set in step two of the process. My problem - I can't save the record as the subform field is set to mandatory - If I unset the mandatory field,

        • Blueprint - Mandatory file upload field

          Hi, File upload (as we as image upload) field cannot be set as mandatory during a blueprint transition. Is there a workaround? Setting attachments as mandatory doesn't solve this need as we have no control over which attachments are added, nor can we

        • Zoho Books - Include Quote Status in Workflow Field Triggers

          Hi Zoho Books team, I recently tried to create a Workflow rule based on when a Quote is Accepted by the customer. This is something which I thought would be very easy to do, however I discovered that Status is not listed as a field which can be monitored

        • Zoho Books - Show Related Sales Orders on Quotes

          Hi Books team, I've noticed that the Quotes don't show show the related Sales Order. My feature request is to also show related Sales Orders above the Quote so it's easy to follow the thread of records in the sales and fulfilment process. Below screenshot

        • Add VAT/Tax line to bank adjustments

          When categorising transactions and matching bank feeds with transactions such as customer payments, we use the "Add Adjustment" to add things like fees/bank fees. It would be useful to choose a VAT/Tax rate here. Whilst there is a bank charges option when adding a payment, this goes into the default bank charges account. We use the adjustments so that we can choose the account and separate our fees. We use different card providers and Worldpay charges VAT so we are stuck. We cannot integrate with

        • New Menu Layout Feedback

          I'd really like to see the banking item back on the top of the menu. I'm sure part of it is just because that's what I'm accustomed to. However, for a bookkeeping program, I think there's a logic to having banking be on top. Not a giant issue, but something

        • How to use Rollup Summary in a Formula Field?

          I created a Rollup Summary (Decimal) field in my module, and it shows values correctly. When I try to reference it in a Formula Field (e.g. ${Deals.Partners_Requested} - ${Deals.Partners_Paid}), I get the error that the field can’t be found. Is it possible

        • Form Accessibility

          Hi, is there an update on the accessibility standard of Zoho forms? Are the forms WCAG 2.1 AA compliant? 

        • Cannot schedule report delivery

          The only 'send option' available when exporting reports is 'immediately' The option to schedule the report is missing.

        • adding attachment in sendmail script where attachment is in a CRM field

          Hi all, I have a custom field of type 'File Upload' in one of my modules in my CRM. I want to include the file in that field as an attachment to an email - which is done from a button on  the 'Results' module. I have created a script and a button to initiate an email from that module. The Deluge scripting window has allowed me to add arguments for all the fields I need to use except for the one file upload type field. My script currently looks like the below (content of the email omitted). As you

        • Signature field is showing black

          Hello, When customer signed the service form, it is showing as below picture Phone model: iPhone 16 Pro We tried delete and install application, but it not solved. This has on phone of a few person. There is any advice to solve this?

        • [Free Webinar] Learning Table Series - AI-Enhanced Insurance Claim Management in Zoho Creator

          Hello Everyone! We’re excited to invite you to another edition of Learning Table Series, where we showcase how Zoho Creator empowers industries with innovative and automated solutions. Struggling with lengthy claim processes, a lack of visibility into

        • How to update changed purchase account of item in invoice

          I have selected the wrong purchase account for various articles and created invoices. I had to adjust the purchase account in the article afterwards, but the old purchase account is still posted in the transaction-journal of the invoice. To adjust the

        • Zoho Suite is very slow

          Since today Zoho is incredibly slow over all applications! What's going on?

        • Not sure how to use credits to my account

          Hi I have a $50 credit to my account. I'm just wondering how I can apply that to either a current invoice or to try a new service. Any advice would be great, thanks. Kind Regards Chris

        • Control who sees Timeline and Interactions in Zoho CRM through Profiles

          The feature has been enabled for all DCs (except US, EU, and IN DCs). We will be rolling it out to the other DCs in the upcoming days. Dear All, In a CRM, not all users would require access to the history of a record. For instance, a Marketing Operations

        • Zoho Desk Integration - Add the option to send the estimate from the Zoho Desk Ticket Integration

          Hi, Currently in the Zoho Desk integration, the user is able to create an estimate from a ticket, once the estimate is created the user can see the estimate under the ticket (see screenshot below), but is not able to send that estimate from Zoho Desk.

        • Utilisation de Zoho en conformité avec l’article 286 du Code général des impôts (CGI)

          Cher(e) client(e), Conformément à l’article 286 du Code général des impôts (CGI) impose aux entreprises assujetties à la TVA d’utiliser des systèmes de caisse ou de gestion commerciale certifiés lorsqu’elles enregistrent des ventes à des particuliers.

        • Issue showing too many consultations in my workspace link.

          Hi Team, I’ve set up two Workspaces to track meetings from different sources. So far, this has been working well, and the two Workspaces are differentiated without any issues. However, when I navigate to Consultations and share the link to my personal

        • 👋 Welcome to the Zoho MCP Community

          Hello all, glad to have you here! This is your space for everything AI agents, MCP tools, and intelligent business apps. This community is for you — developers, partners, creators, and businesses exploring how agents can transform work. Whether you’re

        • CRM Validation Rules Support Only Single Condition

          Simply put, CRM validation rules support only a single condition for each field on "All Records". You also cannot specify additional validation rules on the same field because it has already been used in an existing validation rule. The ONLY solution

        • Unapproved Leaves are hard to distinguish in Attendance View

          This is a an unapproved leave request It appears in the Attendance view without any visual indicator if its approved or not For a whole day request this might be manageable but for hourly requests it gets very hard to know which are approved, which are

        • Performance Appraisal Probation Period

          Hello All,  Is there any possible way to create an appraisal cycle for new staff members, at the end of probation period? Many thanks!

        • Zoho Creatorの一括操作における処理の同期/非同期について

          現在、Creatorのレポート機能を利用して、複数のレコードに対して一括で処理を実行しようとしていますが、処理の実行順序について確認したいことがあります。 レポート内の複数レコードに一括で処理を実行した際、処理は同期的に行われるのでしょうか？それとも非同期的に行われるのでしょうか？ 【同期処理の場合】 レコード①に対する処理が開始され、終了後にレコード②に対する処理が開始され、最後にレコード③に対する処理が実行されるように、処理が順番に行われる場合。 【非同期処理の場合】 レコード①、レコード②、レコード③の処理が一斉に開始され、それぞれ並行して処理が行われ、全処理が終了する場合。

        • Next Page