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

        • GrassHopper VOIP Integration

          Does Zoho Plan to integrate with Grasshopper to allow the Telephony hookup in Zoho Desk?  If not, Can this be passed along for consideration 

        • Creator -Dynamic addition of Customer Portal User Licenses

          Hi, We have a Creator App for B2C about to get released. We are experiencing the Portal User license challenge. Unable to predict the number of users who will download and Subscribe. When a User is about Subscribe and the portal licenses does not exists,

        • Reminder Settings - Time Tracker

          On the time tracker in Reminder Settings I created a reminder according to the Zoho manual. But a manager asked me to change the message that goes in the email. Is it possible to change the message? I didn't find that in the Zoho manual. Another question: I configured to receive the reminder everyone who logged in less than 40 hours. Does Zoho consider less than 40 hours of the current week or the whole month? Another situation, I put it so that I and another specific user would receive the notification,

        • New in Cadences: WhatsApp follow-ups, upgraded limits, and options for add-ons

          Hello everyone, We're rolling out two key updates to help you engage better and scale smarter with Cadences in Zoho CRM. Reach customers on WhatsApp, directly from Cadences Previously, Cadences have enabled you to automate follow-ups through emails, calls,

        • Specific ListView Canvas on Canvas Home Page Always Loads Most Recent ListView, Not the One Specified

          I had mentioned this to ZOHO, but I mainly wanted to see if others in the Community are also facing this problem. I created a Canvas ListView for a Custom Module, and then created a Canvas Home page (technically on a tab item, but I'm not sure if that

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

          Hello, I am the Super Administrator of the Zoho Mail organization for carrytrail.com. The domain has already been verified, but when I try to create the user. I receive the following error: “This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com

        • Tip #92 – Organize your support operations with Departments – ‘Insider Insights’

          Hello Zoho Assist Community! As a support team grows, so does the complexity. Different customers, different products, technicians spread across regions, and each group needing its own way of working. When everyone operates from a single shared space,

        • Support Plan: Recuring Issue

          Hi Zoho Team, Could you please look into this recurring alert and provide clarification on why this restriction is still in place? This issue has become a bottleneck in our workflow, significantly limiting our automation capabilities. We are unable to

        • Introducing Zoho Office Desktop

          Hi users, We are excited to announce Zoho Office Desktop, a single app to install, update, and open Zoho Writer, Sheet, Show, and PDF Editor on Windows and macOS. It includes: One home for every app: Choose the apps you want, and a guided installation

        • How Can You Find Broken Internal Links Without Checking Every Page Manually?

          Broken internal links are a common technical SEO issue. They can send visitors to missing pages, interrupt navigation, and make website maintenance more difficult. On a large website, checking every link manually is simply not practical. So, how can you

        • Zoho Writer for Android: Q2 2026 updates

          Hi users, We are excited to announce the Q2 2026 updates for Zoho Writer for Android. This includes: Formatting parity with the web app: Choose from multiple ordered and unordered list styles, adjust line spacing, apply your custom paragraph styles, change

        • Zeptomail in the blacklists

          Hello, I noticed some hard bounces while sending emails, and upon checking the details, I see that we have been added to the blacklists of certain spam lists: Bounce category: Policy failure Reason: ip-issues Message: 5.7.1 Service unavailable; client

        • ZohoBooks - "Account transactions" report doesn't have any "Desciptions"

          Hi, I'd like to push for this to be included in ZohoBooks: In a "account transactions" report all the numbers are right, but I'd really like to see the "Description" as part of this report, i.e. the line-item-description as I would see it in the bank statement. Essentially all you see is a list of numbers adding up to the total. It is very difficult to see if things are right without being able to see what exactly each transaction refers to. Going into each transaction one-by-one is not a workable

        • Zoho Projects | Q3 Updates

          Hello everyone, Here's a roundup of everything we released from July to September. We have added some new features as well as improved some of the existing ones. Project Financials Finance Integration Integrate your Project with Zoho Books, Zoho Invoice,

        • Meet your customers on Arattai, from inside Zoho CRM

          Hello everyone, Your customers reach you on the apps they already use. Zoho CRM now supports one more: our very own Arattai! When someone messages your Arattai Business number, the conversation arrives in the Messages module in CRM, right beside your

        • Running Balance

          Please add automatically Running balance in ledger view. Taking lot of time, every time to add manually

        • MAKING ENTRY TIME MORE USER FRIENDLY AND FASTER O PREVENT TAB TIME

          I AM CURIOUS TO KNOW IF WE CAN MAKE IT MORE USER FRIENDLY WHILE MAKING BILLS , I MAJORLY USE OVER DESKTOP SO I AM SUGGESTING TO REMOVE TAB TIME WHILE ENTERING BILL OR MAKING INVOICE DIRECT JUMP TO ONLY REGULAR PARTS OF THE BILL . YOURS RAKESH 782866

        • Unable to export reports despite enabled report export permissions

          Hi Zoho Community, We are unable to export reports in Zoho CRM. When attempting an export, we receive the following error: “Cannot Export Report — You do not have permission to export one or more modules used in this report. Please contact your administrator.”

        • Add Payment Information (like Bank details)

          I am using the Free plan of Zoho Books. I need to add the bank details/ UPI details on the invoice. How can I do that. I have added the details in the Bank Section.

        • Keep Sensitive Customer Data Private with Field Masking in Zoho CRM

          Hello CRM community, Customer records in your CRM are often accessible across multiple teams, but not every team needs visibility into every field. A non-sales team, for instance, has no real need to see a contact's mobile number, and a support agent

        • Generate a Zoho Sign link

          From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.

        • Notes - Reaction Buttons

          Using the native notes option within CRM is fine, it works and the RTF features are great, however, would it be possible - if there isnt already something in place, where we can add a reactions button, similar to teams/whatsapp to show that its been read

        • 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

        • Need help with importing expenses

          I'm using the template downloaded from the application. When I try to import my expenses, I get the message: Duplicate entry in the Expense Date column. Ensure it contains unique values. None of the rows will import. There are duplicate dates, but they

        • #12 Bringing In A Second Pair Of Hands

          Meera's studio became a two-person business in month five. Adding the second person took ten minutes. Working out why Meera herself was showing up as Staff took considerably longer. The Usual Way To Do This Covered in our published General FAQ, with the

        • How can I add a Custom Field (or Customer_name) to a picklist?

          Our workflow is Shopify-->SO -->Picklist-->Package-->Shipment. We would like to have the Picklist template to include a custom field "Customer_Notes" (we have created this field already). This way we get alerted when a customer has notes on their account.

        • Header Line in Quote product rows

          I believe this is an essential feature that Zoho should provide us, when adding products we want the ability to add titles for our product, in quotes: The Solution/Category Title Product1 Product2..... and then it would show the sub-total of that title 

        • Widget Height were destroyed

          All widget heights in the Details Canvas view are broken. Moderation Update: This issue with widget heights in Client Script popups and flyouts has been resolved. Widgets should now display at their expected heights.

        • How to Fix the Corrupted Outlook 2019 .pst file on Windows safely?

          There are multiple reasons to get corrupted PST files (due to a power failure, system crash, or forced shutdown) and several other reasons. If You are using this ScanePST.EXE Microsoft inbuilt recovery tool, it only supports the minor corruption issue

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

          Moderation update: Currently available in the following DC's CA, AU, CN, UAE, JP, SA - All Editions EU - Free, Standard and Professional Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records.

        • Zoho Extensions 101: Building extensions for Zoho People

          Hello developers! Welcome to our new video series on building extensions for Zoho People! If you're new to extension development or looking for guidance on building extensions for Zoho People, you're in the right place. We've curated a series of videos

        • Add @Mention Notifications in Zoho Cliq for Zoho Project Mentions

          Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding "Projects Bot" Cliq bot notifications for @mentions inside Zoho Projects comments (Tasks and Issues). Current Behavior: At the moment, when someone

        • Can't connect to POP and SMTP over VPN

          I use Thunderbird to access Zoho Mail via POP and SMTP. I have configured an app-specific password for Thunderbird to use. Everything is properly configured and works correctly — until I enable my VPN. I'm using a paid commercial VPN service (Mullvad).

        • Outgoing Mail Blocked – Suspicious Login Activity (Need Clarification and Solution)

          Hello, I’m currently facing an issue where my Zoho Mail account has been blocked due to “suspicious login activity,” and outgoing emails are restricted. Here are the details shown: Block type: Outgoing mail blocked Reason: Suspicious login activity A

        • Online Payment Fees

          We don't take many online credit card payments so the merchant service provider (PayPal) charges us the 2.9% fee for processing the amount. I would like the ability for the fee to be automatically added to the total amount for "ease of payment". We'd

        • O SalesIQ aceita números do Whatsapp Business com coextistência?

          Tenho uma equipe com vários vendedores e cada um deles tem um celular corporativo usando o Whatsapp Business para se comunicar com os clientes. Estamos no plano Zoho One e esses mesmos vendedores também usam o SalesIQ para atender os leads que vem do

        • Merge Tickets Directly from Contact Page in Zoho Desk

          Dear Zoho Desk Support Team, We are writing to request a new feature that would allow users to easily merge tickets directly from the contact page in Zoho Desk. Currently, the only option to merge tickets is from the Tickets list view page, which can

        • Losing description after merging tickets

          Hello, We merge tickets when they are about the same topic from the same client. It happens sometimes. We recently noticed that after the merger only the description from the master ticket is left in a thread. And the slave-ticket description is erased.

        • Any update on much requested feature, to delete attachments without deleting the e-mail body?

          People have been requesting the ability to delete e-mail attachments without deleting the e-mail for more than ten years now. The latest I see is marked "Working On It" and a year ago it was supposedly being added, see here: https://help.zoho.com/portal/en/community/topic/is-there-a-way-to-delete-mail-attachments-without-deleting-the-text

        • Undo/redo when composing Mail

          Where is the undo/redo button when composing mail? I've new to Zoho, I've looked, I've searched and can't find it. What am I missing?

        • Next Page