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

    • Schedule meeting monthly on a particular day

      Suppose I wanted to schedule HR meeting every month on the first Tuesday with each employee separately for 20 minutes each. How could I automate these type of meetings? And if Sunday occurs on the first Tuesday I would like to shift that meeting on next

    • In ZohoCRM Dashboards - Editing Shown Columns on Drilldown of Components

      Hello! I'm working with some Dashboards inside of ZohoCRM. When creating a component (In this case, specifically a KPI Ranking Component), I'd like to customize which fields show when trying to drilldown. For example, when I click on one of the sales

    • Multibrand Help Center - Share knowledge base catgories between multiple departments

      Hello, I would like to know if it is possible to share categories between multiple departments when the multi brand feature is enabled. So that then one portal exists per department, but certain categories are visible in multiple portals. After all, we

    • Added Domain but SSL is not being set properly

      We added a Domain for our landing page and it pushed an SSL cert to it. The Cert is generated by LetsEncrypt, but it doesn't match our subdomain (i.e., it's just pointing to zohosites.com). How do we get the cert properly setup there?

    • Zoho CRM Widget not displaying 2 related lists (JS)

      Okay so I basically have 2 relatedLists that I want to get and render: ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity, RecordID: data.EntityId, RelatedList: "Notes", page: 1, per_page: 200, }) ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity,

    • Sharing Knowledge Base articles across multiple departments

      It would be useful to share some Knowledge Base articles across multiple departments where they are applicable, rather than having to go into other departments to find the article you're looking for. For example. Our reception uses the 'Admin' desk whereas our IT guys use the 'Support' desk, however both divisions would find KB articles about our company intranet useful. Reception does not have access to the support desk, so cannot see articles created in the Support KB. Perhaps you could install

    • Iteration through a list - Coming up against a "Failure to update function" error

      Hi there! I've been attempting to get a deluge script working and am running into an error that I have been unable to resolve. The error I am getting is Failed to update function Error at line :18. Improper Statement. Error might be due to missing ';'

    • KPI widget with percentage

      I'm trying to create a KPM widget that displays current performance as a percentage - something like the picture below. I've tried following the instructions at https://www.zoho.com/analytics/help/dashboard/kpi-widgets.html#chart but nothing ends up being

    • Canvas List View Not Saving

      Hi, I am trying to edit a list view to look different depending on the tags. Everything worked well and saved well with multiple views, but when I have gone back in to make some small changes like moving one of the icons it comes up with the error message

    • Team Inbox is not working AGAIN

      I like Team Inbox in general. It makes using a collaborative inbox easy - when it works. The problem is that it doesn't work at times - and it seems to not work, a lot. It's not catastrophic failure, it's little things. Unable to send messages Unable

    • QR code image is not exported in PDFs

      The new QR code field works fine when I include it in a report template and I choose the print option: https://creatorapp.zoho.com/<username>/<app_link_name>/record-print/<report_link_name>/<record_ID>/ But when I try to save the document to a .pdf file

    • QR codes in templates

      I'm excited about the new QR code generator. I have included a QR code that contains the record ID setting "${ID}" as input data. In the report detail it works perfectly but when printing it in a template the code is not shown.

    • This mobile number has been marked spam. Please contact support.

      Hi Support, Can you tell me why number was marked as spam. I have having difficult to add my number as you keep requesting i must use it. My number is +63....163 Or is Zoho company excluding Philippines from their services?

    • geographic search filter in map view

      Hi, I have a recruiting and timesheet system built in Creator. The client wants to enhance the search for candidates based on their location and filter by job skills - currently they look on the Map View which uses the geo location or post code of the

    • Real Estate CRM

      How can I tailor my CRM for real estate? I had seen an image where the CRM included property tabs.

    • Zoho CRM search not working

      The search bar is not showing any results in our CRM installation. We have a lot of items and can not search them by using the navigation each time. Can someone please check this asap.

    • Reload page with widget

      Hi all, I hope I can find some help here. I developed a small widget for Creator that is integrated into a page as a component. The page contains other content as well. When the widget is sent, the entire page should be reloaded to apply the changes to

    • Tip of the week #37 - Manage all your Telegram business conversations directly from your shared inboxes.

      Tired of switching between multiple apps to manage your business conversations? With Zoho TeamInbox's multichannel inboxes, connect your Telegram channel to a shared inbox. This way, your teams can easily handle c View, reply, and collaborate on them

    • Tags on notes aren't syncing correctly on Android

      I've created notes on the desktop version that have several tags assigned, but on both my Android devices those notes only have ONE of those tags instead of all of them, despite the actual content of the note being correctly synced, and I'm also starting

    • Reports - custom layout - duplicate report

      Do you also have this problem and what is the possible solution? I duplicate a report that has a "custom layout". Unfortunately the custom layout is not duplicated. To be improved for a future release by Zoho. I export the custom layout and import it...

    • "Copy Field Values from one Module to another" how to use?

      Hi everyone! I'm sorry if this question was already asked, I didn't find it! So let me explain:  In my Tickets module, we have the custome field "customer type" where we indicate if it's a lead, user, etc... In the Contact module I used the "type" field with exactely the same entries. I would like when in the tickets module an operator choose an option that it automatically update it in the contact module. I found the "Copy Field Values from one Module to another" custom function which seems perfect

    • How to map a global picklist from one module to another

      Hi there, i currently have a new field that is called sales office which we use for permission settings between our different offices located in different countries. It is a global set picklist with three different options: MY, SG and VN. I want to be

    • Pageless mode needed to modernise Writer

      When we switched from GSuite to Zoho, one of the easiest apps I found to give up, was Docs. In many ways, Writer has always been more powerful than Docs, especially in terms of workflows/fillable forms/etc. However, I went back into Docs because I notice

    • Changing the Logo Size on Zoho Sites

      My company logo incorporates both an image and text, and I would like it to be much more prominent on the page than is currently allowed by the small logo box in the template.  Is there any way to hide the page name and then make the logo box much bigger since my company name and logo are connected / are all in one file?  Thank you. 

    • Is it possible to Select Item Serial Numbers from a Sales Order?

      Our accepted estimates are converted to Sales orders for our warehouse staff to pick.  How can my warehouse staff select the serial numbers for an item when editing a Sales Order?  Logically when staff pull an item and have the serial in front of them they update the Sales Order and select the serial. I understand a serial can be added when creating an invoice but how can accounts team know the serial if the warehouse staff can't select it! A basic flaw!

    • MORE BUGS: Client Script, Deluge and Widget JS SDK don't work as expected when trying to retrieve a record that has been "rejected" as part of an approval process.

      Client Script $Page.record is null when accessing a record that has been "rejected" as part of an approval process. Deluge zoho.crm.getRecordById(moduleName, recordId) returns {"status":"failure"} when recordId is a valid, but rejected record. OK... I

    • Zoho CRM Widget not displaying 2 related lists (JS)

      Okay so I basically have 2 relatedLists that I want to get and render: ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity, RecordID: data.EntityId, RelatedList: "Notes", page: 1, per_page: 200, }) ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity,

    • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

      We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

    • Zoho Books and Zoho Projects Task Status Update

      How can we create an automation using custom functions for the following scenario. When our zoho books invoice status changes to paid. I want a task in Zoho projects to change to completed.

    • Different content per social media account..

      Is there a way to add different content per social media account on one post?

    • Assigning Tasks and Requests to Groups... how do I?

      Guys, I've spent many hours exploring Zoho Support and we are generally satisfied with the system.  I'm trying to understand how a system that has so much to offer can be missing GROUP assignment and queue functionality.  I am hoping that there is a way

    • Parsing of SQL query failed. Please check the SQL syntax.

      I am trying to have Zoho Analytics recognize that if the a Deal is in Stage "Need Docs" it should also be counted as a Deal in the Stage "New Lead" /*New Lead*/ SELECT "ID" 'New Lead' AS "Stage" From "Deals" Where "Stage" = 'Need Docs' Union All Error

    • Where is the setting to enable/disable 2FA?

      The following links show where enable/disable 2FA is supposed to appear, but neither appear for me: https://help.zoho.com/portal/en/kb/zohosites/faq/account/articles/how-do-i-enable-or-disable-two-factor-authentication-for-my-account shows Security >

    • How to Assign Record Ownership in a Custom Form via API?

      Hello everyone, I’ve created a custom form in Zoho People and I’m using the API to manage its records. I would like to know how I can assign ownership of these records to specific users via the API. Is there a specific parameter or field in the API request

    • Customer Statement Template not matching when sending

      Hi everyone! So when I send statements to our customers via Zoho Books, the message that appears by default does not match what I have written on the template Under settings -> email notifications -> sales -> customer statement We have a single default

    • Working with keywords

      Hello everyone, first time here so I will try to be brief. I am working on my company's data set. I have a table with all the images we have on line. For each image we hava a cell tha contains all keywords related to that image. I would like to explore

    • Unlocking New Horizons: A Year in Review

      As we bid farewell to 2024, let's celebrate and revisit the key highlights of the year. From adding a new edition to cross-platform enhancements, here’s a roundup of all the feature updates designed to simplify accounting, optimize financial management,

    • 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

    • Re-emitir facturas con nueva dirección de facturación

      Hola, necesito saber si es posible que las facturas ya emitidas, pueden ser re-emitidas con el cambio de dirección de facturación, realizado el día de hoy 02-01-2025, para efectos contables. Espero su ayuda, Gracias

    • Zoho Learn vs. Trainer Central

      Hi, I'm currently using Zoho One with a WordPress-based website and WooCommerce to manage my online courses. I would like to know what is the difference between Zoho Learn and Trainer Central and if it's possible for these two platforms to replace WP

    • Next Page