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



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ




                                ご検討中の方

                                  • Recent Topics

                                  • Additional Address - Company Name

                                    It would be very helpful to have a "Company Name" field in the Additional Address shipping section.  In a situation where you drop-ship orders to a different address or different company entirely, it may be necessary to list the company name of the receiver. I understand that the Attention field can be used for that purpose, but that's not really the intended purpose of that field.
                                  • Unable to Delete Items – No Visible Transactions but Error “Items which are a part of other transactions cannot be deleted…”

                                    Hello Community, We are using Zoho Inventory for our business and encountered a persistent issue that is preventing us from deleting certain items. The message shown is: “Items which are a part of other transactions cannot be deleted. Instead, mark them
                                  • Keyboard UX for Assemblies

                                    The new Assembly module has a counter-intuitive behavior that ought to be corrected. When an Assembly is ready to be entered, there are two options given, the blue-highlighted "Assemble" and the gray "Save as Draft". This correctly implies that the normal
                                  • landed cost-need help with different currency under the same bill

                                    I’m having trouble recording landed costs in Zoho Inventory/Books. My purchase order is in CNY, but the landed cost (freight) I pay is in USD. Zoho forces everything under the same bill to use one currency, so I can’t enter the landed cost in its actual
                                  • Improved Functionality PO Bill SO Invoice

                                    Hello, I need to enter over 100 items, it's frustrating to scroll a few item rows and wait for more to load, then scroll again. It would be nice to have buttons that scroll to the top or bottom with one click. Furthermore, these items I'm adding are VAT
                                  • 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
                                  • I would like to request a new feature or setting for SalesIQ.

                                    Hello Zoho Team, I would like to request a new feature or setting for SalesIQ. Currently, when a user opens our contact widget and clicks on the "Chat with us" option, it opens a standard chat window that remains empty until either the user types a message
                                  • In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."}

                                    In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."} this is button Function used in the Creator map Inventory.Create_Credit_note(int CRE_ID) { return_value
                                  • Realtime Translations of Video via OnAir

                                    It would be an amazing feature to have a drop down selector in the On Air video area for attendees to select a language to convert the original language to.
                                  • Zia should track how customer relationships evolve over time

                                    Here's a feature idea that I've been thinking about The Problem Zia is great at analyzing individual interactions email sentiment, call transcription, best time to contact. But here's what it can't do: tell you how a relationship has evolved over time.
                                  • First Name in Mail

                                    While sending a mail/message to the user, I want only the first name to be displayed—for example: “Hi John” instead of the full name using "Hi ${Name_Field}"
                                  • Looking for Guidance on Building a Zoho Website

                                    I'm exploring the possibility of building a custom website with specific features using Zoho as an alternative platform. My goal is to create something similar to https://gtasandresapk.com , with the same kind of functionality and user experience. I'd
                                  • FSM integration with Books

                                    Hi, I have spent a few months working with FSM and have come across a critical gap in the functionality, which I find almost shocking....either that, or I am an idiot. The lack of bi-directional sync between Books and FSM on Sales Orders/ Work Orders
                                  • How to Track Inventory Usage from Zoho FSM to Zoho Inventory?

                                    Hi everyone, We’re currently working on integrating Zoho FSM with Zoho Inventory, and we’ve encountered a challenge we’re hoping the community can help us understand better. Here’s the context: When we create a Work Order in Zoho FSM that involves parts
                                  • Set Field Mandatory by Client Script ZOHO CRM

                                    #Tips of the day We can set the field as mandatory by the client script var field_obj = ZDK.Page.getField('Custom_Field1'); field_obj.setMandatory(true); Custom_Field1 = Field API Name Apart from is if you have required any kind of Zoho work please do
                                  • associating products with accounts

                                    I have all my accounts and products in zoho now. I need to generate a sales order for an account. The product lookup feature on the sales order shows no products...how can I get them to appear.
                                  • Can we rely on order of returned ids when inserting multiple records?

                                    Hello! API https://www.zoho.com/crm/developer/docs/api/v8/insert-records.html does not mention that the response array will match the input array*, keeping this important information implicit and someone might have doubts to rely on it. (*the response
                                  • New UI for Writer - Disappointed

                                    I've been enjoying Zoho Writer as a new user for about 6 months, and I really like it. One of my favorite things about it is the menu bar, which you can hide or leave out while still seeing most of your page because it is off to the left. I think this
                                  • Zoho CRM Community Digest - February 2026 | Part 2

                                    In this edition, we’re highlighting a few more product enhancements, along with some helpful community discussions that explore everyday CRM scenarios from automating reminders and managing lead outreach to making the most of APIs and client scripts.
                                  • Dont want to list inactive items.

                                    If an item is made inactive, there is no point in showing it in the item list. Please provide an option to hide all inactive items in 'Preferences'. 
                                  • Client Script event on any field of a Detail page

                                    Hi everyone! I'd like to trigger a Client Script when a user modifies a field - any field - from the Account Details page, how can I do this? I don't want to trigger it on a specific field, but on all of them. Thanks in advance!
                                  • Tip #66 - Exploring Technician Console: Network Statistics - 'Insider Insights'

                                    Hello Zoho Assist Community! Have you ever wondered why a remote session feels sluggish, or wanted to check whether connectivity issues are on your end or the customer's? That's exactly where the Network Statistics feature in Zoho Assist comes to the
                                  • 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
                                  • REFUND REQUEST FOR PLAN SUBSCRIPTION CANCELLED

                                    I have cancelled my Zoho Books subscription and would like to request a full refund for the subscription. Kindly process the refund at your earliest convenience.
                                  • purchasing a pagkage

                                    goodmorning i want to pay for my monthly package but your app is sayinng i have insufficient funds yet i loaded money on my account yesterday though in our currency of ugx
                                  • Edit Receipt, how?

                                    Do you notice the big blank space in Receipt? I want to remove that. I know there is a template but that blank space, I can't seem to remove it. Please help. Thank you!
                                  • Can I export a TXF (TurboTax exchange format) file out of Zoho Books?

                                    Hello, I'm trying to do my US Small Business Taxes using Intuit's Turbo Tax. Can I export my expenses from Zoho Books to a TXF format file, so that it can then be imported into Turbo Tax? Thanks, Rajnesh
                                  • Tax inclusive and exclusive for Sales invoices

                                    Hello, where can I set my tax to be inclusive or exclusive for invoices in Zoho Books? There used to be a button for me to do that right above the products table. Can someone help me please? Thank you!
                                  • Unable to produce monthly P&L reports for previous years

                                    My company just migrated to Books this year. We have 5+ years financial data and need to generate a monthly P&L for 2019 and a monthly P&L YTD for 2020. The latter is easy, but I'm VERY surprised to learn that default reports in Zoho Books cannot create
                                  • ZOHO Reports are taking longer time to get refresh

                                    Hi Team, Since last few days, I'm facing issues in getting updated reports. For eg: right after making an expense entry or even posting a journal, it is taking longer then expected for the updated reports. Refer below: "You are viewing the report that
                                  • 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!
                                  • Looking for Zoho + Twilio Automation Specialist (Duda Website Integration)

                                    Hi everyone, I’m looking for an experienced Zoho specialist to help build a mostly automated CRM and booking system for my service business. I already have a live website built on Duda.co and need help integrating my existing forms into Zoho CRM (no rebuild
                                  • Zoho CRM For Everyone UI Rollout Begins for All Users

                                    Hello Partners, We have started rolling out the new Zoho CRM For Everyone UI as the default experience for all users. This update is being released in three phases based on organization size and account type. We want to keep you informed of the rollout
                                  • How to retreive the "To be received" value of an Item displayed in Zoho inventory.

                                    Hi everyone, We have our own Deluge code to generate a PO according to taget quantity and box quantity, pretty usefull and powerful! However, we want to reduce our quantity to order according to "To be received" variable. Seems like this might not even
                                  • Introducing Explainer Videos for Zoho Desk: Solve everyday challenges with simple configurations

                                    Dear everyone, We have created a set of short explainer videos that show how common support scenarios can be handled using simple configurations within the product. The solutions often lie in the plain sight, but go unnoticed. Through these videos we
                                  • Notifications Feeds unread count?

                                    How do I reset the unread count on feeds notifications?  I've opened every notification in the list.  And the count never goes to zero.
                                  • Simple reliable solution to convert MSG files for AOL Mail?

                                    A simple and reliable way to convert MSG files for AOL Mail is by using a professional tool MacGater Mac MSG Converter. This software allows users to quickly convert MSG files into formats compatible with AOL, such as MBOX or direct email migration. It
                                  • Zoho One Support is non existent...

                                    I've tried through Email, Chat, this community and finally through Phone. There is no way to receive an answer. Email = over a week and no answer Chat = not available Community = no answer at all Telephone = after clicking myself through the callcenter
                                  • Disable Zoho Contacts

                                    We don't want to use this app... How can we disable it?
                                  • Custom module - change from autonumber to name

                                    I fear I know the answer to this already, but thought I'd ask the question. I created a custom module and instead of having a name as being the primary field, I changed it to an auto-number. I didn't realise that all searches would only show this reference.
                                  • Next Page