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

    • How to record GST amount for Value of Service on Inward remittance charged by bank

      Hi please advice I have a situation.    1. I have HDFC bank account 2. I have a customer who has done inward remittance for purcahses from overseas. 3. HDFC is showing Value of Service say $100 and GST @ 18%. 4. Value of Service is not charged. But  CGST

    • Sort by Project Name?

      How the heck do you sort by project name in the task list views??? Seems like this should be a no-brainer?

    • Project Statuses

      Hi All, We have projects that sometimes may not make it through to completion. As such, they were being marked as "Cancelled". I noticed that these projects still show as "Active" though which seems counter intuitive. In fact, the only way I can get them

    • I have a requirement to integrate Zoho Books with Zoho Projects at both project and task levels.

      Currently, when i create transactions in Zoho Books (Expenses, Invoices, Bills), we can only map them at the project level. However, our requirement is to: Map records at both project and task levels Sync these transactions back to Zoho Projects under

    • What’s New in Zoho Inventory — Latest Features, Integrations & Updates | December 2025

      Zoho Inventory has evolved significantly over the past months, bringing you smarter, faster, and more connected tools to streamline your operations. Whether you’re managing multichannel sales, complex fulfillment workflows, or fast-moving stock, our newest

    • Add Multiple Modules in Automation

      Right now I am trying to automate sending customer statements in WhatsApp, if they have overdue invoices, since customer has multiple invoices overdue I don't want to send repetitive message for those. Right now in automation you can only select 1 module,

    • Feature Request in Zoho Books : Tracking Inventory for Service Items

      At the moment, ZOHO Books don't allow to track inventory of Service Items (I just talked with customer care executive for confirmation). MY PROBLEM: I resell services Digital Signatures Certificates ( SAC ‐ 998319) and other similar services, I purchase

    • Create Tasklist with Tasklist Template using API v3

      In the old API, we could mention the parameter 'task_template_id' when creating a tasklist via API to apply a tasklist template: https://www.zoho.com/projects/help/rest-api/tasklists-api.html#create-tasklist In API v3 there does not seem to be a way to

    • Audio Recording Button needs work

      People struggle to understand how to record the audio - the mic button is tiny and barely visible. Please make the recording option more prominent and obvious and the upload file function should be secondary... (not taking up the majority of the space).

    • Enhancing user experience with Audio/Video Upload in Zoho Forms

      Hello form builders! Today, interactive forms are an integral part of websites and applications. While text-based inputs serve a variety of purposes, audio and video uploads can open up a world of possibilities for businesses. Imagine you are a talent

    • Early Preview for an Upcoming Enhancement to Zoho One - App Adoption and Feature Discovery

      Hello, Enterprise Support Community, We're excited to give you an early sneak peak at an upcoming enhancement to the Zoho One platform: new App Adoption & Feature Discovery components, designed to help our customers adopt the right tools to enhance their

    • You cannot send this email campaign as it doesn't have any eligible contacts in the selected mailing list. You can try adding contacts or choose other mailing lists.

      please help

    • Add Days In Stage to Filter Options for Pipeline

      We use the days in stage to see how long a ticket has been in a certain stage. But there is no option to see this via filters. eg if i wanted to see how many tickets over 5 days in a stage, there no way to do this. Currently we have to export a report

    • Integration problem between zoho crm and zoho forms for an update in zcrm, with two mapped custom fields

      Hello everyone, I need to correct an existing integration between Zoho CRM and Zoho Forms: the use case is that a user needs to send an email to a contact, who will click on a button in this email, redirecting to a Zoho Forms. The contact can update or

    • Purchase Order Quantity Validation Not Enforced During Bill Approval

      Hello Team, I would like to report a potential issue in the Purchase Order to Bill workflow. Steps to reproduce: Create a Purchase Order for an item with Quantity = 100. Approve/sign the Purchase Order. Convert the Purchase Order into a Bill. Change the

    • How do I add multiple contacts in a deal

      How do I add multiple contacts in a deal

    • Blueprint Not Triggering When Lead Status Is Updated by Workflow (IndiaMART Integration)

      I have set up a blueprint that triggers when a lead’s status is “New Lead.” Our CRM is integrated with IndiaMART, and when leads are created from IndiaMART, their Lead Status is initially set to None. To handle this, I created a workflow that automatically

    • Add multiple users to a task

      When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesman

    • Journey vs Campaign Confusions

      Hi there! I hope you're all doing great! I'm new to the Zoho MA and I'm confused between Journey and Campaigns. I'm not sure if these two work together or not. I hope you can enlighten me. What I'm trying to do is setting up a Newsletter. 1. We have a

    • The 3.1 biggest problems with Kiosk right now

      I can see a lot of promise in Kiosk, but it currently has limited functionality that makes it a bit of an ugly duckling. It's great at some things, but woeful at others, meaning people must rely on multiple tools within CRM for their business processes.

    • Zoho Webinar not sending calendar entry into Outlook or other calendars

      Dear All, I am using Zoho Webinar for last few months and noted that when a attendee registers at the webinar link he gets an email will intimating his registration and link to webinar. He also get few file ( for Outlook, Google calendar etc) which he

    • Ticket Status

      HI, Any idea on how to create other options for this header??? I want to add an "Ordered" status. Its under "tickets" in Overview, I need a new status created (see second picture)

    • Turning off the recorded welcome in Zoho Webinar

      Is there a way to turn off the recorded voice that comes up at the beginning of every webinar session? It devalues the experience for attendees from feedback, interrupting their connection with our brand and delaying webinar start unnecessarily.

    • Client Script | Update - Client Script Support For Custom Buttons

      Hello everyone! We are excited to announce one of the most requested features - Client Script support for Custom Buttons. This enhancement lets you run custom logic on button actions, giving you greater flexibility and control over your user interactions.

    • Save embed widget personalizations

      Ok, Zoho, Great work on providing PRICING TABLES via the embed widget. Thanks so much. This changed the game for me Only one slight problem....I can't seem to save my widget settings. I'm still building my products and plans but I'm testing how they look

    • Problem with UTM Parameters: Zoho Forms - Zoho Desk Integration

      Hi Zoho Support Team, I want to automatically capture UTM Parameters from my website URLs and pass it from Zoho Forms into Zoho Desk. I have activated the UTM tracking feature. I've integrated the UTM Tracking code in my website footer on all pages. I've

    • Team folder not created when creating project using zoho flow

      When I try to automate project creation using zoho flow, and I have enabled workdrive integration to automatically create team folders to attach to the project, this only works when I create a new project through the UI. But I am trying to automate project

    • Add an option to deactivate Zoho Meeting "Welcome" message

      My request is to provide an option to deactivate the annoying Zoho Meeting "Welcome" voice when participants join meetings... or remove it all together. First impressions count, especially with new clients. This notification reminds me of the AOL "You've

    • Service line items

      Hello Latha, Could you please let me know the maximum number of service line items that can be added to a single work order? Thanks, Chethiya.

    • SalesIQ > My Chat sort by Unread or Follow-up

      Hi Zoho SalesIQ Team, I would like to submit a feature request regarding the My Chat > Sorting in the SalesIQ UnRead Follow-up Conversation tags Thank you for considering. Best regards, CJ

    • Record sharing for Activities modules in CRM

      Hello everyone, We've got a few quick enhancements to what we covered in this previous announcement: record sharing is now available for Activities modules. 1. Sharing Tasks, Meetings, and Calls Until now, activity records could only be shared indirectly

    • SalesIQ : How to disable "Idle chat handling" ?

      Hello SalesIQ Team. SalesIQ, How to disable "Idle chat handling" ? I would like to disable the option “Automatically close chats that have been idle for a specified amount of time.”

    • How do I create an update to the Cost Price from landed costs?

      Hi fellow Zoho Inventory battlers, I am new to Zoho inventory and was completely baffled to find that the cost price of products does not update when a new purchase order is received. The cost price is just made up numbers I start with when the product

    • Facturation électronique 2026 - obligation dès le 1er septembre 2026

      Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,

    • Function and workflow to create customer payment and send receipt

       I am attempting to set up a workflow/custom function for the automatic creation of a customer payment and sending the email receipt, but am receiving the error "Improper Statement Error might be due to missing ';' at end of the line or incomplete expression" I've been over everything several times and cannot see where the error is (code is copied into the attached document).  I haven't used custom functions before with Deluge, so it's very likely something very simple, or I've completely mucked

    • Smart Alerts: Protect users with configurable email alerts

      Email-based threats are becoming harder to identify and manage. Administrators need proactive ways to protect users from phishing, fraud, and policy violations. Standard filters can block emails, but blocking alone isn't always the most effective response.

    • Power up Zoho CRM with project intelligence

      Dear user, You're probably one of those businesses using your CRM as a single source of truth. It's where sales, project execution, and finance teams go to analyze past decisions and formulate future strategies. But what happens when project data is either

    • Print multiple uploaded images in an HTML snippet in a Page

      I have a Form: Job_Preparation It stores details of each new item that must be built by the fabricators in our workshop. The form has a field: Documents I upload 4 image files to the Documents field. I want to print a sheet for our workshop staff with

    • "Track Inventory for this item" is forced checked by default for goods items (eTims issue?)

      Hello, Since connecting our Zoho books to eTims (Kenya) the "Track Inventory for this item" is forced checked by default (eTims issue?) in the Item creation page for any type of goods. So when purchasing anything that the company does not intend to sale,

    • Why can't we choose Fixed Asset account for Purchased Items? (eTims issue?)

      Hello, When the company purchase items not for sale and not supposed to be in the inventory stock, like equipment for operational use, there is no way to access the Fixed Asset accounts in the drop down list. Is that an eTims limitation again? Or something

    • Next Page