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 do you arrange order in which the speakers are listed in a session once they have been selected?

      Probably another simple thing I've missed but I can't find how to arrange the order in which the speakers are listed in a session once they have been selected. We usually want the speakers listed alphabetically by last name, but sometimes not. Once the

    • Product Updates in Zoho Workplace applications | February 2026

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications for the month of February. Zoho Mail Organize Personal Notes with Collections You can now create collections under My Personal

    • Introducing note actions and dynamic visibility in Kiosk Studio

      Hello all, We are introducing enhancements to Kiosk Studio that will improve the product scope and meet your custom needs more precisely. What's new? Add notes as Actions: You can add notes to CRM records as kiosk Actions, as well as insert merge fields

    • Regarding the Recipient Email change

      I was not being able to change the Recipient email. Kindly resolve the problem

    • Request to Customize Module Bar Placement in New Zoho CRM UI

      Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive

    • kanban view for client portal

      Are kanban views an option for client portals? Access to Kanban views in the client portals would solve some mobile-compliant issues I have with the UI. Kanban functions very nicely on mobile and would be a super asset for my clients and vendors as they

    • 【Zoho CRM】サンドボックスのアップデート：メール送信トレイ機能の追加

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 CRMのサンドボックス（テスト環境）にメールの送信トレイ機能が追加されました。 本番環境でメール配信の前に、サンドボックスで送信される全てのメールを確認・検証できます。ワークフロー、承認プロセス、一括送信など、あらゆる送信パターンに対応しています。 「メールの送信トレイ」機能を使うと、顧客へ送信する前にメールの内容を事前確認できます。項目の欠落や書式の乱れなど、あらゆる問題をサンドボックス内でチェックできるため、本番環境でのトラブルを未然に防ぐことに役立ちます。

    • Force mandatory entry on one of two fields on Contacts

      We are finding our users aren't always entering a phone number or email address of a contact. We would like to make these fields mandatory but realize they won't always have both pieces of information, but should at least have one. Is there a way to make

    • How can I prevent having recepients from being added as contacts in Zoho Desk?

      How can I prevent having recepients from being automatically added as contacts in Zoho Desk? There's no option to disable this.

    • Agent Concern

      would like to ask the difference between an agent and a light agent. can a light agent close a ticket. thank you.

    • Train Zoho Answer Bot Based on Customer

      Hi all, Is it currently possible to mark Help Centre articles to a specific customer, and restrict the answer bot to only use relevant information if it is either marked as "General", or tagged for the specific customer in question? We currently have

    • Non-depreciating fixed asset

      Hi! There are non-depreciable fixed assets (e.g. land). It would be very useful to be able to create a new type of fixed asset (within the fixed assets module) with a ‘No depreciation’ depreciation method. There is always the option of recording land

    • Will Zoho Search work with Zoho Learn

      Currently, Zoho Search only works with Zoho Wiki which will be phased out.  Moving forward, will Zoho Search be enabled for Zoho Learn? Thanks.

    • How to use filters on all products page? Or even a category page?

      Hello, I am trying to create some filters so users can use filters to find products they are looking for. So what i am trying is to create a filter according to price lets say. So if i define it this way i am expecting to see this filter option on category

    • audio and video comments in tasks in zoho projects

      Hi, is it planned to have the ability to post audio and video comments? the whatsapp wechat format of communicating is a reality... tools like zoho project would facilitate a lot teamwork by facilitating the way in which we can give feedback in audio and video rather than only text. thx!

    • Zoho Projects app update: Voice notes for Tasks and Bugs module

      Hello everyone! In the latest version(v3.9.37) of the Zoho Projects Android app update, we have introduced voice notes for the Tasks and Bugs module. The voice notes can be added as an attachment or can be transcribed into text. Recording and attaching

    • Boas práticas de desenvolvimento em Deluge

      O Deluge (Data Enriched Language for the Universal Grid Environment) é a linguagem de script utilizada em diversas aplicações do ecossistema Zoho, como Zoho Creator, Zoho CRM, Zoho Books e Zoho Flow. Ela foi projetada para permitir automações rápidas

    • Seeking a WhatsApp Business App (not API) Zoho CRM integration

      We have a business need to integrated WhatsApp Business App (not API) into Zoho CRM to centrally manage communications between our Sales team and Leads & Contact. Is there a reputable integration available for this scenario of ours? Core features we would

    • Zoho Sign 2025–2026: What's new and what's next

      Hello! Every year at Zoho Sign, we work hard to make document signing and agreement execution easy for all users. This year we sat down with our head of product, Mr. Subramanian Thayumanasamy, to discuss what we delivered in 2025 and our goals for 2026.

    • Creditos API

      Queria saber se alguém poderia me ajudar a resolver um problema na compra e utilização de créditos de mensagens API do WhatsApp. ja tentei todos o tutoriais porem não consegui realizar a compre, pois ao clicar no botão de comprar créditos aparece a mensagem

    • Intergrating multi location Square account with Zoho Books

      Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.

    • Is there a way to configure dark mode for Campaigns emails that go out to customers?

      I've found a lot of information on how to configure dark mode for my (The user) personal Zoho workspace and email, but is there any way to edit dark mode settings on emails that we send out to customers via campaigns?  We sent out a test email the other

    • Can I hide empty Contact fields from view?

      Some contacts have a lot of empty fields, others are mostly filled. Is there a way I can hide/show empty fields without changing the actual Layout? I would like to de-clutter my view, and also be able to add information later as I am able. I would be

    • Auto-publish job openings on my Zoho Recruit Careers Website

      I have developed a script using the Zoho Recruit API that successfully inserts new jobOpening records to my Zoho Recruit website, but my goal is to auto-publish to the Careers Website. The jobOpening field data shows two possible candidates to make this

    • Credit Card Terminal for Zoho Books

      Hello, Instead of punching the credit card number manually for customer payment, do you have a third-party hardware credit card reader that works with Braintree? Thank You

    • How do you print out the invoices comments

      I have some invoices where i need to print out the comments that show when reminders and etc were sent how do we print those out in Zoho Books.

    • Feature Request: Enable Custom PDF Layout Editor for All Modules (Including Package Slips)

      Hello Zoho Community and Product Team, I am writing to share a suggestion that would significantly enhance the customization capabilities within Zoho Books. We all appreciate the power of the Custom PDF Layouts (the "New" template engine) that allows

    • Need advice for product/item search functionality when adding invoices.

      My client uses "Catalog or Vendor" name and Product code to search for his items. But Zoho only allow to search by product name and SKU when adding items to Invoices/Estimates. Clients product codes are not unique as they may overlap from different catalogs/vendors.

    • How to dynamically pass IDs from one API response to a second API call in Zoho DataPrep?

      Hi Team, I am setting up a global consolidated reporting pipeline in Zoho Analytics (India) using Zoho DataPrep as the ETL engine. I am pulling data from multiple Zoho Books Data Centers (US, Singapore, India) thats why i used the URL Source (OAuth 2.0)

    • Feature Request: "Send Invitation" Toggle for Events

      I am writing to request a critical "Quality of Life" update for the Activities module. Currently, adding people to the Participants field in an Event triggers an automatic email invitation/acceptance tracking with no way to opt-out. For general events

    • Account Review Pending - Daily Limit 100

      Hi ZeptoMail Team, I'm writing to request a manual review of my account. I am currently stuck on the 100-email daily limit and cannot purchase credits. Status: My domain is already verified (DKIM/CNAME). Issue: The "Customer Validation" option is no longer

    • Automation Series: Move Tasks to a different Task List on Status Change

      In Zoho Projects, you can automatically move a task from one task list to another when its status is updated. This keeps your tasks organised and ensures better visibility while reducing manual work. For instance, during a product launch, the marketing

    • Introducing Bigin's all new integration with Microsoft Teams

      Picture this: You are on call with your team to discuss some important deals that need to be closed soon. While discussing each deal, your team has to switch back and forth between your Teams account and Bigin account to refer to details about the deal.

    • Scaling the customer journey: What's new in CommandCenter

      Dear Customers, The last time we connected about CommandCenter, it was about the tool's new controls and revamped UI. Personally, the overhaul of the UI from the last update, still excites me. Today, we're here with news about its scalability and added

    • Adjusting Physical Inventory

      Not getting very far with support on this one, they say they are going to fix it but nothings happened since November. Please give this a thumbs up if you would like to see this feature or comment if you have some insight. Use Case: Inventory set to be

    • Dynamic Remaining Quantity in Lookup During Allocation

      Hi everyone, From what I understand in Zoho Creator, lookup fields only display the stored value from the source record and do not dynamically update while a form is being filled. Because of this, showing a real-time updated remaining quantity inside

    • Is it possible to use HTML formatting in SMS messages sent from Zoho?

      Hi everyone, I have a question regarding sending SMS from Zoho When we send emails from Zoho, we can include HTML code to format the message (like adding links, styling, etc.). Is it possible to do something similar when sending SMS messages through Zoho

    • Important update: Migrate to the new SalesIQ live chat widget before April 14, 2026

      The old SalesIQ live chat widget will be deprecated on April 14, 2026. This is a final reminder to migrate to the new SalesIQ live chat widget before this date. After April 14, 2026, the old widget will no longer be maintained, which can lead to slower

    • If your IM chats aren’t auto-assigning, here’s what to check

      Hey everyone! We’ve been seeing quite a few questions around Instant Messaging (IM) Chat Routing in Zoho Desk, especially around how it actually behaves in real time. So I thought I’d share a practical breakdown of what’s happening behind the scenes.

    • connect zoho creator with google drive

      Hello everyone, I need to connect to a folder drive. The idea, is that google drive loads a text document with some data, I must read that text document to be able to autofill a form that I have in zoho creator with that data. I also attach PDFs and place

    • Next Page