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

    • Archiving Contacts

      How do I archive a list of contacts, or individual contacts?

    • Problems with clipboard paste into ticket comments

      Problem as title. Using Chrome get to paste contents of clipboard but submit gives 'you've exceeded the character limit of 30,000 for this comment' irrelevant of actual number of characters. Edge just pastes txt 'undefined' irrelevant of actual contents of clipboard All other areas of Zoho desk work fine with clipboard paste (i.e. new ticket description) it's just comments on existing tickets that seem to have problem. Was all working fine until early yesterday (14th) Client is Windows 10 Pro 1803

    • Support Mixed Visibility Settings in Knowledge Base Categories

      Hello Zoho Desk Team, We hope you're all doing well. We’d like to submit a feature request regarding visibility settings in the Knowledge Base module. 🎯 Current Limitation As of today, when a category is set to a specific visibility level (e.g., Public),

    • Is there a way to set Document Owner/Sender via the API

      When sending requests for zoho sign, it would seem zoho uses the id of the person that created the zoho api cred to determine the owner_id, is there a way to set a default for this?

    • Announcing New Features in Trident for macOS (v.1.20.0)

      Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Change the "From" email address easily. When composing or replying to an email,

    • we need to add a Customer Number field to the PDF document templates

      Hello everyone. We are currently using Zoho Inventory for our small business operations and have found it to be a valuable tool. However, we’ve encountered a specific requirement: we need to add a Customer Number field to the PDF document templates (such

    • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

      Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals

    • Announcing new features in Trident for Windows (v.1.27.6.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your email communication. Let’s dive into what’s new! View and manage .pst files. A .pst (Personal Storage Table) file is an Outlook Data Storage file format for storing

    • Email limit reached

      I'm assessing whether zoho crm will work for our startup, however I tried to send emails to my leads and after 12 emails got the notification that email limit has been reached. That is ridiculously low. Whats wrong and how can you fix that. I am still

    • Importing Into Zoho CRM

      Do you have a list in Excel that you would like to import into Zoho CRM? If your administrator has not restricted your ability to import, the process is fairly easy to accomplish, but understanding the options can make everything go smoother. First you may need to prepare the spreadsheet Remove any extra rows from the top of the spreadsheet, like titles or blank lines. Row 1 should be the column headers. Row 2 should be where the data starts. Make sure that there is a column for any required fields

    • Agent working hours

      Hi, I know it is possible to set company business hours but is it possible so that agents can have different ones? I.e. some agents cover later hours on specific weeks - can these be set so those agents that are "working" get notified about tickets etc. 

    • Analyze the Name of the Deal Owner and Created by

      I need to display the Name of the User who created a deal and the Deal Owner. Since both fields are lookups to the same table (Users), it defaults to the user record of the Deal Owner and I cannot display the name of who created it. I can generate the

    • Date Import Problems

      I'm trying to import products from csv/xls files, but I can't get the Sales Start Date field to import. I know the import is working because all the other information is imported, but the Sales Start Date field is left empty. I think it must be a format

    • Canvas and Related lists

      Hi, As much as I like canvas, when adding in a asection with related lists,it doesnt mimic the same functionality as the standard view within the CRM e.g left hand panel will show the module and total number of records. Is there a way of indicating this

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Zoho Notifications - Received two notifications for one message and none for the other

      We had a client reply to a ticket twice in one minute. The ticket owner received two emails for the second message but none for the first (which was crucial content and unfortunately was therefore missed). I'm assuming this created a race condition -

    • New Search Function

      Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display which

    • Format handling error

      Hi, I'm having an issue when merging a document using a custom function when with decimal numbers. In my template preview, it's seems correct ,but when I do the merge and attach the file to a record, all types of docs aren't displaying the number correctly.

    • Better integration between Zoho CRM and Zoho Bookings

      I've noticed that when a meeting which was created in Zoho Bookings is updated by a sales person in Zoho CRM, the change is not reflected back into Zoho Bookings. I have raised this with support who advised that meetings created in Bookings need to be

    • Offline mode on Android TV app?

      Hello! Is there a way to use Zoho Show offline in the Android TV app? I have an Android TV based projector, and I travel with it, and don't want to have to rely on a steady internet connection when giving a presentation.

    • Enhancements to Custom Connectors in Zoho Creator

      Hello everyone, At Zoho Creator, we believe in providing you with the necessary tools to achieve a well connected ecosystem of apps. Our Custom Connectors feature is a testament to this, enabling you to integrate with a wide range of external services

    • issues with manually shipping sales orders - advise needed please

      we are new to zoho inventory. we are going to roll the program out to our company within a couple of weeks and during the implementation process we have come into a roadblock with manually packaging and shipping sales orders. its important to note important

    • Problem with the "Search" function

      Hi, I've been using Workdrive for a few days and lately, the files I added in Workdrive don't appear in the search. It looks like my latest files aren't indexed. Are you aware of this issue ? 

    • Connect Woocommerce new order to zoho books via zoho flow

      Hello i want help to create a flow to create a new sales order from woocommerce to zoho books. Can someone send me step by step flow, functions and fields?

    • [Webinar] Deluge Learning Series - AI-Powered Automation using Zoho Deluge and Gemini

      We’re excited to invite you to an exclusive 1-hour webinar where we’ll demonstrate how to bring the power of Google’s Gemini AI into your Zoho ecosystem using Deluge scripting. Whether you're looking to automate data extraction from PDFs or dynamically

    • Getting error "invalid warehouse_id" when trying to update any transaction in Zoho books

      I got a message from Zoho saying that the Warehouse and Branch has been merged into one category "Locations" Once I migrated to this setup I was no longer able to edit any invoice / create creadit notes - got an error saying "invalid warehouse_id" I never

    • customize payment page

      Is there a way to customize, other than the theme colour, the payment page that customers are taken to from invoices? I can't seem to find a way. I just don't like the formatting of the current page and would like to make it look better. I've looked at

    • Delay function execute

      I've got a workflow which uses a webhook to send information to Flow, which in return updates a record in Creator. Problem is, by the time this has executed, the rest of my script has run and can't find the (yet to be) updated info in the record. Is there

    • Zoholics Europe Awards

      We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! This is your chance to shout about the amazing things you've created, connected, or achieved with Zoho's developer application!

    • Return "kit_quantity" when fetching Kit items via "List all the items" API call

      I have been appreciating the new Kits feature quite a bit, it is exactly what we were looking for in Zoho to solve many pain points. However, there is 1 problem I am running into and that is the fact there is no stock information that can be pulled for

    • Mapping Issue

      since, Tickets are already mapped with the Requestors and when we map Requestors with Organization, then Tickets are not visible under that Organization. Kindly solve this issue.

    • Automating Pricing in Zoho Inventory Based on Brandline Quantity

      I am currently setting up my Zoho Inventory system and would like to implement an automatic pricing feature for sales orders. We have created a custom field called "brandline" for our items. All products with the same brandline value should have the same

    • Tags with Zapier

      Maybe I'm missing something....I hope so... Using tags for triggers is a key need.  This prevents us from having a ton of different lists. I am trying to find out how to add a tag using zapier when someone makes a purchase....but it doesn't seem to be

    • Print & PDF Support for Composite items

      There needs to be a way to print a composite item showing all the components, qty & images.

    • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

      Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers

    • Querying CloudSQL using NodeJS?

      How can I query CloudSQL over nodejs? Are there any rest apis from which I perform Select Queries in the data of a Workspace? In the v1 we had C#, Python, Java for CloudSQL Now I only see Java? I am confused about the overall API of Analytics, there any

    • We cant create a custom function

    • More context, fewer tabs: View lookup modules' data within a CRM Canvas page

      Hello everyone, How often do your users juggle multiple browser tabs just to piece together the full context of a record? This update can make their lives easier. You can now add lookup modules' fields to a Canvas detail view page and a Canvas list view

    • Claude + MCP Server + Zoho CRM Integration – AI-Powered Sales Automation

      Hello Zoho Community 👋 I’m excited to share a recent integration we’ve worked on at OfficehubTech: ✅ Claude + MCP Server + Zoho CRM This integration connects Zoho CRM with Claude AI through our custom MCP Server, enabling intelligent AI-driven responses

    • Live webinar: Power-up your business presentations with Show's add-ons

      We all spend a good amount of time building presentations for meetings, reports, and pitches. But even with good content, slides can sometimes feel basic or less engaging. That’s where having the right tools helps. With Zoho Show’s add-ons, you can embed

    • Next Page