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

    • [WEBINAR] Effortless migration to the VAT-ready South Africa edition of Zoho Books

      Hello there, If you are one of our early users from South Africa using the older edition of Zoho Books, this webinar is for you! We have now launched a new South Africa edition with VAT support, to which you can migrate your existing data. Join this session,

    • Accounting on the Go Series-52: Capture Receipts on the Go, Right from Your Lock Screen.

      Hello everyone, We’re excited to introduce a feature that will make your life so much easier—especially for those constantly on the move! With iOS 18, Zoho Books now allows you to capture receipts directly from your lock screen using Locked Camera Capture.

    • AT - Austrian Accountant familiar with ZOHO

      Hello, as I have just migrated to ZOHO and unfortunately have to change my accountant next year, I am looking for an accountant (for Austria) who already has experience with Zoho or who already manages clients using Zoho books. Is there anyone here from

    • Zoho Workflow issue

      Dear Zoho Users, I have Zoho Books premium subscription, I have created a email alerts workflow for Invoices and following are the configurations for the same: 1. Workflow for Invoice module 2. Choose when to tigger - created or edited 3. Filter the triggers

    • Accounting on the Go Series-53: Swift Transactions at Your Fingertips-Zoho Books in Your Control Center

      Hello again, We’ve all had those moments where you need to get something done quickly, but the process of unlocking your phone, finding the app, and navigating through menus slows you down. Now, with Zoho Books integrated into the iOS 18 Control Center,

    • Update on PDF Download Issues Caused by Antivirus Software

      Hello users, Antivirus software is designed to protect your computer from malicious software and threats. However, they may mistakenly identify legitimate files and software as threats at times. This is known as a false positive. We have received reports

    • Accounting on the Go Series-54: Effortlessly Find Your Zoho Books Customers in Your Phone’s Contact List

      Hello Zoho Books users! How are you all ? We’re happy to share a handy new feature in Zoho Books mobile app. Now, you can access your Zoho Books customers right from your phone's contact list, making it easier to stay connected on the go. How this can

    • Integration of Phase 2 -e-invoicing- KSA

      Zoho Team, I want to get a training of integration of phase 2 invoicing KSA in zoho step by step.

    • I can not save new invoice

      Hello Now I am trying to save a new invoice but I can not save it because showing unpaid invoice warning which are not overdue. Please let me know how to skip unpaid invoice warning letter and save new invoice. Thank you

    • ADD CONDITIONS FOR FIELD IN ZOHO BOOKS TEMPLATE CUSTOMAZATION

      HELLO I WANT TO ADD CONDITIONS FOR FIELD IN ZOHO BOOKS TEMPLATE CUSTOMAZATION FOR SALES ORDER . I HAVE SET %StatusStamp% IF APPROVAL I WANT THAT TEXT TO BE DISPLAYED WITH GREEN COLOR OTHERWISE OF OTHERR STATUS RED COLOR AS SHOWN IN CODE BELOW . BUT IT

    • Accounting on the Go Series-55: Seamlessly Add New Vendors While Creating Transactions from Scanned Documents

      Hi there! We’ve made handling documents and vendors in Zoho Books even simpler. Now, when you upload a document and scan it, if the app detects a vendor that isn’t already in your organization, you don’t have to leave the page to add them manually. With

    • Accounting on the Go Series-57: Effortlessly Add and Manage Bank Accounts from the Zoho Books Mobile App

      Hi all, Great news for our users in the US and Canada! Managing your finances just got a whole lot easier. Zoho Books has always made it seamless to integrate bank accounts and fetch feeds automatically. Now, we’re taking it up a notch—directly from the

    • Accounting on the Go Series:58-Effortless Compliance: Download XML for Invoices & Credit Notes on Mobile

      Hi there! In Mexico, XML files are crucial for electronic invoicing and fulfilling SAT (Tax Administration Service) requirements. These files ensure your transactions are accurately recorded and tax-compliant. Now, you don’t need to rely on the web app

    • Auto Generated Invoice number YEAR

      Auto Generated Invoice number shows transaction year as 25 even though it's 24 still.

    • Books generiert keine valide XRechnung

      Hallo zusammen, ich möchte hier ein Problem ansprechen, das mir aktuell bei der Nutzung von Books erhebliche Schwierigkeiten bereitet, und hoffe auf Austausch oder Lösungsansätze von anderen Nutzern. Bei der Erstellung von XRechnungen mit Books treten

    • WHEN UPDATE ORGANIZATION INFO OLD INVOICES ALSO CHANGE INVOICING DATA

      Hi We have updated our tax information because we have become a company, up until now we were an individual. The problem is that when updating the data in the zoho books profile all the old invoices change their tax information as well. Is there a way

    • Invoice import error - duplicate customer name column - there are no duplicates

      It is not allowing the importing of any rows because of a duplicate customer name problem, but there are no duplicates in the custoemr name row. Has anyone dealt with this issue before?

    • [WEBINAR][Feb 2025] Automate your entire financial operations from receipts to reconciliation with Zoho Books & Zoho Expense integration

      Hello there, We are hosting a free, live webinar on the importance of travel and expense management solutions for businesses, and how Zoho Expense automatically syncs with Zoho Books to simplify your accounting even further. The webinar is on February

    • Customize Layout

      I am using "Customize Layot" for customize Quotation template but I try to add logo into the header by "%ScaledLogoImage%" code but dont add logo into header. what is problem?

    • Problem - cant add Users (i.e. Zoho one / CRM Users) to BCC or CC in email, i.e. Sales orders or Retainers

      I can go to zoho books email templates, and select any email template, and automatically include any Zoho One user, i.e. member of staff. However in the context of sending an email, it will not let us add a member of staff from the user list, instead

    • UK MTD ITSA

      UK Making Tax Digital for Income Tax I have had notice this is to apply from April 2026. What is Zoho doing about this? I will need to start planning to implement this in the next months so need an update as to what I will and will not be able to do in

    • Partial refunds

      I am trying to process refund for a one item invoice, however the refund is partial: i am getting this error while creating credit note, can anyone share some wisdom about this

    • Zoho Books Roadshows are back in the UAE!

      Hello there, Business owners and accounting professionals of the UAE, we’re coming to your cities! FTA accredited Zoho Books is now officially one of the Digital Tax Integrators in the UAE. With the newly launched direct VAT filing capabilities, we're

    • New user After moving over from QBO

      New user observations/suggestions. QBO took away a lot of features I was used to with the desktop version. Chaos ensued. Zoho Books has a lot of what I was used to and a bit more. Good deal Some things I have run into and suggest some upgrades. 1: The

    • Sole Trader - Financial Advisor (Appointed Representative) - Paid via Capital Account but no Invoicing...

      Hi. I'm about to venture into a new business after 12 months of intensive learning/exams. A little chuffed if I may say so especially at 52! I really like the look of ZoHo Books for my modest enterprise but I'm in need of some guidance, please. My services

    • Multi-Unit Inventory with Flexible Unit Selection (Purchase in One Unit, Sell in Another)

      We need multi-unit inventory management in Zoho Books with the flexibility to choose units (e.g., Box or Piece) at the time of purchase or sale. For example, if 1 Box = 10 Pieces, we should be able to record purchases in Boxes but sell either in Boxes

    • Disputed Purchase Invoices

      We have recently moved to Zoho Books from Sage. In Sage we were able to post a purchase/vendor invoice but mark it as on dispute. This would usually be a pricing query or if something was damaged. It would show in their ledger, so we could agree their

    • No TDS Deduction

      In some of our case, where we are reselling items at the same rate we purchased. In this scenario, Indian IT Law has a provision to request customer not to deduct TDS if the transaction value is same. TDS is paid by us (intermediary reseller) before we

    • CBSA - GST CHARGES on imports

      Hi there, We have a questions about landed cost categorization. We received a shipment from overseas. CBSA invoiced us for the GST on the items. Now we entered the CBSA-GST as a separate bill and attached it as landed cost to the main invoice based on

    • Zoho Books

      How do I manually insert opening balance?

    • Sales order & purchase order item links for item details

      This is fantastic for checking lots of things, I use it a lot. It would be great to see it extended to invoices & bills On another note, may as well throw in my favourite whinge ..... Wish you guys would get the PO receive differences sorted urgently,

    • Bank charges are applied. Please select a bank account.

      Hello, I'm trying to add bank charges to a customer payment, but I get the error message "Bank charges are applied. Please select a bank account." I found this old thread, where it says that I need to "select a Bank account for the 'Deposit To' dropdown

    • How to add receipts

      How to add receipts

    • Support for auto-upgrade in TrueSync (for Windows)

      WorkDrive TrueSync app now supports auto-upgrading to the latest version for Windows OS. You must manually download and install the TrueSync app version 3.4.0 to avail this feature. Download the latest TrueSync app for Windows (version 3.4.0) Supported

    • WorkDrive API Documentation

      WorkDrive provides users and developers an extensive set of APIs to help integrate functionalities of Zoho WorkDrive with other Zoho applications and third-party tools. We have published the official WorkDrive API Documentation page for all external users.

    • March 15, 2023: Zoho Docs is discontinued

      As of today (March 15, 2023) Zoho Docs is discontinued for all users. We would like to thank our customers for trusting us for so many years! Going forward, we're confident you'll enjoy using Zoho WorkDrive for all your advanced file management and collaboration

    • Introducing WorkDrive 4.0: Enhanced productivity. Advanced data administration. (Phase 1)

      Hello All, We're excited to share the release of WorkDrive 4.0, which includes important new features and enhancements focused primarily on productivity, secure collaboration, data administration, integrations, and user experience. Read the official announcement

    • External download link limit

      Can You please help us to understand this For Zoho WorkDrive external users, the download limit is a maximum of 5 GB total download size and a maximum of 50 first-level files and folders What is the meaning of first level? We are using these files in

    • Dynamically catching new file creations

      I have a team folder with many subfolders, and in those folders we add new documents all the time. I'd like to have a workflow or script to notify me (and then take other actions) when a file is added anywhere in that structure that ends in "summary.txt".

    • Rotate an Image in Workdrive Image Editor

      I don't know if I'm just missing something, but my team needs a way to rotate images in Workdrive and save them at that new orientation. For example one of our ground crew members will take photos of job sites vertically (9:16) on his phone and upload

    • Next Page