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

    • Editing recurring tasks

      Hi there, I use recurring annual tasks quite often but sometimes I have a contact leave an organization so I want to re-assign that annual task to a new contact. When I go into the task to change the contact it only does so for the current year. Future

    • Cross Module Filtering – Use Fields from Lookup modules in Custom Views criteria and Advanced Filters

      Hello everyone, Zoho CRM now enables you to achieve deeper filtering of records in a module, using fields of a lookup, thereby enhancing your data management experience manifold. This filtering based on lookup module fields is now available in advanced

    • On Duty Requests - Zoho People Data

      Hello Team, We are currently using the On Duty Form to record Work From Home (WFH) requests in our organization. However, we are facing an issue where pending On Duty requests are not appearing in the Attendance Module. For example, if I submit On Duty

    • Business Day Logic Update: More Accurate Scheduling for Your Workflows

      Hello everyone, We’re improving how business-day calculations work in workflows, especially when triggers happen on weekends. This update ensures that offsets like +0, +1, and +2 business days behave exactly as intended, giving you clearer and more predictable

    • Styling for Subform Fields using client script

      Currently we can add styles to list and detail page for fields using .addstyle in the Client Script But that is missing for fields of Subform We would really like the feature to addstyle for subforms in the detail page Can you please consider adding it,

    • Zoho Commerce -

      Zoho Commerce currently only allows merchants to define the United Kingdom as a single shipping zone, which creates a significant issue for businesses operating between the EU and the UK. Under the Northern Ireland Protocol, Northern Ireland follows EU

    • Add a way to connect Log360 Cloud logs with Zoho analytics

      Hi, Several month ago Log360 Cloud was added to zoho one - and this is great. But as far as I see there is no prebuilt way to connect Zoho analytics to the logs we have in Log360 Cloud. Please add a prebuilt connection like we have for so many other zoho

    • IP flagged as abusive

      I'm getting the error that 136.143.188.15 is listed as abusive. I've checked with mxtoolbox.com and it is indeed in the list

    • date & datetime client script getInput types

      Please add date & datetime as available types for the getInput client script function. https://www.zohocrm.dev/explore/client-script/clientapi/Client#getInput

    • Approval Workflow Not Triggering When Status Updated via Custom Button

      Hi Team, I’m facing an issue with an approval workflow in my application. I have a workflow that updates a record’s Status field from “Pending” to “Waiting for Approval.” I have configured an Approval Workflow with the condition: Status = "Waiting for

    • Automate the file import step

      Hello everyone, I have a Sales - 'Account' category, and currently import the file to update it as follows: Import Accounts - From File - Update existing Accounts only - select and match the field the CRM. Since we have been using Microsoft 365 SharePoint.

    • Data Import

      Hello Latha, Is there any option to enable data import option in Equipment module? Best regards, Chethiya.

    • Unable to Access /crm/v7/taxes – OAuth Scope Mismatch in Zoho CRM API

      I am currently integrating Zoho CRM (v7 API) with our system and I need clarification regarding the Taxes API and OAuth scopes. Context: We are creating Quotes via the API (/crm/v7/Quotes) Each quote contains line items with taxes (e.g., TVA 19%, 10%,

    • Email from CRM being Blocked or Marked as Spam by Google (and maybe more)

      In the past 24 hours we’ve noticed that emails sent via Zoho CRM are being blocked or flagged as phishing, particularly by Google. The issue seems to occur specifically when emails contain links. URLs like www.domain.com or www.example.com are automatically

    • Marketing Tip #29: Make it easier to shop by grouping products into collections

      A well-organized store helps customers find what they want faster, which directly improves conversions. When products are grouped into clear categories or collections, shoppers don’t have to scroll endlessly or search manually. It also makes your store

    • 【無料/オンライン】4/30開催｜Zoho ワークアウト（オンライン勉強会）

      ユーザーの皆さま、こんにちは。 コミュニティグループの中野です。 4月開催の「Zoho ワークアウト」のご案内です。 本イベントは、Zohoユーザー同士で交流しながら 設定・運用・活用に関する課題解決を目指すオンライン勉強会です。 「設定を進めたいけれど、一人だと手が止まってしまう」 「他社がどう活用しているのか知りたい」 「相談できる相手がおらず、運用に悩んでいる」 そんな方におすすめのイベントです。 ▶︎参加登録はこちら（無料） https://us02web.zoom.us/meeting/register/qIH1ut8aTnq-R7-21eF3BQ

    • WhatsApp Calling Integration via Zoho Desk

      Dear Zoho Desk Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho Desk. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need for traditional

    • Zoho Desk - Support Plan by Time Log Hours

      Hi Desk Team, When creating a Support Plan, it would be great to have an option under Plan Type for Time Based Plan. This would be based on the number of work logs created for a customer account. It's very common to offer a support contract which has

    • Help Center and SEO: Any Benefit to My Domain-Mapped Website Ranking?

      First of, I love the Help Center which I've just decided to integrate into my website to replace its old-fashioned FAQs. So much more to achieve there now! Lots of new benefits to the site visitors and to me in terms of organizing and delivering all the

    • How to set custom Sales Order numbers

      I am trying to create Sales Orders with data from Jotform submissions. Auto number generation is disabled within Books. Whereas the flow Input recognizes the number (40732 in this example), the Output does not. How can I fix this? I'd like the number

    • What's New in Zoho Inventory | January - March 2026

      Hello users, The first quarter of 2026 has been dynamic! We’ve shipped a powerful set of updates in Zoho Inventory to enhance item control, improve warehouse efficiency, expand integration and reporting capabilities. From a unified item creation experience

    • Zoho Commerce - Mobile App Order Creation

      Hi Commerce team, I would like to suggest a feature for the mobile app that would make it much easier to create and process orders on the go. Problem Currently, while it is possible to create a Sales Order in Zoho Inventory, the process is not optimised

    • Inventory "Bulk Actions" button - add more fields to "Bulk Update > Select a field"

      Can we not get a lot more actions that are commonly used by customers into the "More Actions" button on the Inventory list? More fields listed in the Bulk Update > Select A Field? Possible Bulk update Fields Preferred Supplier ( to quickly move items

    • Zoho Mail Android app update: UI revamp

      Hello everyone! We are excited to share that the first phase of the Zoho Mail Android UI revamp is now live. In this update, we have redesigned navigation bar at the bottom to quickly access the Email, Calendar, Contacts, and Settings modules. Also, the

    • Users I've shared the sheet with cannot use the Custom Functions

      Hi, I have a Zoho Sheet worksheet that I shared to 2 colleagues, giving them full access: In that worksheet, I created a button with a custom Deluge function and it works flawlessly for me: For those I shared the worksheet to, when they click the button,

    • Zoho books - Project Module - Itemised expenses

      Hi All, I heavily use the projects function in Zoho books and can work for one client for successive weeks, providing labour and incurring the occasional general expenses.  As an example, during the one purchase, I purchase 10 widgets and of these 10, 

    • Urgent Security Feature Request – Add MFA to Zoho Projects Client Portal Hello Zoho Projects Team,

      Hello Zoho Projects Team, We hope you are doing well. We would like to submit an urgent security enhancement request regarding the Zoho Projects Client Portal. At this time, as far as we are aware, there is no Multi-Factor Authentication (MFA) available

    • Full Module-Level Access Control for Custom Profiles in Zoho Projects

      Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding access control limitations in custom user profiles within Zoho Projects. Current Behavior: We created a custom profile intended for support agents,

    • How to save custom report for future use ?

      Dear, How to save custom report for future use ? Thanks & Regards Shamnad 94460055258

    • Need to be able to save Customized Reports

      There are several standard reports in zoho books.  Each of these can be 'customized' with various parameters - BUT, these cannot be saved for re-use later. In several of the zoho modules you can customize a search list (eg for Estimates or Invoices etc)

    • Split Bills/Expsense between multiple projects and/or clients

      I need to be able to split vendor invoices/ expenses between multiple clients. Entering the bill multiple times is not only time consuming, it defeats the purpose of having a unquie identifity bill number and will allow for possible duplicated entry.  Below is an example from Quickbooks Desktop. Splitting costs over various projects is a common job costing function that I am very sad and surprised is not an option in Zoho Books. Unless I am missing it somewhere? Thanks for your help!

    • Vendor bills cannot be assigned to a customer or a customer project?

      I'm confused on how to handle outsourced contractor expenses on a customer project.  Between my business and the contractor, the invoice they send me fits obviously into Zoho Books as a Bill. However, I need to be able record those expenses to the client

    • A few suggestions for Zoho Books

      Hello. I've been evaluating Zoho Books for a small law firm practice. The interface is solid and I like the integration of accounting and time tracking, which is hard to find among cloud based services. I have a few suggestions that would be very helpful in determining whether we can adopt Zoho Books: 1. Be able to assign bills to clients/projects. Quickbooks desktop allows this and is very helpful in keeping track of bills that haven't been paid, but will be invoiced to clients as an expense. Creating

    • Book project costs to tasks

      Hi all, New to zoho but far from new to this sort of platform. I've been scouring the web for a suitable platform for my growing business. I'm currently using Xero and WorkFlow Max but it lacks a key need. I signed up to zoho projects and books to test

    • Project expenses in Zoho Books

      Just the way timesheet is used to calculate labour cost for a particular project, how do i record other expenses against a project such as materials and consumables used for the project? So that under report, I can view the total amount expended on each

    • Supplier Purchase Orders applied to a Project

      We are finding it difficult to decide the best way track project expenses in Zoho books and would like to know how other users are handling this task. We provide Professional Services and engage 3rd party Suppliers on most projects and provide them with

    • Anyone using Books to track Project Profitability? If so, I could use some guidance

      Hello Zoho Community. I am a recent subscriber to Zoho, and its part of an ongoing evaluation.  My company (and my clients) have extensive project-tracking needs.  The Projects module seems to be good from a project management standpoint, but I am perplexed

    • Deluge Error: "Data type of argument of function 'get' did not match required type [BIGINT]" when working with Lookup fields

      Hi everyone, I’m facing an issue in Zoho CRM Deluge while working with lookup fields. Setup: Module: Monthly Bills Field: Customer (Lookup → Accounts) Module: Laundry Orders Field: Laundry_Account_Name (Lookup → Accounts) Field: Expected_Revenue (Currency)

    • Opt-out from mailing list means can't email at all??

      It seems that if a contact unsubscribes from a mailing list the only way to email them is to uncheck the email opt-out box first, then re-check after the email has been sent. I've been through a chat with support and they confirmed this. This seems bizarre. Many of my clients don't want to receive a monthly newsletter but they definitely want to be in email communication with me, often on a daily basis. Any thoughts out there?

    • Email Opt Out Question

      Has the problem where if a customer is emailed opt out prevents you sending standard emails? For me this feature is simply to stop any email marketing and should not block people from receiving emails via Zoho mobile, which makes no sense.

    • Next Page