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

    • WorkDrive API: allow the modification time to be set when updating an existing file (x-last-modified-date is honoured on create, ignored on update)

      Hi, I contribute to the Zoho WorkDrive backend of rclone, the open-source sync/copy tool. I would like to raise one specific, narrow API gap that currently makes reliable syncing to WorkDrive impossible, and ask whether it can be addressed. What already

    • WhatsApp Coexistence

      Hello, please implement WhatsApp Coexistence, we need to track staff whatsapp chats on their PC and they need to be able to use WhatsApp on their mobile in around the office and warehouse, as we video call customers and send them product pictures. Thank

    • Kiosk / CRM Timezone Oddity

      I grant you this is much easier to see than to explain, and snapshots here won't help much and I don't want to snapshot my record anyway in a forum, so bear with me... Effectively... As there had been discussions on times coming through in different timezones

    • Restricted Account - "This user is not allowed to add in Zoho" - citbinvestment.com.

      Hi Zoho Support Team, I am attempting to set up user mailboxes for my domain citbinvestment.com, but I am receiving the following error: "This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details." > My MX, SPF,

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • Contact Sharing: Hide email alias from global address list

      As the superadmin, I would like to hide my domain aliases from appearing in the global address list. Currently, my end users can see all my aliases. The aliases also appear as type-in addresses when composing a new email. This is a potential security

    • Zoho Projects - Linking CRM Deals to Projects via API without sending customer contact email invitation to project portal

      We are using the Zoho CRM and Zoho Projects APIs to automatically create a project in Zoho Projects and then associate that project with the relevant Deal in Zoho CRM. The API process is working in that the project is created successfully and appears

    • Incorrect Currency Shown

      On Bills, each line shows the rate in the wrong currency (home currency).

    • Ability to filter services and parts based on a field in the Work Order

      Hell FSM team, We have a customer with 2 value streams using Zoho FSM. Each value stream uses different products, at different price point. Currently, all of the products are accessible when creating a work order and modifying a service appointment, which

    • This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • [Free webinar] Beyond prompt-to-app: Vibe coding with Zoho Creator | Creator Tech Connect (October 2026)

      Hello everyone, We are excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar consisting of purely technical sessions, where we dive deep into

    • Zoho Recruit Staffing version Interview using Zoho Meeting

      I would like to understand whether Zoho Meeting has a native integration with Zoho Recruit – Staffing Edition. As of now, I am unable to find the native Zoho Meeting integration within the Staffing Edition of Zoho Recruit. Could someone please confirm

    • Payroll needs to automatically remit taxes, not just give me the calculations

      Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

    • New enhancements to user management

      Hello everyone, We're excited to introduce a few enhancements to user creation and user preferences in Bigin! These updates give administrators more flexibility while inviting users, and give users more control over how their data is displayed. With this

    • Public dashboard table does not load in mobile view - TypeError reading 'viewType'

      Our public dashboard links have worked for years. We made no changes. Now the table widget does not load on mobile browsers. It loads fine on desktop, and it loads on a phone when we use "Request desktop site." Chrome DevTools shows this error in mobile

    • Cannot format "start date" field in Zoho Flow

      I am trying to recreate a flow that connects Inventory package creation to Zoho projects (where a task is created in a defined project). I've been able to troubleshoot everything EXCEPT the date fields; specifically the "start date" - which is quite important

    • Bank Transactions page shows too few transactions due to large header area

      In the Banking → Uncategorized Transactions screen, a lot of vertical space is being used by the account header, balance details, tabs, buttons, etc. Because of this, on a normal desktop screen I can see only around 2 transactions at a time, even though

    • Zoho Mail Android app update (v3.6.5) - Enhancements in Email Composer and Google Meet support

      Hello everyone! We are excited to introduce new enhancements in the Zoho Mail Android app (v3.6.5). Let's dive into what's new. Drag and drop email addresses between recipient fields You can now drag and drop the email addresses across the recipient fields:

    • Migration from QuickBooks to Zoho Books for the U.S. Company

      Is there any automation tool available to migrate data from QuickBooks to Zoho Books for a U.S.-based company? If yes, could you please provide the details?

    • Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México

      Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México Hola equipo de Zoho, Durante los últimos meses he observado una necesidad recurrente entre varios clientes en México relacionada con el cumplimiento fiscal del

    • Introducing Zoho Key Service, a simpler way to access LLMs without API keys

      Available in the Professional, Enterprise, and Ultimate editions in the US, IN, AU, JP, and CA DCs. Hello everyone, We are excited to bring Zoho Key Service (ZKS) in Zoho CRM, a simpler way for organizations to access and use third party LLMs. You can

    • Single Folder Archival in Zoho Mail

      Dear Zoho Mail Community, Have you noticed and wondered what the banner is about in your Zoho Mail's Archive Policy Settings? In Zoho Mail, users have traditionally archived emails to keep their inbox and active folders clean. While this helped reduce

    • Trigger Workflow Rules from subform row actions

      Hello all, Previously, workflow rules could only be configured at the module level, which meant subform data had to be tracked and managed manually. With this update, workflow rules can now be triggered directly by actions within subform rows, giving

    • Create a single record from multiple images with ICR

      Hello all, Zia's Intelligent Character Recognition can now create a single record from multiple images. Users can upload up to three images at once, such as an ID, a passport, and a business card, and Zia will extract the relevant information from all

    • Free Plan mail accounts details

      In the zoho mail pricing there's a free plan that includes: FREE PLAN Up to 25 Users 5GB* /User, 25MB Attachment Limit Webmail access only. Single domain hosting. I need to make sure that I'm able to create multiple email accounts in the form of: name@domain.com

    • can not use my zoho mail

      i bouht domain( avta group.com) and set up mail(Avtar@avta group.com) but i cannot receive or send emails . can you please help out.

    • Display Issues

      Hello, Our company just changed General Managers and the other one was the super admin. Since deleting his profile and making our new General Manager the super admin there have been ongoing issues. One in particular, is when creating estimates, sales

    • Introducing Night Mode for Zoho Recruit [BETA]

      Late-night hiring sessions? Long hours reviewing resumes? We heard you. Night mode [BETA] is now available in Zoho Recruit, giving you a cleaner, more comfortable workspace that’s easier on the eyes while keeping the focus on what matters most: hiring.

    • Unblock ME

      info@pentekykloi.gr Unable to send message;Reason:554 5.1.8 Email Outgoing Blocked. Learn more. I purchase additional storage

    • Zoho Calendar integration for Bigin

      Hello everyone, We're excited to introduce Zoho Calendar's integration in Bigin! For a while now, users have been able to sync events in Bigin with Google Calendar and Outlook Calendar - but with this new topping, it syncs with Zoho Calendar as well.

    • Workflows, webhooks, and zero manual work: Your webinar operations, on autopilot

      Running a webinar is never just about going live. There's the flurry of registrations to track, attendees to follow up with, recordings to share, CRM records to update, and somehow, all of this has to happen on time, every time. Until now, most of it

    • Zoho Mail - More contextual actions on email list view

      Hi Zoho Mail team, I recently completed an email migration from Gmail to Zoho Mail and noticed a feature in Gmail that I think would be a great addition to the Zoho Mail interface. When you hover over an email in Gmail's list view, a number of quick actions

    • Supervisor Rules --> Custom Function

      Hello, currently I can't add a custom function to a supervise rule. Is there a reason for this? Background: We have BluePrint managed tickets and actually we have a Supervise rule which should set the ticket to "closed" after 168 hours since the last

    • Erro

      Subject: CRM Standalone Function creation returns INTERNAL_ERROR Hello Zoho Support, I am trying to create a Standalone Deluge Function in Zoho CRM for a lead intake REST API. The CRM account reports that the Standalone category is enabled, but function

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

      Bonjour chère communauté ! 👋 Le mois dernier a été riche en nouveautés, en échanges et en découvertes ! Retrouvez ici les contenus les plus utiles, les discussions les plus intéressantes et plus encore. En septembre, nous avons mis en lumière trois nouveautés

    • Email Forwarding to Zoho Desk Failing After Migration from Gmail to Outlook (Microsoft)

      We recently migrated from Gmail to Microsoft Outlook. Since the migration date, emails sent by our customers are no longer being received by Zoho Desk. I tried setting up the email forwarding rules in Outlook similar to what we had in Gmail, but it still

    • New Update: Convert External Users in Bulk in Zoho Directory

      Greetings to all Zoho Directory users out there! We’re excited to introduce a new update that makes user management in Zoho Directory even more efficient; you can now convert external users in bulk! Earlier, admins could convert only one external user

    • Presenting ABM for Zoho CRM: Expand and retain your customers with precision

      Picture this scenario: You're a growing SaaS company ready to launch a powerful business suite, and are looking to gain traction and momentum. But as a business with a tight budget, you know acquiring new customers is slow, expensive, and often delivers

    • How to import PST files in Office 365?

      You can import PST files into Office 365 using native Outlook applications, the Microsoft Purview network upload method, or specialized third-party migration tools. Choosing the right method depends on whether you are migrating a single mailbox or executing

    • API - Bank Accounts | Reconciliation Discrepancy

      Unless I'm reading it wrong, the documentation for the Bank Reconciliations API is inconsistent with itself. https://www.zoho.com/books/api/v3/bank-accounts/#create-a-bank-reconciliation The text definition says that the transaction_id should be a string,

    • Next Page