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

    • Zoho Books email notifications

      Hi, We are currently implementing Zoho books for our organisation. I have 2 questions. 1. Are we able to embed HTML into our emails to make them look as part of our business ? Branding is very big issue for us and i would like to make sure that all branding efforts are carried across into the notification emails.. 2. Is there a way to preview the notifications that are sent out to our customers so we can make sure the look and feel is as we require ? thanks

    • Plug Samples #12: Verify Customer Mobile Numbers with OTP to Avoid Spam Entries

      Hi Everyone! Verifying customer information is critical in business to filter out junk data and spammers. Whether it’s lead generation, appointment booking, or any other operation, ensuring quality data is essential for driving meaningful outcomes. A

    • All notes disappeared

      I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,

    • Cost Center accounting

      Hello all. We are looking at switching from MYOB to Zoho books. Love all the features in books - esp. CRM integration, but the big gap for us is the lack of cost-center accounting feature. Are there firm plans to develop this feature in Zoho Books? If

    • Impuesto automatico en cotizaciones

      Buen dia Mi pregunta es como se puede poner alguna operacion para que las cotizaciones me salgan automaticamente con impuestos ya que uno al cargarla al final tienen que añadir el porcentaje de impuesto Saludos

    • Formatting of Gantt Chart for PDF export

      Hi all, There really needs to be some improvements to the presentation of exported PDF Gantt Charts. An exported format is the way that most people on a project (other than the PM directly) will consume this data. The current PDF export options are lacking a lot of control. - I'd like to firstly have control over the export size of the PDFs (A4, A3 etc), Currently it seems arbitrary - very large aspect ratio print sizes. - Next i'd like to be able to specify the print date range, and scale (show

    • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

      Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

    • タスクを問い合わせテンプレートに追加

      タスクを問い合わせテンプレートに自動で追加されるようにしたいです。どうしたらいいですか

    • Placeholder for Agent Signature in Email Templates

      Dear Zoho Team, I hope this message finds you well. We currently face a limitation when designing email templates in Zoho Desk. While we can create email templates and include a footer at the end, the agent signature is always appended by default at the

    • Custom Profile Agents Unable to Update Mandatory Phone Number in tickets under Zoho Desk

      Hi, While working in the Ticket module in Zoho Desk, agents with a custom profile are unable to update the Phone Number field (which is mandatory) under Account Information. The agents need to enter values such as "NA" or "Nil" in the field to close the

    • Updating existing values in a list

      Is it possible to update an existing value in a list? For example if I wanted to append text to an existing string value that I had previously added to a list is that possible? I'm able to extract the existing value (get() function) and append the additional text, but can't find a way to add the new value back to the list in the same index location. One work around I found was to delete the existing list entry and then add the new value, however this changes the index location to the last entry in

    • Host not reachable

      Good morning. I have four mail accounts and they have been working well for years. Now, suddenly, I am unable to send any e-mails from any of them. I allways have this pop-up: Thank you. Regards. Luis Fernández

    • Zoho Marketing Campaign

      I want a details report of marketing API . which API i can use to get a full flexed detail of email campaign , sms , social media ,and all other campaigns ?

    • Zoho Marketing Automation APIs

      When I want to create New lead in marketing automation , I want to add First Name and Last Name as well along with Email but there is no option like this in API . Can you please give me the API which will fulfill my condition ?

    • Adding Folders in Android App

      Is it possible to create a new email folder within the Zoho Mail Android app?  Or can this only be done from the desktop version of Zoho Mail? Cheers!

    • Collaborative editing of spreadsheets by multiple users simultaneously - Is it really possible?

      I work in a SharePoint 2010/SharePoint Server 2010 environment and we use MS Office 2007(Excel 2007) . I have been trying to create a MS Office document which will allow multiple users to work on a spreadsheet simultaneously. For that I have: 1) Created a excel workbook and published as a workspace as suggested by Andrea Kalli in her link: http://www.wonderhowto.com/how-to-collaborate-files-between-sharepoint-and-office-2007-182172/ 2) Set up and saved the Excel Workbook as "Shared" and made it available

    • Ability for customer to give feedback after receipt of an order

      Is there any way we can receive feedback from customers regarding their order after delivery (other than just an email, obviuosly)? This is not the same as product reviews, as it may concern other points, but would ideally have an inbuilt reference to

    • Zoho Books Sandbox environment

      Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a

    • Zoho Books | Product Updates | November 2024

      Hello users, We are back with exciting new features and enhancements in Zoho Books. From multi-criteria workflows to writing off customer opening balances, discover the new updates designed to make your bookkeeping swift. Attach XRechnung to Invoices

    • Spell check sucks

      Come on guys, it's 2024 and your spell check is completely retarded. You gotta fix it.

    • How to send certain invoices for Approval based on condition?

      To streamline operations, I need the invoices to go for approval when certain conditions are met. For example, if my staff gives a discount of x amount, it must go for approval. If there is no discount, then the invoice will be approved automatically.

    • Signature image logo not displaying in recipient mail clients

      Whenever I send an email to another person the image that forms part of my logo is not displayed just a broken link to: https://mail.zoho.com/mail/ImageSignature?fileName=Email-log.jpg&accountId=47238000000007001&storeName=NN1:-3205531763309921492 I can see the logo because I've got a zoho account and I'm logged on but others without a zoho account can't see it. How do I fix this? Thanks -Martin

    • Sales Order, what are the statuses under Confirmed and Closed

      Hi, I have to build a workflow in Deluge which should be triggered when Sales Order status is Confirmed or Closed. But these 2 states don't exist when you fetch a sales order. Which of the statuses are considered as Confirmed or Closed ? Here is a list

    • Notifications for calendar meetings

      So we have been happy users for a few months now. This is an important problem we face, since I have forgotten meetings already cause of lack of notifications. The problem: I have notifications (email, popup and notifications) set for my calendar by default.

    • Reusuable Sections & Universal Brand Settings

      Zoho Email Campaign setups take longer than other software I've used because it doesn't have reusable sections or universal brand settings (fonts and colors). These enhancements should be added to help us create our campaigns more easily.

    • Blockchain technology

      Blockchain technology is being used to revolutionize accounting and financial reporting. With blockchain, financial transactions are recorded on a decentralized ledger, making tracking transactions and verifying their accuracy easier. This technology

    • Este domínio já está associado a esta conta

      Fui fazer meu cadastro na zoho e quando digitei meu domínio recebi essa mensagem que meu domínio estava associado a uma conta que eu nem faço idéia de quem seja. Como que faço pra resolver isso? Atenciosamente, Anderson Souza.

    • not able to hit inventory api

      when i hit the api with my account keys and the access is provide by the client

    • 553 Relaying disallowed error

      Hi, I am receiving a "553 Relaying disallowed" error when sending emails to my domain email address which I have configured in Zoho. However, I am able to receive emails from my domain email to my gmail account. The SPF and MX entries are all configured

    • !! URGENT My sent mail goes to spam

      I tested a few times and every time I send mail out it goes the recipients spam box.  Why is it marking my mail as spam? please help me ! thanks

    • Event Time Zone in meeting invites are confusing users

      When sending calendar invites to internal and external users, the first section "Event Time Zone" is confusing people and they are automatically declining events. Can this section please be removed??? It already shows the correct time zone next to the

    • Request For Quotation (RFQ) module

      Hello, Do you have any plans to implement a RFQ module in to ZOHO Inventory? I would like to chose items that I require a price for, select a number of different suppliers to e-mail and have them submit there pricing online. I would then like to see a

    • Constant Sync Errors 🙄

      I'm constantly getting sync error notifications with no actual resolution. Also... I have folders and files with a (!) on the cloud icon, indicating it's not accessible. This has also led to the complete loss of certain folders. Like... the go missing!

    • 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?

    • Next Page