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

        • setting date-time field from string

          hello everyone, i hope someone could help me. i have a date-time field in a form that i want to fill in from two separate fields of date, and time. i need to combine the two fields to a one date-time field but can make it work. i tried to convert the

        • Calendars and CRM Contacts

          I'm finding having multiple calendars in Zoho One so confusing. I have a few questions so I can get this straight. We have a meeting room that we have set up as a resource in Calendar. Can this be set up in Bookings and the CRM Calendar? Using Zoho Calendar,

        • Announcing new features in Trident for Mac (v1.23.0)

          Hello everyone! Trident for macOS (v.1.23.0) is here with interesting features and thoughtful enhancements to elevate your workplace communication and productivity. Here's a quick look at what's new. Record your meetings. You can now record audio and

        • Applying a record template

          Hi all, I can't figure this out. I hope you can help. The scenario: We have learners who have to complete a 'digital' journal with tasks in order to qualify. Those tasks, once completed, need a final signature from their 'Mentor', which will trigger their

        • Quickbooks invoice with Zoho Creator

          Is it possible to push data from Zoho Creator directly to an invoice on QuickBooks? If so, where can I find information on how to do this?

        • Help: Capture full page URL in hidden field when same Zoho Form is embedded on multiple pages (iframe)

          Hi all, Goal Use one Zoho Form across multiple pages and record the exact page URL (incl. subdomain + path + hash) where the user submitted it. Example pages: https://www.example.com/cargo/ https://www.example.com/cargo/containers/#contact https://cargo.example.com/auto/

        • Automatically Populate fields - HELP!

          There have been many discussions on this but I still can't seem to get it to work for me. I am trying to create a lookup field and have other fields automatically populate. Based on the instructions in the Help Center, I should be using the "on user input". It's just not working, here is the layout...   Both forms are in the same application. Current form is called Add Note, form to fetch records from is called Add Client. Lookup field is called Select_Client_ID related field in fetch form is called

        • Push notifications to portal users

          Hi all, it is possible to send push notifications to portal users?

        • Rename the attachment from record template pdf in the sendmail deluge script

          Hello Zoho, I urgently need a feature to rename record templates that I send via the sendmail feature. The program I created sends emails to clients with an invoices that have been created in the invoice database. If the user selects 3 invoice numbers,

        • Alt Text On Multiple Images

          I'm using Zoho Social to post to a charity website. Often the posts have multiple images, but it seems there is only one field for Alt Text. Does that mean I can only include it for the first image? Or is there a way to add alt text for all the imag

        • [SOLVED] Getting 401 when trying to download ticket attachment via API

          I'm able to use the API just fine to access ticket content. But I cannot download ticket attachment, keep getting 401 Client Error. Example: https://desk.zoho.com.au/api/v1/tickets/{ticket_id}/attachments/{attachment_id}/content?orgId={org_id} For headers,

        • Zoho project – Workdrive integration.

          Hello everyone, I was wondering something, we did the Zoho projects integration with Zoho Workdrive but nowhere during this integration we could set the location of the folders that would be automatically created in Workdrive. As I understand it, it creates

        • Scriptを埋め込みたくてOn User Inputを探しているのですが・・・

          編集モードで、Scriptを埋め込みたい項目を選択し、「項目のプロパティ」パネルで、その下のほうに「フィールドアクション（Field Actions）」という見出しがあると聞いたのですが、そもそも、それが見つかりません。そのために、On User Inputなどのイベントが選べません。 画面の英語を日本語に訳しているためにわけわからん状態になっているのかも知れませんが、わかる方、いらっしゃいますか？

        • Problem with cloud query exceeded

          When making a call I get this error, It is associated with a function in node that calls external APIs This is the code //tokenConsultar = thisapp.ObtenerToken(); //input.token = tokenConsultar.get("output").toMap().get("token");

        • Showing Total of Funnel Chart Legend (With Values) Items

          Hi, We are using the funnel type chart for displaying our zCRM sales pipeline stages and associated sum of deals in each stage.  We have configured the legend to show the associated value (Deal Amount (Sum)) for each stage adjacent to the legend items (Stages). Is there a way to display the total of the values in the same chart?  For example, at the bottom of the legend or maybe as a #merge placeholder in the legend title?

        • How to Convert VCF Contacts to CSV using Excel

          Many users switch from traditional address books to digital formats like vCard and CSV. These formats allow users to easily manage their contacts. However, a difficulty comes when you need to transfer your contact information to another application or

        • Field authorization for Linking module in Zoho CRM portal

          Hi guys! Currently building a customer portal for one of my clients, and I ran into a bit of a roadblock while using a multi-select lookup field. The issue is that there is no way to hide or define access in the linking module created by this multi-select

        • Kaizen #63 - Layout Rules in Zoho CRM

          Hello and welcome to another week of Kaizen! This week, we will be discussing Layout Rules in Zoho CRM. If you need to modify the layout of a module based on user inputs, or to show or hide sections based on the value of a specific field, we have got

        • Zoho CRM Portals - allow access per account

          Hello all, I am trying to set up a portal for our customer but I seem to be hitting an obstacle and I am not sure if it is my problem or a limitation in the software. So basically the way I understand the portal Contact Email > Each Record or Related

        • Android - Writer não acentua em Português com teclado bluetooth

          Gosto muito do Zoho, tanto o Note quando o Writer. Infelizmente, o Writer sofre de um problema sério: ao usar um teclado bluetooth, forma mais cômoda de lidar com um processador de texto, os acentos (todos!) da Língua Portuguesa não são aceitos. Todos

        • Set File Upload fields as mandatory

          Currently the CRM for some reason lacks the ability to set a file upload field as mandatory So we have an issue We have a requirement that before a Deal stage is set as Deal is Won the member needs to upload a file Now for some weird reason in Zoho I

        • Editing HTML in Zoho CRM Email Template

          I am trying to create a template within the CRM email option, but need to be able to use custom HTML. There does not seem to be a way to do so.

        • Ability to CC on a mass email

          Ability to CC someone on a mass email.

        • How to make attachments mandatory

          I want the user to be unable to mark an opportunity as Closed – Won if it doesn’t have any attachments. I’ve already tried client scripts and functions, but nothing worked.

        • SLA Ticket Report

          From data to decisions: A deep dive into ticketing system reports Service level agreement (SLA) ticket reports in a help desk system are crucial for ensuring that services are delivered according to established commitments. They help maintain accountability

        • Zoho Backstage - PCI Compliance / Web Security

          I have a couple of questions related to Backstage and payment processing.... 1. my purchasing division is not giving approval to use Backstage yet because of some security issues. In order for us to take payments via a payment gateway like Authorize.net

        • Zoho Tables August 2025 Update: Faster and Smoother

          We’ve been working behind the scenes to make Zoho Tables faster, lighter, and more reliable. Here are the highlights: Faster Response Times Optimised the way responses are generated. Reduced memory consumption by 20–25%, leading to smoother performance

        • Video Upload from app says "unsupported aspect ratio" but is verified to be correct.

          I and my social media person are experiencing a problem where Social will not accept video uploads to Instagram. The error we receive is "unsupported aspect ratio" but looking directly at the file in question we see that the width and ratio both match

        • Disposable Email Addresses

          Dear zMail Team, Can you also bring out a few disposable email addresses for each accounts? That way occasional registrations and imminent spam from them can be largely solved right? ---- Deepak Vasudevan http://thamizhththendral.blogspot.com/

        • Zoho sheet - Zoho expense

          I want to schedule to create an expense using Zoho Sheet and flow. That is the EMI that I pay on a particular date to the bank and should be itemised, like principal and interest on the loan. Can someone help me in this regard??

        • Ability to configure a schedule/shift for each user and/or crew in Zoho FSM

          Hello, In our team of Field Agents, we have different shifts. Some field agent always work from 7:00 AM to 4:00 PM while others work the evening shift like 4:00 PM to 11:00 PM. Sometime shift are on weekdays only or on weekend. It would be great to be

        • Free webinar: Streamlining customer service paperwork with the Zoho Sign extension for Zoho Desk

          Hello Everyone! Have you been wondering about bridging the gap between digitised customer service and business paperwork? Join our free webinar to learn how you can do this by connecting Zoho Sign, our digital signature app, with Zoho Desk, our online

        • Zoho Books | Product updates | July 2025

          Hello users, We’ve rolled out new features and enhancements in Zoho Books. From plan-based trials to the option to mark PDF templates as inactive, explore the updates designed to enhance your bookkeeping experience. Introducing Plan Based Trials in Zoho

        • Mail Search should allow grouping by conversation like Gmail.

          Having switched from gmail I have found the search function hard to use. Mostly because mail is not grouped by conversation in search. If I search for a word when looking for a conversation had with someone then sometimes 10 emails will come up from the

        • Improve Zoho Learn updated article notifications

          I noticed today while updating an article, that the notification users get says "[User Name] has published article [Article Name]..." My feedback to the product team is that it would be really helpful for an end user, if the system notification differentiated

        • Safari Support

          Safari, the world's second largest browser, zoho desk does not officially or fully support. That needs to change.

        • Can I get images from an "Image Upload" field in a webhook?

          I want to send images from 2 "image upload" fields via a webhook. Is this possible?

        • Ticket closure notification - all contacts cc'd on email thread

          Hello, If a client sends an email to our service desk and cc's in other people that work at the same company - so that they are in the loop of the service request. When the we close the ticket, only the ticket owner (person who emailed us - which created

        • Inactive account cleanup policy for Zoho Sign

          Zoho Sign reserves the right to delete accounts that are license free and inactive for more than 120 days. The account deletion will be initiated only after the user receives prior email notice about possible data deletion and how to backup the data.

        • Missde API documentation for Sales Receipt

          Hi! I noticed that the Sales Receipt endpoint is not currently listed in your API documentation (https://www.zoho.com/books/api/v3/introduction/). Could you please provide any available temporary documentation for this endpoint, along with a detailed

        • Next Page