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

    • Is there a way to show contact emails in the Account?

      I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail

    • LinkedIn RSC is now live in Zoho Recruit

      LinkedIn Recruiter System Connect (RSC) is here. Your Zoho Recruit data (candidates, jobs, notes, stage updates, resume attachments, and more) now syncs with LinkedIn in real time. Note: LinkedIn RSC is included with your LinkedIn Recruiter Corporate

    • Managing Shopify Payout Balances in Zoho Books

      I am recording my Shopify orders as Invoices and once Shopify credits my bank account I reconcile the payout to the specific invoices and create a new transaction to account for the Shopify Merchant Fee. That is fairly straightforward to me. How should

    • Charging for WhatsApp replies starting in October 2026

      Meta has announced that it will charge for reply messages on WhatsApp starting October 1, 2026, and the free 24-hour window will no longer exist. How will Zoho SalesIQ handle this billing? https://developers.facebook.com/documentation/business-messa

    • Upcoming Change: Increased character limits for module and field labels

      To provide greater flexibility in customizing your CRM, we are increasing the maximum character limits for module labels and field labels in Zoho CRM. What's changing? Label Current Limit New Limit Module Label 25 characters 50 characters Subform Module

    • Creating Email template that attaches file uploaded in specific field.

      If there's a way to do this using Zoho CRM's built-in features, then this has eluded me! I'm looking to create a workflow that automatically sends an email upon execution, and that email includes an attachment uploaded in a specific field. Email templates

    • SPAM (and some other) folders missing on three of my Zoho Mail accounts

      I have four email accounts with Zoho Mail. Three days ago, the Spam folder on three of these accounts vanished. It is gone on the Windows and Linux desktops as well as the web-based and Android versions, and I have tried it on multiple machines. The only

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • Error 1011 saving website personalisation — blocking all changes (corrupted "home_page.content" field)

      When trying to save changes under Settings → Brands → MY COMPANY → Website → Personalisation → Messenger, I receive the following error: "Either the request parameters are invalid or absent" upon checking on the developer console of the browser I get

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

    • Zoho CRM - Email/Message icon for Deal List View

      Hi Team, My idea is to include a message icon at the start of the row of Deals when an unread message has been received. This would really help highlight the Deals where urgent action is required. Thanks for considering this request. Regards, Ashley

    • 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

    • HR Helpdesk Cases

      We have Zoho One Enterprise. I'm trying to find HR Helpdesk Cases, but my UI does not match the documentation. I'm not sure how to move forward.

    • Tip #7 - Siri shortcuts in Zoho CRM

      Hello Everyone, Here is a tip about the 'Siri Shortcuts' feature and how it works in the iOS version of the Zoho CRM mobile app. What are Siri shortcuts? Siri Shortcuts are quick actions across your apps on iOS. They can perform an action automatically

    • Automatic Department and Employee Sync Between Zoho One and Zoho People

      Dear Zoho Support, I'm writing to propose a valuable feature request that would streamline data management and improve user experience within the Zoho ecosystem: automatic synchronization between departments and employees in Zoho One and Zoho People.

    • Nothing triggers a Journey

      I have been on the phone with Zoho support and they claim their development team needs to investigate more. However, I've found this is a pretty standard answer after a call takes any amount of time. After that, it's days and even weeks before it actually

    • Manually Backorder Sales Order and/or Change Sales Order Status

      Is there an option to manually 'backorder' a sales order, or otherwise change it's status?  In some cases, we receive orders for products that are out of stock, but we already have issued POs to our suppliers for replenishment.   Ex- we created a PO on

    • Backorder process review - Automating Removal of Sales Order from "On Hold" When PO is Received

      Hello Zoho Inventory Team, Currently, sales orders in On Hold status are released only when the bill for the purchase order is created. In our workflow, it would be much more efficient if the sales order could automatically move out of On Hold as soon

    • Kaizen #254 - Building a Temporal Lead Score Decay System in Zoho CRM

      Hello, CRM Wizards! Welcome to a fresh week of Kaizen. In this post, we will build a temporal lead score decay system that works alongside your existing scoring rules by introducing percentage-based score decay driven solely by customer inactivity. By

    • Metadata API Access to Functions

      I think it would be incredibly helpful to have api access to every function's code. Our team primarily uses deluge functions to update fields across modules according to business logic. I would like to create a visual dependancy model for our CRM, but

    • API actions/approvals endpoint returns UNAPPROVABLE despite user having full permissions and being the assigned approver

      Hi Team, We are trying to programmatically approve a record via the CRM API but consistently receive an UNAPPROVABLE error, even though the same user can approve the record without issue from the UI. Endpoint called: POST https://www.zohoapis.com/crm/v6/{module}/{record_id}/actions/approvals

    • Get a realistic picture of your revenue with Forecast Adjustments in Zoho CRM

      #crm25q1 Dear Customers, We hope you're doing well! Today, we're here with an important enhancement for business decision makers: forecast adjustments. Let's get straight to it! With technology on the rise and CX at its core, businesses are constantly

    • I am not able to check in and checkout in zoho people even location access allowed

      This issue i am facing in mackbook air m1, I allowed location in chrome browser and i also tried in safari but getting similar issue. Please have a look ASAP.

    • WhatsApp Vendors Module

      Hello, so WhatsApp works with the below, mainly with the customer side modules. Can we get functionality on the vendor side modules, i.e., PO, Bills, Vendor Credits, Payments Made, Purchase Received? WhatsApp is often the preferred method of communication

    • Upload ticket attachments via Drag-&-Drop

      Hello, if you want to upload a file to the ticket attachment you need to click the button and use the file browser to select and upload the desired file. In many cases, it would be much more efficient if you could simply drag the file to the browser window...

    • Introducing parent-child ticketing in Zoho Desk [Early access]

      Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

    • Elevate your Radar experience: Best practices part 3

      In the Spotlight: Zoho Desk's Radar app Customer support requires human intelligence combined with emotional intelligence. How about these coupled with contextual intelligence? These elevate the customer support experience. When providing support through

    • Migrating my email from GMAIL to ZOHO MAIL..........

      I am a long time GMAIL user and I really only understand how they operate, but after reviewing your tutorials and forums online, it is quite unbelievable how much more and how much more streamlined ZOHO mail is, not to mention ZOHO's wonderful, more advanced capabilities. I do have several questions about transitioning over to ZOHO.  Primarily, where is the best place to start, what do I do first? And how hard is it actually to move all my business and personal accounts over here?  When I sign up

    • Unable to send message;Reason:553 Relaying disallowed. Invalid Domain

      Hi, Now when I try to reply to an email, I see the Unable to send message;Reason:553 Relaying disallowed. Invalid Domain voicemessagedownloader.com error. I tested sending an email when I set it up in the past and it worked. I have checked the Zoho Organization

    • RFID Scanner/Adapter Solution for barcode scanning

      Hello, We will be trialing using barcode scanning for item verification during our picking process. Using a phone or a tablet is awkward and uncomfortable. Are there any Zoho compatible RFID scanners, or an RFID device/adapter that will connect with a

    • Approval Process not retriggering after rejection when stage is manually changed back

      We have an Approval Process on the Opportunities module that triggers when Stage is changed to Negotiation (Execute on: Edit Only). On rejection, a field update action reverts Stage back to Proposal. The issue: after rejection, AE can manually changes

    • Free Webinar Alert! Workdrive + Office Suite in Zoho Workplace: Create, co-edit and collaborate

      Hello Zoho Community! Looking for a better way to create, manage, and collaborate on your business documents? Join our upcoming webinar to discover how Zoho WorkDrive and the Zoho Office Suite (Writer, Sheet, and Show) help teams to work together from

    • Updating Sales orders on hold

      Surely updating irrelevant fields such as shipping date should be allowed when sales orders are awaiting back orders? Maybe the PO is going to be late arriving so we have to change the shipment date of the Sales order ! Not even allowed through the api - {"code":36014,"message":"Sales orders that have been shipped or on hold cannot be updated."}

    • Two-Factor Authentication in Zoho Mail: Add an extra layer of security to your organization

      Account security is a critical aspect of managing any organization's email. With increasing risks of unauthorized access, a single password may not always be sufficient to keep accounts protected. Zoho Mail's Two-Factor Authentication (TFA) addresses

    • Dark Mode - Font Colors Don't Work

      When editing a document in Dark Mode and selecting font colors, they don't show up on screen.  Viewing/editing the same document in Light Mode shows them just fine.

    • API to post drafts for social media

      I we want to post draft posts to our zoho social account and then approve and schedule them within Zoho social. is this possible with for example: https://apis.zoho.com/social/v2/post TIA Jon

    • How to show product cards in your chatbot

      Hey everyone, If you are using Guided Conversations to help customers find products, you have probably run into this problem: the bot gives customers a list of options, but they still have no idea which one to pick. There will be no images, no specs,

    • Changing settings for auto logoff

      I've noticed that when I haven't used Cliq for a while, I have to re-enter my password. That is really clumsy, especially if you have a complicated password. Because it won't be filled in automatically. Is there a way to change that behaviour? We are

    • How do you create invoices before sending them through Zoho Invoice?

      Hi everyone, I'm curious how other businesses handle their invoicing workflow before sending invoices through Zoho Invoice. Do you: Create invoices directly inside Zoho? Prepare them first in another invoice tool or template? Use Excel or Word before

    • ZML Error/Bug

      Hi, I would like to request for your help regarding this kind of behavior. Requested_Start_Time & End_Time - date-time fields https://......#Page:PH_Calendar_Page?reqDate=08-04-2026 https://......#Page:PH_Calendar_Page?reqDate=07-31-2026 https://....#Page:PH_Calendar_Page?reqDate=08-03-2026

    • Next Page