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

    • One notebook is on my Android phone app, but not on Web or PC app.

      This problem started in stages. At first my phone was occasionally failing to sync. Then I noticed two things added to my Phone App. One was an existing notebook had a new cover, and the other was a new Note Card with an odd text in it. These were only

    • New notecards not syncing across devices

      Hello. I just noticed this problem happen recently. A new note being created on one device is not appearing on a different device, even though they're supposed to be synced with each other through setting it up on your account. I don't know if there's

    • Does Thrive work with Zoho Billing (Subscriptions)?

      I would like to use Thrive with Zoho Billing Subscriptions but don't see a way to do so. Can someone point me in the right direction? Thank you

    • Is it possible to add HTML or a button on email templates in Zoho Desk?

      Hello team, I am working on getting the best use out of Zoho Desk. I have noticed that when you hit 'reply' on a ticket, it comes with a small 'survey' to the recipient saying something like 'how would you rate your experience with us?'... so my question,

    • Is it possible to add buttons on email replies to internal team members?

      Hello everyone, I am currently trying to set up some workflow rules to trigger when a ticket is created. I have noticed there is a button that can be added to email templates when sending email alerts from workflow rules, for example ${Cases.SUPPORT_PORTAL_BUTTON}.

    • What is the use of the stage environment ?

      Salut, I am woundering what is the use of the stage environment. Usually, I do all the testing in developpement, and then go straight to production. The only thing I cannot test in developpement, is the result for portal users. Could the stage environment

    • Peppol Malaysia API

      Hi Zoho Books, my country Malaysia will going to implement "Peppol" (E-Invoicing), starting 1 Jul 2025 for all businesses. The government intends to provide API for accounting app. The workflow involves creating an invoice from accounting app, triggers

    • At transaction level Discounts for Zoho books UAE version

      Dear Team, Please add transaction level Discounts for Zoho books UAE version. I have been requesting Zoho team past 3 years, Transaction level Discounts is a mandatory option required for our business needs. Zoho books Indian version has the option then

    • New in CRM: Dynamic filters for lookup fields

      Last modified on Oct 28, 2024: This feature was initially available only through Early Access upon request. It is now available to all users across all data centers, except for the IN DC. Users in the IN DC can temporarily request access using this form

    • Sales Order automatic Convert to Invoice using boolean True or false

      It is possible to convert the Sales order to an invoice using a boolean field, true or false Example: I create a field in my Sales Order, I name it QBO Invoice, and the field type is Boolean, true or false. Let's say the default is false, so when I change

    • Presenting the brand new Zoho Bookings!

      Hello everyone, Greetings from Zoho Bookings! We're happy to announce a new version of our product with enhanced features to simplify scheduling, coupled with a sleek interface and improved privacy across teams. Here's what you can expect from the latest

    • Feature Request: Ability to copy notecards to Windows desktop

      Hello, Please consider adding the ability to copy notecards to Windows desktop. Thanks!

    • Script on Page used as dashboard don't work anymore

      Salut, I have a page used as dashboard that worked fine, but recently the workflows don't seem to work, I have the icons like on a page for portal user when I try to look at it as admin. See screen shot : Anybody knows what could have happen ? The only

    • Invalid URL error when embedded sending url into iframe for my website when using in another region

      Hi team, My site is currently working on integrating your signature feature as part of the system functionality, it's working great but recently there's been a problem like this: After successfully creating the document, i will embed a sending url into

    • Add Direct Ticket Link to Zoho Help Center Portal in Email Replies

      Hi Zoho Support Team, We hope you're doing well. We’d like to request a small but valuable improvement to enhance the usability of the Zoho Help Center portal (https://help.zoho.com/portal/en/myarea). Currently, when someone from Zoho replies to a support

    • Zoho Error: This Operation has been restricted. Please contact support-as@zohocorp.com for further details

      Hello There, l tried to verify my domain (florindagoreti.com.br) and its shows this error: This Operation has been restricted. Please contact support-as@zohocorp.com for further details. Screenshot Given Below -  please check what went wrong. Thanks

    • Zoho Flow Needs to Embrace AI Agent Protocols to Stay Competitive

      Zoho Flow has long been a reliable platform for automating workflows and integrating various applications. However, in the rapidly evolving landscape of AI-driven automation, it risks falling behind competitors like n8n, which are pioneering advancements

    • Error AS101 when adding new email alias

      Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.

    • How to mass update member status in a CRM Campaign?

      Does anybody knows how to mass update member status of the contacts (or leads) associated to a campaign. I can click on a campaign record and go to the Contacts in the Related List fields but then it shows only 10 contacts per page at once. It is hard

    • 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

    • First Respons time questions regarding ticket SLA's, Ticket Re-Assignment, and Ticket Closure.

      I am chasing down a few outliers on tickets that my team is reporting to me seen in some of our Zoho Analytics Dashboards with regards to Zoho Desk with regards to First Response Time. Our support organization is setup with different SLA's based on three

    • View Expenses in Zoho Books Without Approval or Reports in Zoho Expense

      Hello, I’m using both Zoho Books and Zoho Expense (on the free plan for both). I would like to view the expenses recorded in Zoho Expense within Zoho Books, but I read that they need to be approved first. Since I manage a small freelance business, I don’t

    • Idea: Workflow Rule Trigger Only When Subform Row Is Updated (Thanks to New Inline Row Feature)

      Hi Zoho team and community, With the recent update to Zoho CRM, we can now add or delete rows inside subforms without entering edit mode, using the inline Add row button. This is a fantastic improvement for user experience — seamless, fast, and efficient.

    • Blocking / black listing customers

      Hi, We have a situation, we observed that certain customers are blocking multiple appointments with our advsiors but not showing up. Some of these are repeat offenders. This leads to those service hours getting blocked and not available for genuine customers.

    • Turning off the new UI

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

    • Seriously - Create multiple contacts for leads, (With Company as lead) Zoho CRM

      In Zoho CRM, considering a comapny as a lead, you need us to allow addition of more than one contact. Currently the Lead Section is missing "Add contact" feature which is available in "Accounts". When you know that a particular lead can have multiple contacts, why was this feature not included. Now we have to miss out other contacts or enter them somewhere in the description.!!! this is bad.

    • Global Sets for Multi-Select pick lists

      When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

    • Change default "Sort by"

      Is there a way to change the default "sort by" when searching across modules?" in Zoho CRM? Currently the default sort method is "Modified time" but i would like to utilize the second option of "relevance" as the sort by default and not have to change

    • Create project (flow) and assign to person without account (company)

      Hi Zoho Support & Community, I'm trying to automate a process using Zoho Flow to create a Zoho Project and link it directly to a Zoho CRM Contact. This reflects our B2C workflow where we primarily deal with individual Contacts, not Companies/Accounts.

    • Forte's Extra Costs

      Hello everyone in the Zoho community, I wanted to share some information about Forte in case anyone wanted to look into them as a processor.  I currently use Stripe, but wanted to use Forte's ACH to pay vendors and take ACH payments for our products.  This is one of the only ACH processors that Zoho accepts. They state their cost is $25/month plus their transaction fees for ACH.  However, after signing up and going through their approval process, I found this out they work with a PCI compliance service

    • Can Zoho CRM JS SDK Send Notifications, Create Tasks & Calendar Events?

      Hello everyone! I’m just starting to explore this topic, so please excuse my beginner-level questions! Is it possible to use the JS SDK (https://help.zwidgets.com/help/latest/index.html) to: Send messages (signals, notifications) to specific employees,

    • Restricting Printing

      Hi Is it possible to stop users printing documents?

    • Backup and Restore of Projects

      Hi Guys, my boss asked me "do we store regulary offline Backups of Zoho Projects" and i could only answer "no way". Is there really no way to backup and restore a project manualy? As Projects is the main Product we decided to use Zoho it could be that

    • Enable Zia Bot for Intelligent Conversations in Zoho Cliq

      Hi Zoho Cliq Team, We would like to request a new feature: the ability to interact with Zia via a dedicated bot in Zoho Cliq, in a way similar to how users interact with GPT-based assistants. Use Case: We're looking for functionality beyond the existing

    • Zoho RPA is now available in your Zoho One bundle!

      Hello All! Of late, it's been quite a stint of new app integrations in Zoho One. This announcement pertains to the addition of another Zoho application, the most sought-after Zoho RPA - Robotic Process Automation, to the bundle. What is Zoho RPA? Zoho

    • Data types in custom fields

      Hi, I've been trying to create a custom field to enter purchase order dates , but there is only one data type in the drop down to choose from which is a "Text Box ( Single Line )". I need the "Date" Data type. Please give me a solution regarding thi

    • Change rate after xxxx kilometers

      Is there a way to change the miileage rate after a certain mileage. After 5000 kilometers, we want the rate to automaticly change. Thank !

    • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

      Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:

    • Can't attach

      I am having problems sending attachments. I am trying to attach some PDFs to an email (as I do several times every day) but the progress bar on the attached file gets stuck somewhere between 20%-70% and when I hit send I get the error message 'Attachment

    • WhatsApp Channels in Zoho Campaigns

      Now that Meta has opened WhatsApp Channels globally, will you add it to Zoho Campaigns? It's another top channel for marketing communications as email and SMS. Thanks.

    • Next Page