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

    • Invoice template, how to change the text under "Notes" and "Terms and Conditions"

      In "Invoice templates", there are two text/info sections at the bottom:"Notes" and "Terms and Conditions". It is possible to change the names of these two headings, but how is it possible to change/alter the text under it. As a standard it says "Thank you for your business" under Notes - I need to change it into something different- How? Thank you.

    • How to reply to thread via API

      We have built a webapp for our customers that uses the Zoho Desk API to enable each customer to view their full list of tickets, view individual tickets and raise new tickets. The Zoho Desk API doesn't have the ability to reply to a ticket/thread. Replies

    • Sending merged mail templates for signatures fail since today

      We have ZOHO one, we use merge templates in CRM to edit in ZOHO Writer, and from there send it for signature through zoho sign. This all worked up until today, suddenly we read in the log that the merge is succesfull but the sending for signature failed.

    • Feature Request - Make Lead List Larger and Adjustable

      Hi LandingPage team, I recently started using LandingPage and I am happy to share my feedback to help improve the app. I've noticed on the Leads page, there is no option to make the columns wider. It would be great if the comlumns expanded to fit the

    • Zoho Projects - Pin Recent Projects

      Hi Projects Team, It would be great if I could "pin" projects on the Recent Projects list in Zoho Projects. We have some internal projects which we regularly have to add time and some regular client projects. It would be great if I could pin those projects

    • ZDK Error

      I get this error when trying to trigger a CRM Function from Client Script: Uncaught (in promise) ZDKError: {"code":"NOT_ACTIVE","details":{"api_name":"activate_client_from_prospect"},"message":"api is inactive for the given custom function","status":"error"}

    • "Disbursing product components in phases, monitoring them, and displaying only the final product."

      i have a product composed of multiple components, and these components will be delivered to the customer in batches. However, the final invoice should only show the finished product. How can I issue (or release) the components and track their delive

    • Followed Subtasks doesn't show up in the Subtasks Section

      I have a task assigned to me now in the same task, there's a subtask and I am added as the follower on that task Even though I am a follower I still don't see that in the subtasks section The view permission for the profile is Related It's supposed to

    • Tip #39- Strengthen account security with Multi-factor Authentication (MFA) – ‘Insider Insights’

      Securing your organization's data begins with verifying that only the correct individuals have access to it. One of the simplest yet most effective ways to accomplish this is to enable Multi-factor Authentication (MFA) within Zoho Assist. MFA introduces

    • Automate timeout chat tracking with Workflows in SalesIQ

      With our feature-packed Nova release, Workflows has become one of the most powerful tools in Zoho SalesIQ. They let you automate follow-up actions when key events occur, such as when a chat ends, a visitor leaves a bad/good rating, or a lead is updated.

    • Mass edit / Mass update products

      Hi, Is there any way to mass update or bulk edit product fields in Zoho Inventory?

    • Automatic Verification of IMAP Integration Status

      Our sales staff have their O365 email integrated with CRM, over time this integration requires re-authentication via the UI. I can manually check the integration status by accessing Settings -> Channels -> Email -> Email Sharing -> "Configuration Type"

    • Tip of the Week #68– Share and access files faster with Zoho WorkDrive extension.

      Have you ever wasted time searching for the right file to attach to your emails—or worried whether the right people could access it? Without proper sharing settings, files might end up inaccessible to teammates or, worse, visible to people who shouldn’t

    • CV-Library: The Newest Source Booster in Zoho Recruit!

      We’ve expanded your sourcing toolkit — CV-Library, one of the UK’s largest and most trusted online job boards, is now available as a Source Booster in Zoho Recruit. This gives recruiters instant access to millions of UK-based candidate profiles, all without

    • Zoho AI Translate Task as Rest API

      I cant find any docs on how to use Zoho AI Translate Task from a rest api call https://www.zoho.com/deluge/help/ai-tasks/translate.html I am working on a custom Widget and I dont think I can execute zoho deluge ai translate task from a custom widget.

    • Is there the possibility to book less than 250 customer portal users?

      If you use the Creator, which is included in Zoho ONe, you can create a customer portal and give access to a maximum of 3 external people / customers, right? On the Creator website I saw that you can add 250 users for 100€/month. However, we don't need

    • Display Parts custom fields in the Work Order

      Hello, I see that is it possible to add custom fields in the Parts module. Would it be possible to also add those custom fields in the Work Order Module under Parts? This would be very useful for customer who want to showcase more information about parts.

    • Unable to edit Saved Estimates

      We are facing issue with editing the price or discount for a saved estimate for nearly 1 week.

    • Translation Blueprint & Picklists with Custom Values

      Hello everyone, I downloaded the translation file and I'm not finding the blueprint transitions. Does this means that the transitions cannot be translated? Also, the picklist values to be translated in the document are not the same that are actually used the in module. For exemple, for my lead module, the picklist values for Lead Status are : Not-contacted, contacted, junk and lost lead. In the translation document (English to French), this is what I see: PicklistValues.Leads.Lead_Status.Contact

    • How to create a custom sales signal?

      I want to create a custom sales signal for a custom module. is it possible to create one? If anyone know please let me know

    • Multi-line address lines

      How can I enter and migrate the following 123 state street Suite 2 Into a contact address. For Salesforce imports, a CR between the information works. The ZOHO migration tool just ignores it. Plus, I can't seem to even enter it on the standard entry screen.

    • Only show products in offers based on lead source

      We work with several lead sources, each with their own products and different pricing. For example, one product might have two or three different prices. Sometimes, when creating a quote, the wrong product is accidentally selected. Is there a way to only

    • Zoho CRM in Microsoft Power Automate Custom Connector

      Hi everyone, I’m building a Power Automate flow that integrates Microsoft Bookings with Zoho CRM. The goal is to automatically create a meeting (event) in Zoho CRM whenever a new appointment is booked via Microsoft Bookings. To achieve this, I created

    • Narrative 7 - The importance of data sharing

      Behind the scenes of a successful ticketing system - BTS Series Narrative 7 - The importance of data sharing Definition Data sharing requires a commitment to preserving the integrity and dependability of shared data throughout its entire lifecycle. This

    • TrueSync regularly filling up my local disk

      Seems that WorkDrive's TrueSync randomly starts filling up my local hard drive space. None of the folders have been set as "Make Offline" but still it seems to randomly start making file offline. The settings of the app is so minimal and is of no real

    • How can you re-push non failed submission through the integrations again?

      Hi, I can see there is an option the 'Re-push' failed integration submissions from Zoho Forms. Is there a way to do this for all submissions? We've just re-built an integration so things go into different fields and we would like to re-push everything

    • Check out in Meetings

      Why there is no check out in Meetings of Zoho CRM, very difficult to track

    • Issue with Zoho Projet

      Zoho Project on all the cellphones of my customer is crashing. He has mixed brands (Samsung and Pixel). Everything is fine on website and mobile website. Could not reproduce the issue in workshop using Samsung/Pixel/iPhone Uninstallation of Zoho Project

    • SecurePass email English language issue -- please hire someone to correct the English language issues sprinkled throughout your interface

      I wrote previously about some incorrect English in your SecurePass offering. After about six months it was corrected. I have never revoked permission before today and just discovered another language mistake that was not corrected. When you revoke a SecurePass

    • Published Components

      @zoho team, Checking if we can add a password for the public links as we have non-licensed users

    • Zoho Creator customer portal users

      Hi, I'm in a Zoho One subscription with our company. I'm running a project now that involves creating a Zoho Creater application and using the Zoho Creator Customer Portal.  At most we need 25 customer portal users. In our Zoho One plan we only get 3

    • Please Enable Snippets for Agents Adding Comments

      Snippets and templates are currently enabled for agents when they use the reply functionality. There is currently no way to add a template or snippets when an agent comments. This is really weird. Our agents don't use the reply functionality, only the

    • Tip of the Week - Extracting Data from JSON Columns

      Let's say you are importing a CSV or Excel file into Zoho Analytics. What if the file contains a few columns in JSON format? This is where Zoho DataPrep, embedded right within Zoho Analytics, comes in handy. This week's tip explains how to extract data

    • Deluge UI Updates

      Are there any updates planned for the Deluge UI in Zoho Desk? It feels quite dated and lack-lustre after you've spent some time in the CRM Deluge UI.

    • Zia Agents - Follow Ups

      It would be nice to have Zia Agents do follow ups. A lot of times agents are trying to schedule things with users and they say "can we set your printer up tomorrow?" and the user never says anything. A way to have a personalized reminder to the user automatically

    • Hide Agents name in Ticket Responses in "My Area"

      We were able to hide the agents name in the emails, however, the customer is able to see which agent has responded to a ticket in the thread of emails by going into their Help Center thread. Is there any way we can hide that information?

    • Option to Automatically Update Extensions

      Hello Zoho Desk Team, We recently received an email notifying us about an extension update that must be done manually. We’d like to request a feature that allows extensions to be updated automatically without requiring manual intervention. This would

    • Copy / Duplicate Workflow

      I have workflows setup that are very similar to each other. We have a monitoring system watching servers, and all notifications - no matter what client it is about - will come from a  noreply@ address which is not very helpful in having it auto assigned to the right account. I have setup a workflow that will change the contact name of the ticket (currently it would say noreply@) to the correct customer which is based on the subject line, as that mentions which server the alert it is about. I need

    • Embed Report with Auto Height

      Hello Developers, When we embed report within Page, we are getting one awesome feature to adjust the report height. "Auto" and "Custom' height. This "Auto" option works well when we have no records. But I want to embed report based on some conditions

    • Zoho Payroll: Product Updates - August 2025

      This month’s updates to Zoho Payroll bring enhanced efficiency and smarter features, simplifying payroll management for users in India, UAE, KSA, and US. Read on to explore how these updates can streamline your workflow. Filter Pay Runs by Type (India,

    • Next Page