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

        • 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

        • How to get the campaingns key?

          Reading the documentations of the API, I see that is necessary have the campaign key, but I don't see how can I get it. For example to get the campaign details we need to do the request: https://campaigns.zoho.com/api/getcampaigndetails?authtoken=[API Authentication Token]&scope=CampaignsAPI&campaignkey=[campaignkey] I have the API Authentication Token but I don`t see how to generate the campaignkey

        • Unable to switch existing AWS RDS connection to DataBridge after moving RDS behind VPN

          Unable to switch existing AWS RDS connection to DataBridge after moving RDS behind VPN Hi everyone, I’m facing a problem with an existing Zoho Analytics setup and would like to know the best migration path. Originally, my Zoho Analytics connection to

        • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

          Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

        • Native QuickBooks integration for Zoho CRM: Connecting sales and finance

          Greetings, I hope all of you are doing well. We're excited to announce Zoho CRM's integration with QuickBooks Web, which is designed to synchronize your CRM data with your QuickBooks accounting records and bridge the gap between sales and finance. This

        • Syncing zoho books into zoho crm

          I was wondering how I can use zoho books in crm as I have been using them separately and would like to sync the two. Is this possible and if so, how? Thanks

        • ZohoBooks_add_expense_attachment Fails

          I'm working MCP in Claude to automate bookkeeping. Claude cannot seem to attach and reciept to an expense. The 'add expense attachment' tool is added to the server and enabled in Claude. I asked Claude to give me the calls he performed and this is what

        • ZohoBooks_create_chart_of_account

          I'm setting up Claude to do my bookkeeping workflows using a Zoho MPC server I setup. He does not seem to be able to create a chart of account. The 'create chart of account' tool is added to the server and enabled in Claude. I asked Claude to give me

        • Zoho Books Product Road Map

          I am planning to look into Zoho Books to maintain my Company's Account Books. Is the roadmap of Zoho Books Development available online? What happens if you product dies, without an export feature to other popular Accounting softwares like Tally or Quickbook. Are we going to be left in lurch? Do you have a product road map? Regards, Vishal.

        • I want to delete the email but I can't.

          I want to delete emails but I can't, please help me. Thanks!

        • Error while creating new user

        • Zoho Mail is blacklisted on magicspam.com and spamauditor.org

          As of today, the same problem with the IP addresses 136.143.188.51 and 136.143.188.52 How long does it take them to clear their IP addresses? I've read on this forum that these IP addresses have been blacklisted for years. //////////////////////// This

        • Unable to send emails from the delegated mailbox

          currently it's not possible to send emails from our delegated mailbox (just in our own name, our own mail-accounts) The permissions granted include "Send as," and we are also unable to delete delegated employees or add new ones. We can only add employees

        • Change Password

          How can I reset OR Change the Passwords for the Whole Organization at Once as Administrator using Admin Console?

        • Zoho Books bill pay option not available with zoho one

          Why isn't Zoho Books bill pay add-on not available for Zoho one customers not even as a purchasable option. I think this is very inconvenient for companies wanting to use this feature all in one system

        • Support - what am I doing wrong?

          Hi Everyone - I'm a new user and looking particularly for a replacement mail service. I'm just a home user not a professional but I do look after half a dozen domains. Zoho looks lovely and I'd like to switch but just want to get answers to a few 'easy'

        • Zoho Forms - Form Availability Redirect Option

          Hi Forms Team, It would be great if there was a redirect URL option on the Form Availability settings. For example, I would like to create a support form which is only available outside business hours and if the current data and time is not Mon-Fri 9-5

        • Consider Making Printing Easier (UI)

          I'm using Zoho Analytics in much the way that it was intended when it was "Zoho Reports" - as a way to pull together information across several apps in the ecosystem. I have a dashboard that I need to run each week for every employee (change the filter

        • Email Routing to Zoho from Cloudflare

          Hello, I'm new to Cloudflare, having had my domain hosted on Fasthosts and just used it for email forwarding. I'm looking for a little help to configure my email routing/hosting. I've looked at the documentation but haven't found exactly what I need to

        • Emails

          Good Morning, Is anyone else experiencing emails bouncing back? Thanks,

        • Secondary Reporting Manager permission level

          Hi, same time last year I was speaking to Zoho about the use of a Secondary Reporting Manager and certain challenges that I was facing. at the time, I was told that this functionality did not exist. I am still facing challenges, so I would like to ask

        • アナリティクスで商談中のパイプライン(ステージ）の件数比較

          アナリティクスで商談中のパイプライン(ステージ）の件数を前週と前々週で比較したい。前々週の件数が更新することで変動してしまう。対象方法をご教授ください。

        • why is my folder list is gone?

          Hi, All my email folders are gone, i cant found any email. could you please check it?

        • Our ZOHO mail is not working

          ZOHO mail is not working for any of our company's employees. All are able to access it in mobile. But not in laptops as a app or in webpage. please help asap.

        • Request to Release Email Aliases for Our Domain

          Dear Zoho Support Team, Greetings, We are currently configuring the email system for our organization in Zoho Mail and encountered an issue while creating several email aliases. When attempting to create these aliases, we receive the following error message:

        • Changing Base Currency to USD (we are based in the UAE)

          Hello everyone, Good day. We are based on the UAE and our bookkeeping is in USD. I followed the online resource that I select the country first where the currency I want as base is native then later on changed the country once the whole setup is done.

        • Error "The domain pinakajewels.com appears to be already in use in another organization. Learn More"

          Hi Team, I have the following account with zoho mail Organization ID: 644368849 This zoho mail account was earlier mapped to www.senacareese.com I no longer own the domain www.senacareese.com I wish to map www.pinakajewels.com to the same zoho mail account.

        • Add personal Facebook to Zoho Social

          Hi. is there any way i can post to my business and personal Facebook and Instagram at the same time when I make or schedule a post?

        • Option to Delete Chats in IM

          Currently, there is no option to delete any chats in IM, regardless of their source.

        • Billing Status Update

          Hello Latha, I’m working on a new automation (deluge) to fulfill one of our requirements. In this automation, there is a step to update the Work Order billing status from “Not Yet Invoiced” to “Non-Billable.” I tried to find the API information relevant

        • Please Enter Valid Amount

          Where to enter amount while importing file in journal.?

        • How to create a custom motorbike rental contract based from the customer list and print it.

          I would like to enter the customers information and then print out the contract with there name and information needed. how can I do this. I have the Zoho Books only. I'm just starting. Thanks

        • LAST YEARS TRANSACTIONS

          How do I obtain a statement for transactions from last year - 2025

        • Missing Company Name on Estimate

          Hi there, I noticed that On some of my estimates (either new or old) the Company name disappeared and not shown neither on Zoho Book Client page nor on the estimate. Please note that on the PDF generated months ago, the estimate contains the company name.

        • Não estou recebendo código de autenticação (Instagram)

          Olá, utilizei uma das minhas contas de email Zoho para criar um cadastro no Instagram, o email com o código de autenticação de confirmação da conta não chega no meu email Zoho (nem.ma caixa de spam, nem na lixeira, e nem em outras pastas). . Já solicitei

        • Automation #7 - Auto-update Email Content to a Ticket

          This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Email is one of the most commonly

        • Recurring Invoices not generating – "Next Invoice Date" has passed despite "Active" status

          Hi everyone, We are currently experiencing an issue in Zoho Books where our recurring invoice profiles are not generating invoices/drafts as scheduled. The Problem: As shown in the attached screenshot, the "Next Invoice Date" (Nächstes Rechnungsdatum)

        • #3 Stop Retyping the Same Things

          Imagine a store where customers keep walking in and placing different orders throughout the day. The store owner manually enters every product name, price, tax and description while creating invoices. During a busy day at work, the store owner had to

        • Rename system-defined labels in Zoho CRM

          Renaming system-defined labels is now available across all DCs. Hello everyone, Zoho CRM includes predefined system fields across modules to support essential CRM operations. Until now, the labels of these fields were fixed and could not be edited from

        • Creator List not showing

          I've edited a list in creator, but when I open it in the live version the list is completely different. Anyone know why this is happening? Edit Version: Live Version:

        • Next Page