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

    • Syncing calendar with Google Calendar doesn't work when events are sent to auto repeat

      Hi... The ZOHO CRM -- GOOGLE CALENDAR sync is broken. If I create a single event on either side, sync works, but if I create an event with auto repeat on either side it doesn't work. Furthermore, events created before the sync don't show up in the calendar.

    • Invoice status on write-off is "Paid" - how do I change this to "Written off"

      HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

    • CRM gets location smart with the all new Map View: visualize records, locate records within any radius, and more

      Hello all, We've introduced a new way to work with location data in Zoho CRM: the Map View. Instead of scrolling through endless lists, your records now appear as pins on a map. Built on top of the all-new address field and powered by Mappls (MapMyIndia),

    • Creating meetings from an email

      Hi. Similar to Outlook, it would be helpful if a meeting can be scheduled from an email so that the attendees need not be manually entered every time it's created.

    • Please, make writer into a content creation tool

      I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather than

    • ZohoSalesIQ.Chat cannot send messages

      Chat cannot send messages. Our app implements the customer service chat window functionality by integrating the Mobilisten SDK. Recently, we encountered an issue: after successful SDK initialization and visitor registration, when the `startWithQuestion`

    • Missed chats on WhatsApp closing after one minute

      Hi, we have added WhatsApp as a channel. However, if a chat is not picked up within 2mins, the chat is marked as missed and is closed within a minute. Why are they not staying in our "missed" queue for 24 hours as per our WhatsApp preference settings?

    • Feature Request: Add Tax ID Display on Event Tickets

      Hello Backstage Team, I’ve had several clients bring up an issue regarding tax compliance when creating events. For tax purposes, they are required to show their Tax ID on the event tickets. Currently, this isn’t an option, so they have to manually generate

    • Release Notes | January 2026

      We have rolled out a set of powerful new enhancements across Zoho Vertical Studio that bring several long-awaited capabilities to your applications. These updates focus on deeper customization, smarter automation, better reporting, and improved usability

    • Email Alias: To keep emails flowing without disruption

      Email Alias acts like a nickname for a user’s primary email address, allowing multiple email addresses to deliver messages into the same mailbox. Consider the scenario where an employee manages multiple responsibilities, such as responding to sales inquiries,

    • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

      Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • Archive Option in Conversation View

      Hello, I have a suggestion\request to add an "Archive Thread" button in conversation view of Zoho Mail. The best suggestion I have is to put an "Archive Thread" button next to the "Label Entire Thread" button in conversation view. Most users don't just

    • Collapsing and expanding of lists and paragraphs

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

    • Automatic Refresh on Page?

      Hi everyone, We use a page as a dashboard which shows data for the laboratory and tasks pending etc. Is there a way to set the page to automatically refresh on a X time? Many thanks TOG

    • Inventory "Bulk Actions" button - add more fields to "Bulk Update > Select a field"

      Can we not get a lot more actions that are commonly used by customers into the "More Actions" button on the Inventory list? More fields listed in the Bulk Update > Select A Field? Possible Bulk update Fields Preferred Supplier ( to quickly move items

    • Bulk upload image option in Zoho Commerce

      I dont know if I am not looking into it properly but is there no option to bulk upload images along with the products? Like after you upload the products, I will have to upload images one by one again? Can someone help me out here? And what should I enter

    • Function #11: Apply unused credits automatically to invoices

      Today, we bring you a custom function that automatically applies unused credits from excess payments, credit notes, and retainer payments to an invoice when it is created. Prerequisites: Create a Connection named "zbooks" to successfully execute the function.

    • Tip #60- Exploring Technician Console: Screen Resolution- 'Insider Insights'

      Hello Zoho Assist Community! Have you ever started a remote session and felt the screen quality wasn’t sharp enough for detailed work? A new user recently explored Zoho Assist after installing the trial version and running a few initial tests. While the

    • Right Moment, Right Message, Right Operator: Never Miss a High-Intent Lead

      Ever been on a website or app, thinking “Should I buy this or not?” and suddenly a friendly message “Hi! How can I help you?” pops up at the perfect moment? That’s not luck. That’s timing done right. Engaging right visitors at the right moment, with the

    • CRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users

      Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storage

    • Zoho CRM Workflow Automation: Activate & Deactivate Workflows Using API

      Zoho has now enabled: ✅ Activate / Deactivate workflows using API ✅ Schedule workflow activation & deactivation This is extremely useful for real-world automation use cases 💡 🧩 My Use Case I created a scheduled automation that: ☀️ Activates workflows

    • {Action Required} Re-authenticate your Google Accounts to Continue Data Sync

      Hello Users! To align with Google’s latest updates on how apps access files in Google Drive, we’ve enhanced our integration to comply with the updated security and privacy standards, ensuring safer and more reliable access to your data. With this update,

    • Function #53: Transaction Level Profitability for Invoices

      Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.

    • Project-Based Inventory Consumption and Proforma Invoice in Zoho ERP

      While working with customers across different industries, we have identified a few functional questions and gaps that commonly arise—especially for project-based and service-oriented businesses. Many organizations, such as those in shipping, construction,

    • Power up your Kiosk Studio with Real-Time Data Capture, Client Scripts & More!

      Hello Everyone, We’re thrilled to announce a powerful set of enhancements to Kiosk Studio in Zoho CRM. These new updates give you more flexibility, faster record handling, and real-time data capture, making your Kiosk flows smarter and more efficient

    • [Free Webinar] Zoho RPA - OCR, PDF Automation, & More

      Hello Everyone! Greetings from the Zoho RPA Training Team! We’re excited to invite you to our upcoming webinar on the latest release updates for Zoho RPA, where we’ll unveil powerful new capabilities designed to make your automation journey smarter, faster,

    • Zobot Execution Logs & Run History (Similar to Zoho Flow)

      Dear Zoho SalesIQ Team, We would like to request an enhancement for Zoho SalesIQ Zobot: adding an execution log / run history, similar to what already exists in Zoho Flow. Reference: Zoho Flow In Zoho Flow, every execution is recorded in the History tab,

    • Capture Last check-in date & days since

      I have two custom fields on my Account form, these are "Date of Last Check-In" and "Days Since Last Contact" Using a custom function how can I pull the date from the last check-in and display it in the field "Date of Last Check-In"? and then also display the number of days since last check-in in the "Days SInce Last Contact" field? I tried following a couple of examples but got myself into a bit of a muddle!

    • Global Search Settings

      I'd love a way to remove some modules from being included in the global search. This would allow use to provide a better user experience, limiting the global search to only those modules that are regularly used removing any models used for background

    • Card Location in Zobot

      Hello, when using the “Location” card in a codeless builder Zobot, the behavior in WhatsApp is inconsistent. When asking the user to share their location, they can type a message, which will return the message “Sorry, the entered location is invalid.

    • Automation Series: Auto-create Dependent Task on Status Change

      In Zoho Projects, you can automatically create and assign a dependent task when a task’s status is updated. This helps teams stay aligned, ensures reviews happen on time, and reduces manual effort. In this post, we’ll walk through an easy setup using

    • Languages in Zobot

      Hello, I have found a list of supported languages for the Zobot. The information specifies the languages are supported in the following 3 features: SalesIQ supports 34 different languages in the following features. Resources (Articles, FAQs, Small Talks)

    • Composite items inside of composite items; bill of materials needed

      Hi Zoho and Everyone, I am evaluating whether Zoho Inventory will work for my small business. I grow and harvest herbs and spices but also get from wholesalers. I use all these items to make herbal teas, but also sell them as individual items on my Shopify store and Etsy. I discovered the composite item bundling and am wondering if I could get some assistance since there is no bill of materials: Our herbal company's best selling tea is a sleepytime tea. Sleepytime Tea can be purchased in three weights

    • Action required: Reauthorizing your Google account for automatic cloud backup to Google Drive

      This is applicable to users who have already configured automatic cloud backup to Google Drive. Hi there! Google has mandated reauthorization of all preconfigured third-party integrations to ensure only the necessary scopes are shared as an improved security

    • Zoho CRM Layouts

      I have customised all our modules, Leads, Contacts and deals, and within them, I have created lots of different layouts depending on the type of Lead or contact, for example. Since the new Zoho UI came out, they have all disappeared. I have gone into

    • Zoho Desk API - Send Reply to CUSTOMERPORTAL

      Hello! I'll try to send a reply to Customer Portal, But the response is 500 (INTERNAL_SERVER_ERROR in service response). {"Error":"{\"errorCode\":\"INTERNAL_SERVER_ERROR\",\"message\":\"An internal server error occurred while performing this operation.\"}"}

    • 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

    • WhatsApp IM in Zoho Desk always routes to Admin instead of assigned agent

      Hello Zoho Experts, I connected WhatsApp IM to my Zoho Desk account. I only assigned my Customer Service (CS) agent to the WhatsApp channel, and I did NOT include Admin in this channel. However, every new WhatsApp conversation automatically gets assigned

    • hide resolution from help centre

      to my surprise, i just found out that the resolution text is public in the helpcenter, even if 'notify customer' is off. is there a workaround to that? how do others deal with this? How zoho support does this and I don't think its used by Zoho in the first place. the resolution is meant to be private, not public

    • Next Page