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

    • Les Zoholics 2025 sont de retour

      Bonjour à tous, Préparez-vous pour deux jours exceptionnels au cœur de l’écosystème Zoho ! Nous avons le plaisir de vous convier à Zoholics France 2025, un événement dédié à l’innovation, à l’expertise et à la communauté Zoho. Au programme : • Présentations

    • Sesión "Ask me anything" Zoho en Español - 26 de junio de 2025, de 14:00 a 17:00 (en español)

      ¡Hola Comunidad! ¿Quieres entender mejor Zoho CRM o Zoho Desk? Nuestros expertos estarán disponibles para responder a todas tus preguntas durante nuestra sesión "Ask me anything". Puedes comentar este artículo y durante tres horas, nuestro equipo estará

    • Not receiving instagram verfication emails

      Hi- I'm not receiving Not receiving instagram verfication emails.  I have seen other users having the same issue and your answer was to contact instagram.  But instagram no longer has a support email.  

    • CRM Feature Request

      When enabling Translation in Zoho CRM I would like to see the ability to remove the language "English (US)". I have encountered a user experience issue with a client recently. The client uses English (UK) but they are based in Spain, so they have activated

    • Change work hours per day for employees

      Hello, Is there a way to modify the work hours per day for employees in Zoho projects? This would be helpful for resource allocation to more accurately see when an employee who works 35 hours a week vs 40 hours has a full schedule. Thanks.

    • Is there a way to set Document Owner/Sender via the API

      When sending requests for zoho sign, it would seem zoho uses the id of the person that created the zoho api cred to determine the owner_id, is there a way to set a default for this?

    • 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

    • Name Change and Delete Email ID and Alias

      Hello please i require urgent assistance, 1.) I would also like to change the name that appears when people receive my emails. I have an info@spacetraiders.com but when people receive my email its say Ronma Adedeji instead of either Info or Space Traiders..

    • PROBLEMA AL CONECTAR EL DOMINIO

      hola buenas tardes hoy estoy tratando de crear mi registro y no me deja conectar el dominio  me dice que el dominio ya está vinculado a una cuenta y la verdad no tiene conectado el dominio a ninguna cuenta  tengo acceso al hosting y cpanel que se compro pero al revisar los dns estan apuntando al mismo hosting del panel  del proveedor del domini ... como hago para poder crear la cuenta con ese dominio, incluso cree un registro pero no  me deja vincularlo el dominio es integrasoft.co agradezco me ayuden  

    • Delay in delivery of emails

      I'm experiencing random delays for emails sent from Zoho account. Headers show that the message reached mx.zohomail.com almost instantly, followed by a delay of anywhere from 3-15 minutes (and counting). Please confirm whether this is a system-wide

    • SMTP Email Sending Not Working for My Domains and Apps

      Hello Zoho Support Team, I am experiencing a critical issue with sending emails via Zoho SMTP for my domain humanhup.com. Both of my applications, HumanHup and CheapUI, are unable to send emails using Zoho SMTP, even though the same setup was working

    • Company Name not pre-populating when using Quick Create: Contact

      Hi Devs, This has bugged me for a long time, and it's a simple UX design change to solve it. Problem: Users creating Contacts not linked to Companies/Accounts Cause: When a user creates an Opportunity where after browsing the Contacts they realise they

    • Zoho Mail not working. Constant OTP

      Firstly, my emails have been playing up for over a year. They are struggling to send and I have to press Send a few time to make them going. They mostly hover with a loading note saying Sending. I emailed Zoho and they got it working, but now it is doing

    • Zoho Mail Storage Usage Discrepancy – Incorrect Storage Reporting

      Dear Zoho Support Team and Community, I previously raised a concern about inaccurate storage usage reporting in Zoho Mail but did not receive a clear or satisfactory response. To investigate further, I meticulously calculated the storage used by all folders

    • Announcing 12 new connectors in Zoho DataPrep

      We’ve just made data management even easier - Zoho DataPrep now supports 12 new external connectors to help you build more robust, scalable ETL pipelines. Why it matters: ✅ Broader data access ✅ More automation, less manual work ✅ Smarter pipelines, better

    • Zoho Books | Product updates | June 2025

      Hello Users, We’ve rolled out new features and enhancements in Zoho Books, from the option to record advances for purchase orders to dynamic lookup fields, all designed to help you stay on top of your finances with ease. Introducing Change Comparators

    • Zoho Books API Creating Invoice and Address API

      I'm trying to create an invoice with zoho books api and i get the following error: Error creating invoice in Zoho Books: { message: 'Request failed with status code 400', details: { code: 15, message: 'Please ensure that the "billing_address" has less

    • Missing Payload Details

      Hi All, Does anyone know how to fix missing webhook payload data in the next step of the flow? Payload comes into the webhook -- All details here When i go to use the webhook data in the next step -- the majority of the payload data is missing

    • Numeric options in Decision

      Zoho really needs to add options for numeric comparisons in the Decision action. These are the ones that should be implemented: Greater than Less than Greater than or equal to Less than or equal to Equal to (although this is actually handled already)

    • Supercharge your VoC analyses with data from anywhere: Modules are now sources for VoC

      Dear customers, We hope you're well! Your customers talk about your brand, praise your service, criticize your offerings, or promote your business—literally from anywhere on the internet—and it has become strategically necessary to factor in all possible

    • Populate drop down field from another form's subform

      Hello, I found how to do that, but not in case of a subform. I have a Product form that has a subform for unit and prices. A product might have more than one unit. For example, the product "Brocoli" can be sold in unit at 3$ or in box of 10 at 25 $. Both

    • Better Security, Better User Experience | Help Center Update | June'25

      As part of our commitment to enhancing user experience and security, we are happy to announce updates to our authentication mechanism. This update introduces several key enhancements designed to improve the password recovery process and streamline the

    • Anyone Building AI-Based SEO Dashboards in Zoho Analytics?

      Hey everyone, I’m currently working on an SEO reporting dashboard in Zoho Analytics and looking to enhance it with AI-based insights—especially around AI visibility, keyword trends, and traffic sources. The goal is to track not just traditional metrics

    • Nouveautés Zoho Flow - Intégration SAP S/4HANA et SAP HANA

      Bonne nouvelle! Deux applications très attendues dans la galerie d’intégrations de Zoho Flow sont désormais disponibles : ✨ SAP S/4HANA ✨ SAP HANA Que vous gériez des opérations d’entreprise ou des systèmes de données, ces intégrations vous permettent

    • Record/edit view to pop-up simultaneously with button click from report of a different form

      I have two forms: Form A & Form B. Form B contains all of the same fields of Form A, plus a few additional fields. I've created a button in the report view of Form A that creates a new record in Form B and populates all the applicable fields, (I've posted the code I used below), but visually nothing happens on the screen. If I want to finish filling out the remaining fields in Form B, I have to navigate to the report and open the record. How do I get this new record to just pop-up when I click the

    • How to get NSE/BSE Stock Prices in Zoho sheets?

      I've been looking for a function that provides me with the NSE/BSE listed stocks price in Zoho Sheets like GOOGLEFINANCE in Google sheets, but I found none. Please help if there is any way to het stock prices?

    • How to update "Lead Status" to more than 100 records

      Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, Jonathan

    • Zoho Project API search?

      Good day, i would like to search our entire portal for a task using the API. We have over 20k tasks so I dont to search for all tasks and then do a for each as it would take way to long and also would need to go over the limit of 200 records per query.

    • Cross module filtering is now supported in CRM

      Editions: All DCs: All Release plan: This enhancement is being released in phases. It is now available in AU, JP, and CN DCs. Help resource: Advanced filters The Cross-module filtering enhancement is now available to all CRM accounts in the following

    • Archiving Contacts

      How do I archive a list of contacts, or individual contacts?

    • 【参加無料】8月8日(金) 福岡 ユーザ交流会 参加登録 受付開始！

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 8月8日(金)に1年ぶりに、福岡でZoho ユーザー交流会を開催します！ ユーザー事例セッションでは、CreativeStudio樂合同会社の前田 美知太郎さまが、労働時間を削減したZoho活用のリアルな工夫を語ります。 Zoho社員セッションでは、データ収集から自動処理まで一気に効率化できるZoho Formsの最新活用アイディアをお届けします。 ▷▷詳細はこちら：https://www.zohomeetups.com/Fukuoka2025#/?affl=fuk2508forumpost

    • INVOICE DONT HAVE AN INCOME ACCOUNT FIELD TO POST TRANSACTIONS

      INVOICE DON'T HAVE AN INCOME ACCOUNT LIKE THE EXPENSE ACCOUNT FIELD IN THE EXPENSE MODULE. PLEASE CAN YOU TELL ME WHAT TO DO TO ADD THIS FIELD AND FUNCTION TO POST IT TO THE RIGHT INCOME ACCOUNT. THANK YOU VERY MUCH

    • Error in Deluge script, but all should be OK

      I get an error when using the following deluge script (sensitive info changed with ***). This script should parse a projectnumber out of the subject or body text and put it in a custom field of the ticket. The error: Validation failed for the condition

    • Problems with clipboard paste into ticket comments

      Problem as title. Using Chrome get to paste contents of clipboard but submit gives 'you've exceeded the character limit of 30,000 for this comment' irrelevant of actual number of characters. Edge just pastes txt 'undefined' irrelevant of actual contents of clipboard All other areas of Zoho desk work fine with clipboard paste (i.e. new ticket description) it's just comments on existing tickets that seem to have problem. Was all working fine until early yesterday (14th) Client is Windows 10 Pro 1803

    • Support Mixed Visibility Settings in Knowledge Base Categories

      Hello Zoho Desk Team, We hope you're all doing well. We’d like to submit a feature request regarding visibility settings in the Knowledge Base module. 🎯 Current Limitation As of today, when a category is set to a specific visibility level (e.g., Public),

    • Mapping Issue

      since, Tickets are already mapped with the Requestors and when we map Requestors with Organization, then Tickets are not visible under that Organization. Kindly solve this issue.

    • New features and improvements in Desk's integration with Zia powered by GPT 

      Hi everyone, We’re pleased to announce several new enhancements in Zia Powered by GPT integration. These updates bring more customization options, improved response generation, and additional language support. Below is an overview of the enhancements

    • Painéis do Zoho CRM ajudam na Gestão Comercial?

      A gestão do departamento comercial é uma questão fundamental para qualquer empresa. Uma boa gestão proporciona previsibilidade, alinhamento e melhores resultados. Acredito que todos que adquirem uma plataforma de CRM buscam uma gestão ágil e eficiente

    • Why don't we have better integration with Mercado Pago or Pagseguro?

      Currently, the integration between Zoho Commerce and Mercado Pago for Brazil is very poor... Since it is old, it does not include the main payment method in Brazil today, which is PIX. Is there a date for this to finally be launched? There are numerous

    • How to Bulk-Update Sales Orders in CRM

      Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to

    • Next Page