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

    • Connecting zoho creator to zoho writer to send prefilled documents

      i will paste the worflow below // Get user's submitted data from the form userSalary = input.Current_Salary; userCIBIL = input.CIBIL_Score; userEmail = input.Email; userName = input.Name; // You need to get the Document ID from the URL of your Zoho Writer

    • Extracting Images from a Zoho Creator Report into a Pages

      If you’ve uploaded images in a form and can see them in your report, you might also want to display those same images inside a Page (custom HTML page). This is useful for dashboards, profile pages, or any place where images should be visible dynamically

    • How do I change a form's name? Why isn't this more intuitive?

      Can someone please let me know how to change a form's name?

    • Zoho is blocking emails I subscribe to from one sender

      About 4 months ago I stopped receiving newsletters that I subscribe to from @thedispatch.com. They tell me that zoho's server is blocking them. I've added them to my contacts list, but they're not even reaching my inbox. I don't know how to troubleshoot

    • Introducing Formula Fields for performing dynamic calculations

      Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This

    • Inactive Items - Make Less Prominent by Default

      Currently, when one marks an Item as "Inactive", it really doesn't do much of anything to hide it or get it out of the way. Search and reporting within Finance should, by default, hide inactive Items from standard reports, searches, etc. If one specifically

    • Items should display under specific warehouse

      I have configured the multi warehouse but it show all the items under all warehouse which is not correct according to our business logic, so i want that items should only display under that specific warehouse not under all the warehouses not even with zero quantity. Some items should be common but not all so is there any option for that purpose so i can specific the items to its warehouse. Regards

    • Zoho Analytics Bulk Api Import json Data

      HI, I’m trying to bulk-update rows in Zoho Analytics, and below are the request and response details. I’d like to understand the required parameters for constructing a bulk API request to import or update data in a table using Deluge. Any guidance on

    • E-Invoicing in Belgium with Zoho Billing

      Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. Invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing works

    • Convert HTML to PDF & Send as Email Attachments in Zoho Creator (Deluge)

      This approach is useful for sending welcome letters, instructions, or promotional offers after order creation. // 1. Define the variables using the submitted input customerName = input.Customer_Name1; orderID = input.ID; customerEmail = input.Email_Address; //

    • Auto-fill New Row with Previous Row Values

      rowsize = input.Order_Items.count(); for each row1 in input.Order_Items { rowsize = rowsize - 1; if(rowsize == 1) { row.Door_Model = row1.Door_Model; row.Door_Color = row1.Door_Color; row.Materials = row1.Materials;

    • I am facing a problem with an if-else condition

      If I use if, else if, and else conditions in Deluge with the same variable name, sometimes the variable causes an error because the same variable name is present in every block

    • When I click on PDF/PRINT it makes the invoice half size

      When I click PDF / Print for my invoice in Zoho Books, the generated PDF appears at half size — everything is scaled down, including the logo, text, and layout. The content does not fill the page as it should. Could someone advise what causes Zoho Books

    • Python - code studio

      Hi, I see the code studio is "coming soon". We have some files that will require some more complex transformation, is this feature far off? It appears to have been released in Zoho Analytics already

    • API question - adding a thread to an existing ticket

      Hi Is there an API function for the customer to add to an existing ticket thread? example, customer puts in new support ticket. support replies and ask for more details. customer replies with more details -what api function is used for this (will add record append to same ticket number?) Thanks

    • search and Smart Bar both missing in Mail

      One of the users on my account does not have the search bar at the top right or the Smart Bar at the bottom left of the desktop Mail app. Any ideas how to get those back?

    • Why is Zoho Meeting quality so poor?

      I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going on

    • Hide fields only for creation

      Hello, I'd like to hide some fields only during the creation of a contact in Zoho CRM. In fact I have some fields that are automatically calculated thanks to an automation, so when my users create a contact I don't want them to fill those fields. I know

    • Items Below Reorder Point Report?

      Is there a way to run a report of Items that are below the Reorder Point? I don't see this as a specific report, nor can I figure out how to customize any of the other stock reports to give me this information. Please tell me I'm missing something s

    • Qwen as the default open source Generative AI model for Zia

      Hello everyone, Zia Generative AI is transitioning from Llama (8B parameters) to Qwen (30B parameters) as the default model. This means that users who were using Llama as a GenAI service will now use Qwen. This upgrade was made with a vision to enhance

    • Calendar week view: Today + 6

      Is there anyway to have the calendar change dynamically based on the date? Due to the amount of events, we only display a week at a time, but towards the end of the week, we can no longer see ahead to next week (without changing it manually every time).

    • How to restrict user/portal user change canvas view

      Hi , I would like to restrict user / portal user change their canvas view because I hide some sensitive field for them. I dont want my user switch the canvas view that do not belong to them But seems Zoho do not provide this setting?

    • E-Invoicing in Belgium with Zoho Books

      Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. This means that invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing

    • E-Invoicing in Belgium with Zoho Inventory

      Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. Invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing Works

    • Enhancement Request for Multi-Asset Work Order Feature

      Hello Latha, Thank you for your continued support. The multi-asset Work Order feature is extremely helpful. I did some testing based on our requirements, and during the process, I noticed a few areas where we need your team’s support to improve the feature

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • Weekly Tips : Make collaboration effortless with Whiteboard in Zoho Mail

      Working with your team often means switching between emails, notes, and other applications just to explain an idea. Maybe you are trying to sketch a layout, plan a workflow, or quickly brainstorm ideas—with text alone, things can get confusing. So how

    • Add Option to Mass Dispatch by User

      Hello! We are using the dispatch console to dispatch service appointments to our service ressources. Right now, the process is our dispatcher verifies each ressource's route for the day and dispatches it after validation. Sadly, there doesn't seem to

    • Introducing parent-child ticketing in Zoho Desk [Early access]

      Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

    • Error AS101 when adding new email alias

      Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.

    • How to add to Subforms via Zapier with Zoho Writer?

      I have the following layout for a Zoho Writer Document. As you can see there is a repeating subform taking in "Items". I am trying to make a Zapier integration with it, and I can see there is 1 field saying: "Items", but it does not specify how I'm supposed

    • Contrôles administratifs granulaires : un atout pour la sécurité des e-mails

      La moindre erreur dans votre système de messagerie peut coûter très cher à votre entreprise, tant en argent qu’en conformité et en image de marque. Pour beaucoup d’organisations, ce risque est bien réel. Les e-mails véhiculent quotidiennement des informations

    • Include the "Added Email ID" to the Filters of a Report

      Hi, With a Report and lots of entries, a normal thing is to filter entries by the submitter, but that is not included in the Auto Filter of Reports and you can't add a custom filter to a Report without specifying the actual value. I would like to be able

    • Marketer's Space: Why mobile optimization deserves a place in your email strategy

      Hello Marketers, Welcome back to Marketer's Space! Today, we'll talk about the importance of creating mobile-friendly email designs. While mobile phones were once used only to make phone calls, today they're used for almost everything, including texting,

    • Collections Management: #6 Realign Customers who gets back In-Term

      Arun stared at the subscription list on his dashboard. Another account had just been moved to Cancelled status after completing the whole dunning process. Nothing unusual, just that payment failures happen, retries fail, and cancellation is the expected

    • Zoho Mail IP Blacklist

      I need problems with send mails: Error: junk mail rejected - sender4-op-o10.zoho.com 136.143.188.10, is in RBL. Spamcop. Please remove FQDN for blacklist. Regards.

    • I can receive but not send emails

      Hello, I've been not able to send emails for almost a year now. I been using alternate email to do this. I want to know how to fix this so I can use my zoho account normally again.

    • Setting checkbox value on template in Sign from Creator

      Good day, Please help me understand how do I set a tick from a checkbox in Creator into a checkbox on a Sign template. Below is the only values on the Sign template and the code from Creator, "field_boolean_data": {}, "field_date_data": {}, "field_radio_data":

    • The challenge of 24/7 connectivity: Being present and meeting customer expectations

      Before television entered our homes, radio was our window to the world. We had to tune carefully to catch voices from distant places. When television arrived, the world began to grow smaller. We can watch rocket launches, see the goal that wins our favorite

    • How to download all attachments from inbox, send, other folders in one go

      Hi All, Appreciate if anyone could help me with steps for below requirement. How to download all attachments from inbox, send, other folders in one go. Even mapping to new folder will help me. Thanks in advance.

    • Next Page