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


Next>>

    • Recent Topics

    • Outage?

      Is there an outage? Everytime I try to access Zoho FSM (web, as admin) I get a blank screen.

    • File Upload and Add via API

      I've been attempting to upload to via the Files api and I have been hitting the wall with actually getting the file to attach. What type is the API expecting ? Base64 Encoded ? When I do I get a 414 Error. I would appreciate your help as I am currently

    • How to create Comparison across Period chart in a dashboard?

      Hi all How can I create this chart in a custom dashboard? The issue for me is that this chart is very small. The CRM module (unlike Projects module) has no ability to expand a chart. I want to make it larger, but also want to include it in a custom Forecast

    • CRM HAS BEEN SOOO SLOW For Days 05/15/25

      I have fantastic Wifi speed and have zero issues with other websites, apps, or programs. It takes an excruciatingly amount of time to simply load a record, open an email, compose an email, draft a new template, etc. Am I in a subset/region of subscribers

    • Trouble fetching custom fields from Zoho Booking

      I'm following the instructions from here : https://help.zoho.com/portal/en/kb/flow/user-guide/app-specific-documentation/articles/zoho-bookings#1_Problem_with_accessing_custom_fields But I can't get this to work. Here is the result of a test booking :

    • How to change an employee mail id

      Hi, Does the administrator have the rights to edit an  employees mail id. 

    • Is it possible to set create deal checked by default when converting a lead?

      In our company whenever a lead is converted we make a deal. It is a pain to have to check the box every time. I would prefer if it was just a default behavior and the box wasn't even there. But it would be fine if the box could be checked by default.

    • Sync Creator form submissions to WorkDrive folder

      I've made 10 Creator applications, and need to sync my each application's submissions into a WorkDrive folder. I need the form submissions to be PDF file type and sync to a specific folder for documentation purposes. I have tried to use a workflow, but

    • How do you map a user picklist field to another user picklist field.

      In Zoho Projects, I'm trying to map a custom field (user picklist) in Task Details to a field (user picklist) in the Project Details. How do you get the two to map to each other? This is what I currently have that works for my other fields but doesn't

    • Introducing Seamless Communication with WhatsApp Integration in Zoho Recruit

      Hello everyone, We are thrilled to announce that we have just launched an incredible new feature in Zoho Recruit that will revolutionize your recruitment process. With the integration of WhatsApp into Zoho Recruit, you can now seamlessly connect with

    • Custom Function : Copy multilookup field to text field

      Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2

    • Send a new invoice data from Books to local certified solution via API json due local compliance

      Greetings, I hope you are doing well and staying safe. Due to local compliance regulations, I am required to issue invoices exclusively using locally certified software, which Zoho Books is not. However, we would like to continue using Zoho Books, so

    • Unveiling Zoho CRM's New User Interface - The NextGen UI

      Hello Everyone, Last Wednesday, May 14th,2025, we announced the public release of Zoho CRM For Everyone, our most significant update yet. This release brings a modernized CRM experience with a redesigned user interface, new capabilities for cross-functional

    • compensation module - salary - No decimals allowed regardless of currency

      In the United Kingdom we have calculations in GBP which has figures to 2 decimal points. When using either the basic salary or using the CTC with benefits etc. It will block any upload or entry which is not a round number! I have advised Zoho One and

    • Tip of the Week #56 – Analyze performance with analytics reports.

      Wondering how well your team is managing communications in shared inboxes? It’s time to stop guessing and start knowing — with Analytics Reports! As an admin, you get a broader view of your team's performance by tracking important metrics such as response

    • Zoho Sprints is now AI empowered

      Enhance the quality of your work with the power of generative AI tools in Zoho Sprints. These tools help you write precise descriptions, summarize content, analyze sentiment and tone, and translate content into your preferred language, and write and explain

    • If Formula with Abs and Now included!

      Hi all, Having a bit of trouble with an If formula when creating a formula field with currency return type. This is what I've got: If(Now()>=${Agreement History.Rent Review Due}, '${Agreement History.Holdover Price}', 'Abs(${Agreement History.Rent Achieved

    • Kerala Food Cess - Not applicable to Government Customers

      We are stuck while entering sales invoice - as Central and State Government Customers are exempted from Kerala Food Cess. Can Support Team help us? Phone / Chat / Email from Zoho - No support for third day in a row!

    • Automate pushing Zoho CRM backups into Zoho WorkDrive

      Through our Zoho One subscription we have both Zoho CRM and Zoho WorkDrive. We have regular backups setup in Zoho CRM. Once the backup is created, we are notified. Since we want to keep these backups for more than 7 days, we manually download them. They

    • Add Pinned Tickets to top of queue

      As an IT Helpdesk, we have some tickets where they will need to be looked at daily over a week or 2, and the ability to pin a ticket to the front/top of the queue would be handy as we can be reminded to take a look, rather than placing them on hold and

    • Holding Shift to keep selected tickets

      It is annoying trying to change the category of tickets and then closing them. You have to select them one by one, no way to 'hold down left click and drag your mouse down to select multiple'. Once you have selected them and you change the category, you

    • Introducing Keyboard Shortcuts for Zoho CRM

      Dear Customers, We're happy to introduce keyboard shortcuts for Zoho CRM features! Until now, you might have been navigating to modules manually using the mouse, and at times, it could be tedious, especially when you had to search for specific modules

    • Zoho CRM's V8 APIs are here!

      Hello everyone!!! We hope you are all doing well. Announcing Zoho CRM's V8 APIs! Packed with powerful new features to supercharge your developer experience. Let us take a look at what's new in V8 APIs: Get Related Records Count of a Record API: Ever wondered

    • Turning off the new UI

      Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?

    • Threads view for email sent from Cases module in CRM

      Hello all, Following the previous announcement regarding the support for the Send Email functionality from within the Cases module, the Email thread view is now available for emails sent from the Cases module. This enhancement is for better readability

    • Sync Zoho Docs and Google Drive

      Sync Zoho Docs and Google Drive -  how can I do it?

    • Compensation | Salary Packages - Hourly Wage Needed

      The US Bureau of Labor Statistics says 55.7% of all workers in the US are paid by the hour. I don't know how that compares to the rest of the world, but I would think that this alone would justify the need for having an hourly-based salary package option.

    • Canvas Detail View Related List Sorting

      Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

    • Introducing Zoho CRM for Everyone: A reimagined UI, next-gen Ask Zia, timeline view, and more

      Hello Everyone, Your customers may not directly observe your processes or tools, but they can perceive the gaps, missed hand-offs, and frustration that negatively impact their experience. While it is possible to achieve a great customer experience by

    • Custom view placeholders

      Hi all, On some occasions it would be great to have placeholders setting up a custom view. Example in our case we have a field for a year. We would like to have a placeholder like $.{CurrentYear} that will insert the current year 2025 e.g. Now we have

    • Add Subform Field based on Record Field

      Hi All, I am struggling with finding a solution that can populate a subform field based on an existing field on the record. Use case is I have added Current Exchange Rate on a quote as a custom field, I then have a subform with Quoted items that include

    • Languages in Zobot

      Hello, I have found a list of supported languages for the Zobot. The information specifies the languages are supported in the following 3 features: SalesIQ supports 34 different languages in the following features. Resources (Articles, FAQs, Small Talks)

    • USA Military addresses

      When we have a client with a US military address adding them to the CRM, or having them fill in a form is a problem. Zoho Forms and CRM doesn't seem accommodate them correctly. It doesn't make sense for me to have to create a secondary data model for

    • Parentheses in System Path

      Zoho WorkDrive includes a mandatory parenthesis with the organization name in the desktop sync client. This adds parens to the system path. Many command-line applications do not allow for the use of parenthesis, so if you want to use a file saved on WorkDrive in a command line you cannot. Most major document syncing platforms do not allow parenthesis for this reason.

    • Hiring Staff Accountant in San Diego with ZohoBooks Experience

      Hello, We are a San Diego, CA company looking for an experienced Staff accountant or controller that has ZohoBooks experience for a full-time position. Please reach out if interested. Best, Ben

    • Workdrive 5.0 / API Documentation Workflows

      Hi Zoho, When will the API documentation of the workflows be published? We are interested in using it to trigger manual workflows from an external application. Greetings, Justin

    • Match Transaction > Filter | Allow wildcards in search

      The Filter function is useful for narrowing down to a specific set of transactions. It would be useful to have the ability to use wildcards in search. e.g. customer name "starts with" or " * " as a placeholder. e.g. "National * " instead of "National

    • Can your customer support speak every customer’s language?

      In today’s world, talking to your customers in their language is not a nice-to-have. It’s a must. It's one of the reasons that most businesses have trouble going global: Language barriers get in the way. Say, a customer from another part of the world

    • Sub accounts in Balance Sheet - specifically Assets

      I've added in a new account, IP Developed, under Intangible Assets. When I run the balance sheet report, it shows on its own without a header, just tacked on the bottom of all the other assets. I'd like it to show under Long Term Assets or Other Assets.

    • Change Last Name to not required in Leads

      I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

    • Next Page