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

    • Powering Customer Support with our women

      In Zoho Desk support, women make up 50% of our team. We see this as one of our strengths, reflecting the spirit of this year’s theme, "Give to Gain". Our women find their balance Women carry many responsibilities — they represent frontline support, lead

    • Can't rename groups on Mac desktop app

      I'm working on an up-to-date Mac with a freshly downloaded Notebook app. I'm trying to rename a group within a notebook. Here I have, left to right, a note, a group, and a note. I select the group. On the top left, I select Action. On the dropdown, "Rename"

    • Zoho Forms - Feature Request - Year Field

      Hi Zoho Forms Team, You currently have the following date and time fields: Date Time Date and Time Year and Month It would be useful if you could include a "Year" field For example a recent application I completed said "What year was your house built?"

    • I need help to take Reports for tickets moved between departments.

      Hi, I need help to take Reports for tickets moved between different departments. Pls guide Shyam

    • Export to excel stored amounts as text instead of numbers or accounting

      Good Afternoon, We have a quarterly billing report that we generate from our Requests. It exports to excel. However if we need to add a formula (something as simple as a sum of the column), it doesn't read the dollar amounts because the export stores

    • Increase Round Robin Scheduler Frequency in Zoho Desk

      Dear Zoho Desk Team, We hope this message finds you well. We would like to request an enhancement to the Round Robin Scheduler in Zoho Desk to better address ticket assignment efficiency. Current Behavior At present, the Round Robin Scheduler operates

    • Automation #6 - Prevent Re-opening of Closed Tickets

      This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Typically when a customer submits

    • Zoho Desk EU slow/unresponsive

      Has anyone else got issues with ZohoDesk today in the EU? It takes an age to come back and if you do start typing something and try and send or save it looks like it times out. We are also getting this pic. ot I can't see anything on https://status.zoho.eu/

    • EU DC Partial Outage Resolved: A Detailed RCA

      Incident Summary Due to an overload on one of the nodes in the EU DC for Zoho Desk, the system was unable to handle the heavy load, causing a slowdown in requests and resulting in a partial outage for customers with data residing in that node. On May

    • Use Zoho Creator as a source for merge templates in Zoho Writer

      Hello all! We're excited to share that we've enhanced Zoho Creator's integration with Zoho Writer to make this combination even more powerful. You can now use Zoho Creator as a data source for mail merge templates in Zoho Writer. Making more data from

    • Perfomance Management - Zoho People

      Hi team, I am looking for performance management data such as KRA, goals, feedback, appraisals, etc., in Zoho Analytics. However, I am unable to find these metrics while editing the setup. Could you please confirm whether these fields are available in

    • Deprecation of the Zoho OAuth connector

      Hello everyone, At Zoho, we continuously evaluate our integrations to ensure they meet the highest standards of security, reliability, and compliance. As part of these ongoing efforts, we've made the decision to deprecate the Zoho OAuth default connector

    • Good news! Calendar in Zoho CRM gets a face lift

      Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities

    • Zoho - Please explain difference between Thread view and Conversation view on Ticket

      I have reviewed the help document here but am still not clear on the difference between the two views. As an example, I just had a back and forth on a ticket: - Customer emails support email. - I email back from Desk. - Customer responds back. - I email back from Desk. On the upper left drop down box on the ticket Zoho Desk now says this is "4 Threads" and "4 Conversations" . How is that 4 threads?? By my count it is 1 thread and 4 conversations (assuming by "conversation" Zoho means number of total

    • Mobile phone version not working well

      I am working on the Zoho Site Builder. In the preview the desktop version looks okay, but in the mobile phone preview many words are cut off in the weirdest (wrong) way. How can I fix that?

    • Zoho Mail iOS app update: Display recipient's nickname on contact suggestion

      Hello everyone! In the most recent version(v3.3.1) of the Zoho Mail iOS app update we have brought in support to display recipient's nickname in contacts suggestion. Please update the app to the latest version directly from the App Store or using the

    • Digest Février - Un résumé de ce qui s'est passé le mois dernier sur Community

      Bonjour chers utilisateurs, Le 26 février, nous avons organisé notre première session Ask the Expert de 2026. Nous sommes heureux de partager que ce fut une session très interactive, avec de nombreuses questions intéressantes posées par nos clients. Si

    • Zoho CRM Case Notes - Share to Customer

      Hi team does anyone know the Api to set a note, against a case, to shared with customer? i cant seem to find it  cheers 

    • Zoho Forms - Feature Request - Past Into Scanning/OCR Field

      Hi Zoho Forms Team, You recently introduced the OCR/Scanning field which I have found great use for with one client who receives work orders as a screenshot from one customer. I want to raise a feature request here which would make that field even more

    • Synching changes to Stripe when changes are made in Zoho Billing

      We have a situation where we have merged customers in Zoho BIlling and then found out later that the payment in Stripe was not updated and still associated with the old customer record. The card gets updated and billed, but that payment is still associated

    • Send out follow-up email in the same thread (threaded conversations in individual emails) from Zoho CRM

      Hi, I'm new to Zoho. I'm trying to send individual emails to my leads one by one. And I'll send out follow up email if I don't hear back from them later. However, instead of sending a new email, I want to reply in the same email thread so that the recipients

    • Depositing funds to account

      Hello, I have been using Quickbooks for many years but am considering moving to Zoho Books so I am currently running through various workflows and am working on the Invoicing aspect. In QB, the process is to create an invoice, receive payment and then

    • Is Zoho Sites still actively being developed?

      Hello, Is Zoho Sites still actively being developed as part of the Zoho ecosystem? I noticed that the What's New page (https://www.zoho.com/sites/whats-new.html) does not show any updates since Q1 2025. We were considering migrating our website from Squarespace

    • FSM integration with Books

      Hi, I have spent a few months working with FSM and have come across a critical gap in the functionality, which I find almost shocking....either that, or I am an idiot. The lack of bi-directional sync between Books and FSM on Sales Orders/ Work Orders

    • web to lead

      Can anyone help me how to create web to lead from zoho marketing automation

    • Introducing Workqueue: your all-in-one view to manage daily work

      Hello all, We’re excited to introduce a major productivity boost to your CRM experience: Workqueue, a dynamic, all-in-one workspace that brings every important sales activity, approval, and follow-up right to your fingertips. What is Workqueue? Sales

    • UI issue with Organize Tabs

      When looking at the organize Tabs window (bellow) you can see that some tabs are grayed out. there is also a "Add Module/Web Tab" button. When looking at this screen it's clear that the grayed out tabs can not be removed from the portal user's screen

    • I created a signup form in Zoho Marketing Automation with the correct field mapping, but the data is not being reflected under Leads in Zoho CRM.

      web to lead from zoho marketing automation

    • Pasted Images not being embedded in custom mail

      Hi, I'm making a custom report by email based on commentaries. I have the email ready, all working great except for images that are being pasted in the commentaries. Zoho deals with them as temp images and so it requires authentication to view them, something

    • Kaizen #232 - Building a Ticket Escalation Mechanism from Zoho CRM

      Howdy, Tech Wizards! Picking up the thread from last week, we will continue our Zoho CRM and Zoho Desk integration. In Kaizen #231 - Embedding Zoho Desk Tickets in Zoho CRM, we built a Related List widget that displays open Zoho Desk tickets within the

    • Inactive License for free account.

      I recently upgraded my Cliq subscription not my team (on the free version), are unable to login to their accounts. The error message received is Inactive License Looks like you have not been covered under the current free plan of users. Please contact

    • Deluge scripts

      Why is there not a search function to make it easier to find the script of interest when modifications are required.

    • Zoho Sheet for Desktop

      Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

    • Zoho Books (and other Finance Suite Apps) - Clickable Item Name on Invoices and Reports

      Hi Zoho Books team, It would be really helpful if the Item Name on Reports were clicable to take me to the item. The same on Invoices, often I am looking at an invoice and I want to look at the deails of a product. A link here would be helpful to jump

    • Zoho Books - Payment Gateway - Revolut

      Hi Books Team, My feature request if to include the popular platform Revolut as a payment collection option on invoices in Zoho Books. Please upvote if you are also looking for this option.

    • Searching for an item from within an invoice should show any item containing the string, not just those that begin with the string.

      Hello, I've found myself becoming increasingly frustrated with the limited line-item seach when adding new items to an invoice. The problem is that the characters being typed are only being matched from the beginning of the item name.  This might be usable

    • How to Rank Tables by Row Count in Descending Order

      I am trying to understand the consume of lines that grow up so fast in the last week. Is there any way to create a pivot table or query to get TABLE NAME LINES in descending order?

    • Dealing With One-Time Customers on Zoho Books

      Hello there! I am trying to figure out a way to handle One-Time customers without having to create multiple accounts for every single one on Zoho Books. I understand that I can create a placeholder account called "Walk-In Customer", for example, but I

    • Marking a meeting 'done'.

      I would like to somehow mark a meeting 'done' and placed under the contact's page rather than deleting it and having no record of it. Am I missing a button that does this?

    • Feature Request: Render Markdown (.md) files in Zoho Cliq

      Hi, We regularly share Markdown (.md) files in Zoho Cliq. However, when we open these files in Cliq, the content does not render as Markdown—it displays as plain text. This forces us to copy/paste the content into an external Markdown viewer to read it

    • Next Page