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

    • Generate a link for Zoho Sign we can copy and use in a separate email

      Please consider adding functionality that would all a user to copy a reminder link so that we can include it in a personalized email instead of sending a Zoho reminder. Or, allow us to customize the reminder email. Use Case: We have clients we need to

    • You cannot send this campaign as there is no contact in the selected mailing list.

      We have synced contact lists and sent campaigns just fine prior to today.  Now no matter what list I upload when I go to send the campaign it gives an error "You cannot send this campaign as there is no contact in the selected mailing list." And now it

    • Pivot Report Formula - using a today() variable

      Is it possible for me to use a value of today() in a formula on a pivot table? I'm trying to identify where the end date of a project is greater than the current date if("10. Projects (Zoho Projects).End Date" > today(), 'Yes', 'No') I get the error that

    • Cannot connect IMAP to outlook

      Hello I have followed the instructions to connect my zoho account to Outlook IMAP but get this message: Session Id: bba118fb-151c-824f-9512-3ad1e91b109d Timestamp: 1708976566964 Error code: INVALIDCREDENTIALS INTERACTIONREQUIRED I'm using the exact configeration

    • Department Overview by Modified Time

      We are trying to create visuals to show the work our agents do in Zoho Desk. Using Zoho Analytics how can we create a Department Overview per modified time and not ticket created time? In order for us to get an accurate view of the work our agents are

    • Enhance Sign CRM integration

      Hello all, I'm working on a custom Deluge script to enhance the integration between Zoho CRM and Sign by using a writer merge template for additional flexibility. I want to replicate the post-sign document integration that exists between CRM and Sign

    • Zoho Workdrive download was block by security software

      Hi Team, Recently workdrive download was blocked by huorong security. Could you please advise how to put zoho workdrive as white list? every time we put "*.zohoexternal.com" or "workdrive.zohoexternal.com", the warning msg will still pop in next dow

    • Choosing a portal option and the "Unified customer portal"?

      I am trialling Zoho to replace various existing systems, one of which is a customer portal. Our portal allows clients to add and edit bookings, complete forms, manage their subscriptions and edit some CRM info. I am trying to understand how I might best

    • General feedback

      I think Zoho is at the moment (potentially) the best, or perhaps the only, real online solution, for business, and not just business. Surely the only one that has all the features that I need (and I've probably tried everything, at least all that has a cost-free option). It has still got lots of bugs and imperfect features, so I do hope it keeps developing and becomes a really professional platform. Lots of people (including me) want to use such one platform for all scheduling/mail/note-taking...

    • How to add SSL to Short URL custom domain?

      Hi, I've added a custom domain the the URL Shortener Domains. It's creating the short URL fine, but when clicking through, firstly I get an SSL warning, then a 400 Bad Request warning.

    • Single Portal for Multiple Apps

      Hello, I'm just getting started with Zoho and I'm very overwhelmed. I am currently using the free trial of Zoho One, but if I can figure it out, I intend to upgrade to the paid version. Zoho One, of course, gives me  access to an entire suite of services/applications. One of the things I'd like to do is have a single place for clients (customers?) to log in and view current projects, invoices, contact information, etc. A single login for my clients. A single portal. I've come across documentation

    • Antispam validation failed for your domain in Accounts

      I tried adding a domain to zeptomail.zoho.com, but the “add domain” operation failed. The front‑end error reads: “Domain could not be added. Please contact support@zeptomail.com.” The back‑end API returned: ``` { "error": { "code": "TM_3601", "details":

    • CodeX Scripts for Enforcing Custom Project Logic

      Every organization has a defined way of executing projects. There are clear expectations around how tasks should move, when projects should progress, and which actions require validation. When these rules are consistently followed, projects remain structured

    • Cancelled appointments still block out timeslot

      I haven't had to test this before, but I've just found a problem. I had an appointment in a certain timeslot, and that appointment was cancelled. However, Bookings won't let another appointment be booked in that slot - it makes that time unavailable until

    • Preventing Group Emails From Being Sent to Group Member Personal Mail

      We have a group setup for a public facing email address. We have streams turned on for this group. Right now when an email is sent to this group email it hits the group stream and also sends a copy of the email to all group members. We'd like to disable

    • Unusual activity detected from this IP. Please try again after some time.

      Hello Zoho admin and IT team We are a registered website in Eloctronic services and we been trying to add our users to the zoho system but this issue faced us ,, hope you unlocked us please.

    • ¿Puedo migrar mi sitio desde WordPress a Zoho? ¿Zoho admite herramientas con código personalizado?

      ¡Hola comunidad! Estoy evaluando la posibilidad de migrar mi sitio web https://calculadoradenotas.cl/ desde WordPress a una solución Zoho, y tengo algunas dudas técnicas que espero puedan aclararme. Mi sitio no es solo informativo: es una herramienta

    • How do I link my invoice to an estimate?

      There has been instances where I have created estimates, however, invoices for the same estimate were created independently. The status of these estimates hasn't converted to 'invoiced'. 

    • Zoho Books (and other finance suite apps) - Retrospective Linking of Invoice and Sales Orders to Quotes.

      In some cases, Quotes and Invoies may be created sperately instead of using the convert feature. In this feature request I am asking for the Finance Suite team to consider adding a lookup field to reference the quote on Invoices and Sales Orders, or some

    • Impossible to import Journal from Freshbooks

      I have been trying to import journals from Freshbooks since August 30th. Every time I try to import, I get an error message. I have already made sure every row has a date. First it was saying the account and notes had unexpected input and that every debit/credit

    • Peppol: Accept Bill (Belgium)

      Hi, This topic might help you if you're facing the same in Belgium. We are facing an issue while accepting a supplier bill received by Peppol in Zoho Books. There is a popup with an error message: This bill acceptance could not be completed, so it was

    • Convert invoice from zoho to xml with all details

      How to convert an Invoice to XML format with all details

    • Prevent subform editing on a module's detail's page

      Hi everyone, We would like to prevent any editing of the subform data in the : Create page Edit page Details page (as subform editing is now allowed by the recent UX update) We are able to prevent editing by making the subform fields read only in the

    • Export Invoices to XML file

      Namaste! ZOHO suite of Apps is awesome and we as Partner, would like to use and implement the app´s from the Financial suite like ZOHO Invoice, but, in Portugal, we can only use certified Invoice Software and for this reason, we need to develop/customize on top of ZOHO Invoice to create an XML file with specific information and after this, go to the government and certified the software. As soon as we have for example, ZOHO CRM integrated with ZOHO Invoice up and running, our business opportunities

    • Refresh frequency

      Dear Zoho Team, I really, truly appreciate that Zoho Books gets frequent updates. As a matter of fact this is how a good SaaS company should stay on top. However, I feel that I have to hit refresh almost every day. This was exciting at the beginning but

    • Zoho Books | Product updates | January 2026

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From e-filing Form 1099 directly with the IRS to corporation tax support, explore the updates designed to enhance your bookkeeping experience. E-File Form 1099 Directly With the

    • Weekly Tips : Save Time with Saved Search

      Let's assume your work requires you to regularly check emails from important clients that have attachments and were sent within a specific time period. Instead of entering the same conditions every time—like sender, date range, and attachments included—you

    • Bring real app analytics into Zoho Creator apps with Zoho Apptics

      We’re kicking off the year with a release we’ve been looking forward to for a long time. After being in the works for a while, Zoho Creator and Zoho Apptics are now officially integrated, bringing in-depth product analytics directly into the Zoho Creator

    • Discontinuing Zoho ShowTime service on May 30, 2026

      Hello everyone, As a follow-up to our earlier announcement, we’d like to share an important update regarding Zoho ShowTime’s discontinuation timeline. Zoho ShowTime, our online training platform, reached its end of life on December 31, 2025, and its services

    • emailing estimates

      Shows up in the customer mail logs as sent but nobody is receiving them, even when I send them to myself I don't get them ??? Something wrong with the mail server or my end ?

    • Ability to CC on a mass email

      Ability to CC someone on a mass email.

    • No background for video recordings, no playback speed, can't even playback longer recordings - have to download…

      Hi. We utilize heavily video messages on Slack, but wanted to migrate to Cliq with Zoho One, however very basic yet very frequently used feature is missing: backgrounds for video recordings and playback speed. We were not happy with Slack's 5 minute limits

    • Bookings duration - days

      Hi team, Is there any way to setup services/bookings that span multiple days? I am using Zoho Bookings for meeting room bookings. Clients may wish to book a room for more than one day, for up to a month.  If not, is there a plan to allow services to be setup with durations of Days as well as hours and minutes? Many thanks, Anna.

    • Customer address in Zoho Bookings

      Hello,  Is it possible to add customer address information to the Zoho bookings appointment screen? Or have it pull that information automatically from the CRM? We are wanting to use this as a field management software but it is difficult to pull the address from multiple sources when it would be ideal to have a clickable address on the appointment screen that opens up the user's maps.  It would also be advantageous for the "list view" to show appointment times instead of just duration and booking

    • Feature Request - Allow Customers To Pick Meeting Duration

      Hi Bookings Team, It would be great if there was an option to allow customers to pick a duration based on a max and minimum amount of time defined by me and in increments defined by me. For example, I have some slots which are available for customers

    • New feature: Invite additional guests for your bookings

      Hello everyone, Greetings from Zoho Bookings! We are happy to announce the much-awaited feature Guest Invite, which enhances your booking experience like never before. This feature allows additional participants to be invited for the bookings to make

    • Changing the owner of a call

      Am I correct in my conclusion that I cannot change the owner of a call in Zoho? The field does not show up in the screen, nor can I make it show up as the systems does not give me that option. I cannot "mass update" it either. I tried it, but Zoho refuses to change the name of the owner. Please help out: how do I change the owner of a call.

    • Unified Notes View For Seamless Collaboration

      To facilitate better coordination among different departments and team members, the notes added to a record can now be accessed in all its associated records. With this, team members, from customer service representatives to field technicians, can easily

    • Remove Profiles from "Forecast" Module

      How can I remove Profiles from My forecast Module? Image Below The only revenue generators are the VP's, and the Estimation Managers, and the Estimators subordinate to the Est. Managers. How can I remove the unused Profiles? Its frustrating to see them

    • Uplifted homepage experience

      Editions: All editions. Availability update: 17th February 2026: All editions in the CA and SA DC | JP DC (Free, Standard and Professional editions) 23 February 2026: JP (All Editions) | AU, CN (Free, Standard, Professional editions) 27 February 2026:

    • Next Page