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

    • Display your zoho contact name when they call your mobile number

      As per the title If a contact calls the office number, the contacts name shows on mobile as long as I have their contact details registered in my crm. Is there a way that if the contact calls my mobile, their name can be displayed? Currently just their number shows when they call.

    • In Zoho Projects, is there a way to create a folders template under documents that can be used once a project is created?

      We have a specific folder structure that we would like to use that is standard across every project. Instead of having to create this structure every time a project is created, is there a way to create a template for the folders that can be added?

    • javax.mail.authenticationfailedexception 535 authentication failed

      Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, Rekha

    • Out of Office not working

      I have set up out of office on zoho mail, however, it does not reply to every mail sent to it. I have tested it by sending several test messages from multiple different email accounts, I will get a response to some of them, but not all of them this is

    • Always display images from this sender – Is this feature available?

      In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from several

    • Some emails are not being delivered

      I have this problem where some of my mail just seems to disappear. When I send it, it appears as sent with no mention of any problem, but my recipient never gets it, not even in the Spam folder. Same for receiving, I have a secondary e-mail address, and

    • Unbilled Items Report?

      Hello! Is there any way to display a list of items that remain unbilled, without creating an invoice for each customer to see if the unbilled items box is displayed? ;-) Ben

    • Making Calls Using ZDialer on Zoho Creator Widgets

      The Zdialer Browser Extension does not seem to recognize phone numbers on custom widgets. What is the best way to work around this?

    • ALL sent mails from my zoho email id go to spam

      when we send emails out of Zoho as like Gmail , ALL mails go to spam... more than urgent to get a solution !!!!!!

    • Não consigo enviar e nem receber e-mails

      Estou com problemas pra enviar e receber e-mails. Não consigo enviar (recebo uma mensagem de domínio inválido) e os e-mails que recebo estão voltando. Como devo proceder?

    • Time Field

      Good Day, I have a question, when I save a draft and reload it. Why does the time field format keeps goes from hh:mm to hh:mm:ss? Is there a way I can force it to load to hh:mm only? I have tried example = totime(input.TimeField, "hh:mm") in the -created

    • Receiving email problem

      I can send an email but can't receive from other platform like Gmail

    • Mas de 48 horas sin correo

      Estimados, llevamos más de 48 horas sin poder recibir correo y en este periodo hemos recibido información confusa y lo mas relevante es que Zoho dice que esta todo bien y no encuentra el error. Como deben comprender el perjuicio de no contar con un correo

    • Your account has been blocked due to security reasons.

      Hi everyone. Faced a problem that is wreaking havoc on my business! On December 14, blocked login via WEB, IMAP and POP3 with the reason of unusual activity, allegedly because of VPN/Proxy and suspicion that my account was hacked. I created a ticket to

    • Displaying related quotes in sales order and back

      Hi, My colleague liked to see to which sales orders, the quote has been converted. Quote shows Invoices, but not SO. Same, they would like to see the quotes in the sales order, as they can see invoices, packages, shipment, How can we achieve this ? Thank

    • Details & Limitations of the Free Forever Plan

      I cannot find any comparison/details about the Free Forever Plan. Can you please publish details of what are its limitations?

    • Missing Folders on iPhone Zoho Mail

      Under mailboxes on my iPhone, I don't have an inbox, sent folder, deleted photo, etc. See pics.

    • Query table pull last 12 months

      I am tying to pull the following criteria and the date is always what causes me the issue. I want to pull people (pco_id) who have entries of "event_id" being these 2 events and whos "kind" is Regular or Guest and where the event_starts_at (date column)

    • ChatGPT only summarize in English

      Hello i' v enabled chatgpt in salesIQ, it works great inside conversation (revise, Rephrase etc) add tags works well with another language than English. But when I want to summarize it render only in English, despite sales IQ is set to another language.

    • Vendor Assignment issue for staff in User Roales

      there is a limitation in software that we can't assing Vendors to our staff - we can only assign Customers on staff wise!! There is a limitation of this software that in case i want to assign limited vendors to my staff - it's not possible. Either i will

    • No Hope for Zoho Meeting

      Zoho Meeting is just the poorest meeting app I've come across in a long time. The support sucks too. I called to see if there was anything that could be done on the backend and while I was on a test meeting with support the video was lagging and freezing

    • Inventory Management for Manufacturer

      Hello, We are a manufacturing company in the FnB industry. We want to use the inventory management system to manage our raw material stocks and at the same time once we produce items, we need to increase our final product inventory while decreasing the

    • Does Zoho campaign de-duplicate based on mobile for SMS campaigns?

      Hi - We recently sent our first SMS campaign using Zoho Campaign integrated into Burst SMS and got feedback that some of our customers received multiple messages. Upon inspection, this was due to multiple contacts in our list containing the same mobile

    • Develop and publish a Zoho Recruit extension on the marketplace

      Hi, I'd like to develop a new extension for Zoho Recruit. I've started to use Zoho Developers creating a Zoho CRM extension. But when I try to create a new extension here https://sigma.zoho.com/workspace/testtesttestest/apps/new I d'ont see the option of Zoho Recruit (only CRM, Desk, Projects...). I do see extensions for Zoho Recruit in the marketplace. How would I go about to create one if the option is not available in sigma ? Cheers, Rémi.

    • Why is Zoho Meeting quality so poor?

      I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going on

    • Chat issues

      I am having a couple problems with the zoho chat feature. When I use Chat from the App bar, not everyone is getting messages (these are to different accounts, Yahoo & Gmail). I did finally get the Users to show up correctly. However, when in an active chat with someone, I only get one sound notification. No other notifications, pop up or otherwise, come through to alert if another message was sent. Also, the bottom Chat bar that shows Active chats while I am in email does not show any online contacts

    • How to Download Expense Attachments from Zoho Expenses Using Document Details?

      I am currently working on syncing Zoho Expenses with our internal portal. While syncing, I can successfully retrieve expense details, including document-related information such as file_name, document_id, and other metadata. However, I am facing an issue

    • Zoho Creator Upcoming Updates - December 2024

      Hi all, We're excited to be back with the latest updates and developments on the Creator platform. Here's what we're going over this month: Deluge AI assistance Rapid error messages in Deluge editor QR code & barcode generator Expandable RTF and multi

    • How to Retrieve and Store Expense Attachments from Zoho Expenses?

      I am currently syncing Zoho Expenses with our internal portal. During the sync process, I can successfully retrieve expense details, including document-related information such as file_name, document_id, and other metadata. My goal is to retrieve these

    • Introducing Formula Fields for performing dynamic calculations

      Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This

    • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ （12/19）

      ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 12月開催のZoho ワークアウトについてお知らせします。 ※定員に達したため、受付を終了しました。 ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho ワークアウト」を開催します。 Zoho サービスで完了させたい設定やカスタマイズ、環境の整備など……各自で決めた目標達成に向け、 他の参加者と同じ空間で作業を行うイベントです。先輩ユーザーや他の参加者と意見交換をしながら集中して作業に取り組むことが可能です。

    • Does an email preview pane view register as opened?

      Hi, If a recipient of one of my campaigns views it in a preview pane, opposed to opening the email, does Zoho Campaigns register that email as being opened (viewed)?

    • Portal orders

      Is it possible to set up an ordering system through the portal so that my customers can place orders through their portal?

    • CLIENT PORTAL (If clients can place orders directly on the portal)

      Zoho client portal is excellent. Everything is there except one thing. Client should be able to place orders directly on the portal. This would enhance the portal and end users will be extremely happy. This suggestion infact came from one of our client.

    • Macro Email to be determined by a ticket field

      Hi, we are a commercial energy brokerage and are implementing Desk as our helpdesk tool to replace manual emails, personal whataspp and telephone. We have setup a macro rule when we can trigger an email, update ticket status and trigger a task.... but

    • Welcome Link Expired

      Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>

    • Zoho expense linked with Campaign instead of customers

      Hi, Is there a development planned for linked an expense or a report to a zoho campaign? Indeed, suppose I created a campain in which I add different clients (for example a trip to a foreign country where I meet 3 different clients), I would like this campaign to be linked to the expenses I have. Say I have a plane ticket, taxis and 1 hotel night, I would like those expenses to be linked to the 3 clients. With Zoho expense, it is not possible at the time (or maybe it is but I do not know how!). thanks

    • 🎄 Jingle, Mingle, and Automate: Spread Christmas Cheer with Zoho Desk Auto-Replies! 🎄

      Hello Everyone! Welcome to this week's episode of the Community Learning Series. Christmas is in the air, and I’m sure we can all feel the jingle and the mingle of the season! The folks at Zylker Techfix are no exception—they’re busy with holiday plans

    • Adjusting Physical Inventory

      Not getting very far with support on this one, they say they are going to fix it but nothings happened since November. Please give this a thumbs up if you would like to see this feature or comment if you have some insight. Use Case: Inventory set to be

    • Print PO receipt

      Hi I would like to print the PO receipt. There does not seem to be any way to do this. I track batch numbers and printing the PO does not show this. Only the receipt would show the details of the receipt. Currently I print the screen which does not have

    • Next Page