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

    • "Undo Send" Feature

      Would love it if TeamInbox had an "Undo Send" feature, that gives you 10 seconds or so to "undo" the sending of an email. Many other email clients already have this feature, and my clients really miss it, as it has saved them many times in the past when

    • Better Notes Commenting

      Hi, I'd like to suggest better collaboration tools for NOTES. The current notes section for Accounts, Contacts and Deals is not ideally suitable for any degree of communication or collaboration. When responding to a note, there is no ability to leave

    • Zoho Sites

      Does anyone have experience building Zoho sites or know how I can find someone who does?

    • Zoho Crm Lagging

      Hi Zoho Support Team, Starting from today, my Zoho CRM has been extremely slow and laggy when accessing any pages or modules. This is affecting my work and overall productivity. Could you please help to check if there are any ongoing issues or if there’s

    • Is there a way to reference/attach mails to deals/contacts when the mails haven't come through their contacts normal email and the mail comes through software / app who use their mail system

      There are often system mails that come through systems or other software which use their email addresses since they use their own mail servers to mail. This causes an issue as it does not record the mail in the history of the CRM since the email is not

    • Recommendation

      I give up on Zoho. It's never going to be an all in one solution, their own apps don't even connect. Can any one recommend an alternative at least for the crm / people.

    • CRM - Site/Location

      Hi Zoho, One massive oversight of the Zoho CRM is the inability to add multiple sites or locations to one account. Many organisations have several (in some cases, hundreds) of sites across the country or even the globe. The workaround to this, of course,

    • An unknown error occurred. Please contact support

      Whenever I visit this page I see this. I changed browser and still the same. Can someone from Zoho help me please?

    • How to Streamline Pick & Ship

      Is there a way to streamline the built-in pick and ship process? I guess mostly on the ship side. Our current process allows us to choose shipping super fast. It's an EasyPost plugin for WooCommerce. You have to populate the boxes / weights / shipping

    • How to add, delete or rename the "payment method" drop down?

      When we recorded payment in invoice, there's a "payment method" drop down with choices like cash, bank transfer... We want to add and delete or rename some new selection. How to do such adjustment? Please advice.

    • Smarter data gathering with Query component in Wizards

      Dear All, Introducing the Query Component in Wizards for CRM! A smart search field that saves you time and effort, and helps you manage and gather data more efficiently than ever before. Long and complex record entries can be overwhelming and prone to

    • Introducing teamspaces and team modules in Zoho CRM mobile app

      Hello everyone, We have an exciting update to share in the Zoho CRM mobile app. As part of CRM For Everyone—a new set of features that reflect our vision to democratize CRM and make it accessible for all—teamspaces and team modules are now available on

    • Client Script - change page and/or section background colours

      Hello, Would anyone be willing to help me with a bit of Client Scripting code? I have had a go myself but only been able to alter the form field styles, not the overall page/section/heading styles. I want to set a different page background colour for

    • Client Script | Update - Introducing Subform Events and Actions

      Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

    • Zoho SalesIQのチャットボット、ブロックのコピー機能

      Zoho SalesIQのチャットボットの構築でドラッグアンドドロップで作成を行っているます。 内容は同じブロックのコピーペースト機能がないみたいなのですが、同一のブロック、同一の複数のブロックをいくつも作成する場合は、皆様はどのように行われていますか？ 例えば添付の４つのブロックをまとめてコピーして、別のフローの先につなげる場合です。 教えていただけますと幸いです。よろしくお願いいたします。

    • Questions About Zoho Commerce Member Portal

      Hello, A couple questions about the Zoho Commerce Member Portal: 1. Can I add only specific pages be added to the Members Portal, and not the entire website? 2. When a customer signs up on my Zoho Commerce site, is there a setting that gives me a chance

    • Cancel and refund

      Hi, Yesterday I paid for the Zoho email subscription. Within a few minutes, I realized that the subscription counts one email ID as one user. To make another email ID for the same domain name, I'd have to pay for another user. I emailed right away to

    • Online Payment Fees

      We don't take many online credit card payments so the merchant service provider (PayPal) charges us the 2.9% fee for processing the amount. I would like the ability for the fee to be automatically added to the total amount for "ease of payment". We'd

    • Error occured. please try again!!!

      I created a new list. Added two new contact's email addresses. I try to EDIT either one of them to add their first name, last name and phone number. Whatever I try to edit and update, I get the error message  Error occured. please try again!!! And it doesn't update any of their info. I tried just editing first and last name. Still get the error. No matter what I try to update, I get the error. I tried creating a new list, and adding just one email address and then edit it and also get the error.

    • "Send email as" not work

      Hi team, I currently use ZOHO MAIL services on the MAKE platform (formerly INTEGROMAT). In MAKE I entered my ZOHO MAIL credentials but the problem is that when the emails are sent from the automation in MAKE, the emails do not come in with the name set

    • *UPDATE: ISSUE RESOLVED, SEE HOW FOR HELP* Issue imbedding Youtube Videos

      **UPDATE: RESOLVED** For anyone that is having a similar issue, try this workaround before attempting to have the Zoho techs fix it. I have been in communication with them for weeks about this and they can't seem to fix the issue. Thinking it may have just been my computer or my browser, I tried two different computers on two different networks, each running different versions of Windows, and tried it on Chrome, Firefox and IE; nothing worked. So, needless to say, it's an issue with Zoho somewhere.

    • Backorder For Composite Items

      Hello If i released SO for composite item and use backorder feature of zoho inventory then it should backorder child item items of composite and not composite item.This is basic of backordering.I conveyed this to zoho call center but no solution yet.

    • Paid Support

      We are in the process of creating tiers for our support offerings. There will be three tiers of support available - 2 paid and 1 free. The paid tiers will be purchased in allotted hours. I need to figure out how to a) work in the out of the box SLA, Contracts

    • Where is the desktop app for Zoho Projects???

      As a project manager, I need a desktop app for the projects I manage. Yes, there's the web app, which is AWESOME for cross browser and platform compatibility... but I need a real desktop app for Projects that allow me to enter offline information where

    • Automatically CC supervisor

      Hello,  in our organization agents are replying to tickets and they are required to CC their supervisor on all emails to and from customers.  is there a way to have an email address automatically populate in the CC field when reply to a ticket?  tha

    • Zoho One - White Label

      Releasing a white-label feature for Zoho One, or any software or service, can offer several advantages and benefits for both the company providing the software (Zoho in this case) and its users. Here are some key reasons for releasing a white-label feature

    • Are this Features included in the Road Map

      1. Sync between description/short description in Zoho Books/Inventory and Zoho Commerce: I am unsure how it works now. I belive the description is not pulled. 2. Pick Up: This feature is great. It is added on Zoho Commerce but not on Books/Inventory which

    • Reconciliation - Show Transactions After End Date

      I did a quick search, and I've only seen this brought up indirectly. In the reconciliation interface, transactions dated up to a week after the end date should be available for being reconciled. The use case is pretty simple... many times, transactions

    • Auto populate email field in zoho form

      Hi,  Is there a way the email field in zoho forms can be auto populated based on the name selected from a drop down list?

    • Option to accept and pay for estimate from Public Estimate link?

      Is there any way that our customers can get the Estimate in their email, click on "View Estimate" and from the public link, click Accept and Pay? When they click that, in the background Zoho would create the invoice record in the so that the payment would

    • Kaizen #125 Manipulating Multi-Select Lookup fields (MxN) using Zoho CRM APIs

      Hello everyone! Welcome back to another week of Kaizen. In last week's post in the Kaizen series, we discussed how subforms work in Zoho CRM and how to manipulate subform data using Zoho CRM APIs. In this post, we will discuss how to manipulate a multi-select

    • Easily track referrals with Zoho Forms

      Referral tracking can be a powerful way for businesses to understand where their leads are coming from. With Zoho Forms, tracking the referral sources of your leads is an easy and straightforward process. Here are some tips to help you make the most of

    • Add an email to an existing ticket is not working

      I noticed that in Zoho Desk the funcionality to add an email to an existing ticket is not working using the syntax [##12345##], has the method changed? In red is the syntax we use to add email to an existing ticket As you can see, he did not add the email

    • New CRM to Campaigns Sync Doesn't Continue Making Updates

      Changes made in CRM are not appearing in mapped fields in matching Campaign records after migrating to the new sync process. The only way we've found to get records to update is to call into Support and point out the problem. After convincing Support

    • Zoho Integration with UPS

      I have 2 questions: Firstly, is there a way to notify UPS that we have a package to collect once we have done the shipping label? Secondly, how do I get the tracking number and shipment method onto the Invoice and Package Slip for the customer? Than

    • Cannot log in to IMAP account as of last night

      Hey I've been using MFA with an authenticator for a while and have had to use application passwords for Outlook and Edison Mail on my Android devices. Last night the app passwords started to be rejected on my Android devices so I created new ones for

    • Low Stock View

      We use the Low Stock view frequently as a guide to inform us when to reorder items, but the view is misleading because it does not take into account Purchase Orders that have already been raised. Unless you are aware and check item by item, this can lead

    • Improve History Feature in Zoho Inventory

      At present there is a "history" tab on Zoho Inventory Items, however this only shows a date and time stamp along with the users name. It doesn't say what was changed. What is the value of this if you can't see what was changed? My Ideal is to include

    • Payroll and BAS ( Australian tax report format )

      Hello , I am evaluating Zoho Books and I find the interface very intuitive and straight forward. My company is currently using Quickbooks Premier the Australian version. Before we can consider moving the service we would need to have the following addressed : 1.Payroll 2.BAS ( business activity statement ) for tax purposes 3.Some form of local backup and possible export of data to a widely accepted format. Regards Codrin Mitin

    • Show backordered items on packing slip

      We send out a lot of large orders, and often there are one or two things backordered. How can I fix the packing slips to show quantity ordered  & quantity packed There should also be the ability to "ship" 0 of an item so the receiver knows that things

    • Next Page