Create custom widgets for a simplified end-user experience | Community | Zoho Projects

Create custom widgets for a simplified end-user experience | Community | Zoho Projects

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


    Access your files securely from anywhere







                        Zoho Developer Community





                                              Use cases

                                              Make the most of Zoho Desk with the use cases.

                                               
                                                

                                              eBooks

                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                               
                                                

                                              Videos

                                              Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                               
                                                

                                              Webinar

                                              Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                               
                                                
                                              • Desk Community Learning Series


                                              • Meetups


                                              • Ask the Experts


                                              • Kbase


                                              • Resources


                                              • Glossary


                                              • Desk Marketplace


                                              • MVP Corner




                                                        Manage your brands on social media



                                                              Zoho TeamInbox Resources



                                                                  Zoho CRM Plus Resources

                                                                    Zoho Books Resources


                                                                      Zoho Subscriptions Resources

                                                                        Zoho Projects Resources


                                                                          Zoho Sprints Resources


                                                                            Qntrl Resources


                                                                              Zoho Creator Resources



                                                                                  Zoho CRM Resources

                                                                                  • CRM Community Learning Series

                                                                                    CRM Community Learning Series


                                                                                  • Kaizen

                                                                                    Kaizen

                                                                                  • Functions

                                                                                    Functions

                                                                                  • Meetups

                                                                                    Meetups

                                                                                  • Kbase

                                                                                    Kbase

                                                                                  • Resources

                                                                                    Resources

                                                                                  • Digest

                                                                                    Digest

                                                                                  • CRM Marketplace

                                                                                    CRM Marketplace

                                                                                  • MVP Corner

                                                                                    MVP Corner







                                                                                      Design. Discuss. Deliver.

                                                                                      Create visually engaging stories with Zoho Show.

                                                                                      Get Started Now


                                                                                        Zoho Show Resources


                                                                                          Zoho Writer Writer

                                                                                          Get Started. Write Away!

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

                                                                                            Zoho CRM コンテンツ






                                                                                              Nederlandse Hulpbronnen


                                                                                                  ご検討中の方




                                                                                                        • Recent Topics

                                                                                                        • Zoho Mail not working

                                                                                                          Anyone else had the issue where emails wont send from either the desktop CRM or the mail app? It just says "syncing" then "failed". I deleted it and tried to access emails through the CRM on my phone (fold) but they dont show. It seems it is impossible
                                                                                                        • Zoho Commerce B2B

                                                                                                          Hello, I have signed up for a Zoho Commerce B2B product demo but it's not clear to me how the B2B experience would look for my customers, in a couple of ways. 1) Some of my customers are on terms and some pay upfront with credit card. How do I hide/show
                                                                                                        • Flex Your Creativity – A New component to Canvas in Zoho CRM

                                                                                                          Hello Everyone We’re excited to introduce Flex, a new component for Canvas in Zoho CRM! Flex is here to give you greater control over how your data is displayed in your layouts. This component enables responsive layouts that adapt across different screen
                                                                                                        • In the Blue Print Transition requirement received it will show 8 check field in pop up if they any one of this field then only move to next stage Ist quote

                                                                                                          In the Blue Print Transition requirement received it will show 8 check field in pop up if they any one of this field then only move to next stage Ist quote Pls help how i fix this
                                                                                                        • Linking Multi-UOM Barcodes to Products in Zoho Books

                                                                                                          Greetings, I'm using Zoho Books for retail shop and I'm running into a bit of a challenge with products that have multiple Units of Measurement (UOMs) and corresponding barcodes. For example, I sell cigarettes both as individual packets and in cartons
                                                                                                        • Convert Item to composite item

                                                                                                          When using Zoho CRM integrated with Zoho Inventory/Books, the item creation process is a little messy. After a few years of trial and error, we have settled on creating items in CRM, which are sync'ed to Zoho Inventory using Zoho's own internal integration.
                                                                                                        • What’s New in Zoho Inventory | April 2025

                                                                                                          Hello users, April has been a big month in Zoho Inventory! We’ve rolled out powerful new features to help you streamline production, optimise stock management, and tailor your workflows. While several updates bring helpful enhancements, three major additions
                                                                                                        • Mapping “Account Name” from CRM to Campaigns

                                                                                                          I’m syncing our Contacts list to Campaigns and want to select “Account Name” as an available field. Account Name does not appear in the drop down menu for CRM field even though Account Name is a field in our standard layout. How can I make it availa
                                                                                                        • Zoho Campaigns to Zoho Analytics Sync Fails – Field Mapping Shows But Not Applied

                                                                                                          I’m facing a persistent issue with the Zoho Campaigns integration to Zoho Analytics in my workspace. Here’s a detailed description of the problem: Under Edit Setup, I see a field mapping summary that shows: DataField Mapping: Most Recent Login However,
                                                                                                        • How to link web sales payments through Stripe to invoices?

                                                                                                          I have just set up an online shop website which accepts payments through Stripe.  The payment appears in Zoho Books through the Stripe feed as 'Sales without invoices'.  In order to keep Zoho Inventory in step, I manually (for now) create a Sales Invoice
                                                                                                        • Partially receive PO without partial Bill?

                                                                                                          Most of our inventory is pre-paid. Let's say we purchase 30 pieces of 3 different items for a total of 90 pieces. It is common for our supplier to send us the items as they are ready. So we will receive 30 pieces at a time. How can I partially receive
                                                                                                        • Cliq iOS can't see shared screen

                                                                                                          Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards
                                                                                                        • Zoho People & Zoho CRM Calendar

                                                                                                          Hi, Does anyone know if it is possible to link Zoho People and the calendar in CRM? I would like when holidays are approved they automatically appear in the calendar on CRM. Thanks 
                                                                                                        • Secure your external sharing process with OTP Authentication

                                                                                                          For any business, it's crucial to share files externally in a way that is both secure and controlled. Let's say you want to share confidential data with your partners and vendors. You must ensure that only your intended recipients can access the shared
                                                                                                        • Currency transition

                                                                                                          We are using Zoho CRM in Curacao, Dutch Caribbean. Our currency is currently the ANG. Curacao will be transition ing from using the ANG (Antillean Guilder) to using the XCG currency (Caribbean Guilder) on March 31st 2025, see: https://www.mcb-bank.com/caribbean-guilder.
                                                                                                        • Reply to email addresses wrong.

                                                                                                          I have setup my Zoho mail account using my main domain and I also have an Alias setup from a different domain. In Settings - Mail - Compose I have selected to the option "For replies, send using The same email address to which the email was sent to". This seems to work perfectly, except that the email always sends the email with a Reply To email address from the main domain not the alias. This can be changed in the Reply To drop down box to the right of the From Address in the email, but I obviously
                                                                                                        • Multiple images, one record

                                                                                                          I have a form that is used to capture the following info: -Facility Name -Origin -Shipment # -Picture of Damaged Pallet (Image field) I want to be able to capture multiple pictures without having to create a new record, as there might be multiple damaged pallets on the shipment. Obviously, one never knows how many damaged pallets might be on a shipment so I'd prefer not to create 20 image fields and have most of them unused.  I'd prefer that they have an option to add another image only if they need
                                                                                                        • how to dynamically upload multiple images for single record?

                                                                                                          Is the use of dynamic multiple images in a single record supported? I've searched but have not found the answer. If it is supported, how is it done? I saw 1 suggestion to add a sub-form but that doesn't seem to be the answer. I don't want to add a set number of image fields. Each record would have a different number of images. I want the addition of images to be dynamic. thanks
                                                                                                        • Multi-upload field

                                                                                                          Hi I need to include a file upload field that allows the user to select multiple files and upload all at once. I hope I can do this with HTML, I'm new to merging HTML and deluge... Can I trigger a hidden file upload window to appear On User Input of a field in an embedded form? Thanks! Levi
                                                                                                        • is it possible to add multiple attachments to a record?

                                                                                                          Hello, I'm trying to add functionality so that a record can have several associated attachments. I obviously added a File Upload field to my form, but that appears to only allow one total. Is there a way around this? Thanks, - Kevin
                                                                                                        • multiple upload files in zoho form

                                                                                                          Hi,  I need upload multiple files  in a single upload field thkns
                                                                                                        • Multi file upload

                                                                                                          Hi, I just wonder if one could upload multiple files in one shot, say between one and three files, without adding multiple File Upload fields? Thanks, Alalbany
                                                                                                        • Copying records from a Custom Module into Deals

                                                                                                          Hello, I recently created a custom module to handle a particular type of order/transaction in our business. Having got this up and running I've realised that it would be much better to use the Deals module with a different layout instead. We've entered
                                                                                                        • How to rename the Submit Button by using deluge script

                                                                                                          Hi everyone, As we know, the Submit button can be renamed in the form builder setting. But I have scenario where I need the Submit Button to be renamed differently according to condition. Anyone knows how to do it? Thank You
                                                                                                        • Zoho Inventory Feature Roadmap Visible To All

                                                                                                          Hello, please consider making your feature roadmap visible to us users so that we know what to expect in future. This may appease current users who are seeking clarification on feature implementation dates, so that they can make an informed decision whether
                                                                                                        • Detail View in Mobile without Labels

                                                                                                          Zoho creator 6. I have been trying to acheieve this but not able to. I have a quick view of my articles using custom layout for mobile. When i tap on an article it opens in detail view on my mobile which has two cols. Left displays label and right the
                                                                                                        • Upcoming Changes to LinkedIn Parsing in Resume Extractor

                                                                                                          Starting 31 July 2025, the Zoho Recruit Resume Extractor will no longer support direct parsing of candidate data from LinkedIn profiles. Why Is This Change Needed? In accordance with LinkedIn’s platform policies, extracting profile data through browser
                                                                                                        • Can't find parent child ticketing

                                                                                                          Hi I can't find parent child ticketing under tickets in this new organization... I have in the past on other organizations
                                                                                                        • What's New in Zoho Invoice | April - June 2025

                                                                                                          Hello everyone! We're excited to share the latest feature updates and enhancements we've made to Zoho Invoice from April to June 2025. In this, you will learn more about the following features: New Integrations via Zoho Marketplace Add Images to Email
                                                                                                        • Keeping Track of Email Threads

                                                                                                          Hi, Z CRM is great for tracking all the activities one would want to track whilst qualifying leads, converting to customers, closing deals etc etc, however.... ....although I can use Z CRM to send an email to a lead/contact and have that recorded as an activity for other team members to see, there is no way of capturing an inbound email from that lead. Assume my lead replies to my email sent from ZCRM, in my case, the response arrives in my ZMail account. However I can't get it back into ZCRM to
                                                                                                        • Zoho Creator invokeUrl to retreive PDF

                                                                                                          I'm trying to retreive a record PDF to send to Print Node. Tried with and without the zoho_creator_connection. pdf_content = invokeurl [ url :"https://creatorapp.zoho.com.au/<org_namespace>/<app_link_name>/record-pdf/<report_link_name>/" + input.ID type
                                                                                                        • Bulk upload image option in Zoho Commerce

                                                                                                          I dont know if I am not looking into it properly but is there no option to bulk upload images along with the products? Like after you upload the products, I will have to upload images one by one again? Can someone help me out here? And what should I enter
                                                                                                        • How to Automate Monthly PDF Reports with Filters in Zoho Creator

                                                                                                          Hi everyone, I’m trying to build an automated monthly reporting process in Zoho Creator and would appreciate suggestions or best practices from anyone who has done something similar. What I’m trying to do: I have a form called New_Customer with fields
                                                                                                        • Zoho App Builder

                                                                                                          I’m looking for a Zoho Creator developer to build a simple app for tracking site expenses for a construction company. Key features: mobile form, dropdowns for projects and expense types, photo attachment for invoices, auto-calculated totals, and Excel
                                                                                                        • Captcha can't be enabled conditionally

                                                                                                          Hi Problem: captcha on a form can't be enabled conditionally. Why is this a problem: Because I use the same form on our website (public) in the portal and mobile app. In the portal it works but in the mobile app it doesn't. So there should be a way to
                                                                                                        • Modifying Product Details

                                                                                                          I am in the process of setting up new products in Zoho Commerce and have encountered a few problems: 1) Tabs It seems that Product Details pages do not have the ability to create Tabs. eg:  https://www.thedebugstore.com/tp240141-aardvark-usb-i2c-spi-host-adapter-total-phase.html
                                                                                                        • Enhancements in Portal User Group creation flow

                                                                                                          Hello everyone, Before introducing new Portal features, here are some changes to the UI of Portals page to improve the user experience. Some tabs and options have been repositioned so that users can better access the functionalities of the feature. From
                                                                                                        • ACH Returns Don’t Trigger Dunning or Reverse Payment in Zoho Subscriptions

                                                                                                          Zoho Billing marked an ACH payment as successful and kept the subscription active — even though the payment was later returned by the bank (NSF). There was no update to the invoice or subscription status, and I had to manually clean it all up. For credit
                                                                                                        • Enhancements to finance suite integrations

                                                                                                          Update: Based on your feedback, we’ve updated the capabilities for integration users. In addition to the Estimates module, they can now create, view, and edit records in all the finance modules including Sales Order, Invoices, Purchase Order. We're also
                                                                                                        • Before Going To The Qc stage , site ready ness file upload mandtoty how to achive this in the blue print transition

                                                                                                          Before Going To The Qc stage , site ready ness file upload mandtoty how to achive this in the blue print transition On click of the Predelivery transition can we show site ready ness file upload mandtoty or on click of the QC show the alert message site
                                                                                                        • Next Page