Building extensions #7: Create custom widgets for a simplified end-user experience

Building extensions #7: Create custom widgets for a simplified end-user experience

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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Introducing a smarter, faster, and more flexible charting experience

        Hello Zoho Sheet users, We're delighted to share the latest news about a major update to charts in Zoho Sheet! The new version supports dynamic data ranges, granular styling options, faster loading, and other interesting enhancements that allow you to

      • Zoho Bookings - Feature Request - Services Which Include A Resource and Consultant

        Hi Bookings Team, My feature request is to have the ability to add Consultants and Resources to Services. Use case: Your business provides first aid training and there are certain equpment you require to provide the half day training. There are only specific

      • Assign Meeting in records

        It would be nice to be able to "call and assing" meetings from a record, for example from a Deal. Right now - calendar is synced with CRM - meetings show in calendar - you can go in each meeting and assign it to a record It would be nice to be able to

      • You have reached the maximum limit of bank accounts that can be connected to Zoho Books through token.

        I can no longer connect to my bank account to download transactions into Zoho Books. I egt the error message: "You have reached the maximum limit of bank accounts that can be connected to Zoho Books through token. To connect more accounts, write to us

      • Sincronizar eventos de Bigin en Zoho Calendar (Zoho Mail)

        Hola Me gustaría poder sincronizar mi Calendario de Zoho (Mail) con los eventos de Bigin. No veo la opción disponible.

      • Sales Receipts in UK Free tier

        Is Sales Receipts available in UK Books, specifically at the Free tier? None of the options from the help pages are available to me.

      • My client requires me to have custom pdf file names to except payment for invoices, how can I customize this before emailing.

        Hello! I love the program so far but there are a few things that are standing in the way. I hope you guys can code them in so I can keep the program for years to come. My client requires I customize the pdf file names I send in for billing. Can you please

      • When I schedule calendar appointments in zoho and invite external emails, they do not receive invites

        Hello, We have recently transitioned to zoho and are having a problem with the calendar feature. When we schedule new calendar appointments in zoho the invite emails aren't being sent to the external users that we list in participants. However, this works

      • Migrate different zoho subscription to zoho one

        Dear We have different zoho subscription we need to migrate it to zoho one. Currently we are paying for zoho email, zoho expense, zoho payroll etc under different admin We need to move it too zoho one flexlible plan for all my employees

      • Bigin use in hospital- Human Med or Veterinary

        I am looking for users who are in either human or veterinary medicine and use the CRM specifically for referral management tasks. Are you using the basic version? How many users update the CRM and is it effective? Did you pay for additional customizations?

      • How to sync overtime from zoho people to zoho payroll

        Hi everyone, I’m currently setting up Zoho People with Zoho Payroll. While configuring the sync, I noticed I can only fetch Employee Profiles, LOP (Loss of Pay), and enable the Employee Portal. I can’t seem to find a way to automatically pull Overtime

      • Standardize email communication with Signature Template

        Maintaining a consistent and professional signature across all outgoing emails is essential for any organization. However, when users manage their signatures individually, it often leads to inconsistencies like varying formats, missing designations, or

      • How can I export all Deluge code across the application?

        I’m working on a application with multiple forms, reports, and HTML views, where Deluge scripts are used across workflows, field actions, and custom functions. Is there a way to export all Deluge scripts into a single file for easier search?

      • Zoho Books: tax is not automatically pulled from product-data anymore - why?

        Hi, until a short time ago, you could set a default taxrate for each product/item. This taxrate automatically appeared each time the item was chosen in an invoice or quote. Why does this not work anymore? The field is still there at the product record,

      • Setting up property management in Zoho Books

        Hi, I run a property management business that manages property complexes. There are multiple owners, some owning more than one property on the same complex. My role is to manage the fees they pay for maintenance of common areas, such as the swimming pool

      • Zoho Creator to GMAIL API Setup - Where Do I Begin?

        Does anyone know how to connect Zoho Creator to Google Workspace (Specifically GMAIL?) We have FLOW setup and working fine to send emails via GMAIL, but Flow doesn't accept file attachments which is a major problem. So, we need to be able to send an email

      • Kiosk Page Refresh

        We have a Kiosk running from a button in contacts to update values and also add related lists, which works great, but when the kiosk is finished the page does not refresh to show the changes. Is there a way to force the contact to refresh/update when

      • Setting GC session variable programatically in a website

        Hi! Is there a way now to programatically set session variables from a website for a Guided Conversations? The current available methods are dependent on react-native.

      • Ticket Merge Error

      • Refresh frequency

        Dear Zoho Team, I really, truly appreciate that Zoho Books gets frequent updates. As a matter of fact this is how a good SaaS company should stay on top. However, I feel that I have to hit refresh almost every day. This was exciting at the beginning but

      • Update application by uploading an updated DS file

        Is it possible? I have been working with AI on my desktop improving my application, and I have to keep copy pasting stuff... Would it be possible to import the DS file on top of an existing application to update the app accordingly?

      • Two-factor authentication (2FA) Log-in Problems

        The Two-factor authentication (2FA) Login on my passwords doesn't match , so it wont accept login I'm down to my last backup code.

      • Remove my video

        Hi, How can I remove my video so that I don't have to see myself. It's weird so I always remove my own video from what I see but cannot find this feature here. Thanks!

      • Client Script: Any plans to add support for multi-select field with onChange

        Client Script is fantastic and the documentation lists multiselect form fields as unsupported. Just wondering if there are any plans to make this a supported field. https://www.zoho.com/crm/developer/docs/client-script/client-script-events.html 2. Field

      • Zoho Campaigns API endpoint for contact details

        there is some REST API support for Zoho Campaigns, however, I am not able to find an endpoint for "get contact details".  in particular, I'd like to access contact's subscription status and also their topic. ideally there is all profile available including

      • Feature Reqeust - Include MPN In Selectable FIelds

        I have noticed that the MPN is not available to show in the list view of Items. Please consider adding it as EAN, UPC and ISBN are all available, so it doesn't make much sense to exclude this similar option. Thanks for considering my feedback.

      • Experience effortless record management in CRM For Everyone with the all-new Grid View!

        Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and

      • Windows Desktop Application for Bigin

        I'm finding the need for a standalone Bigin desktop app for Windows users. Most of my daily work is done through a browser, so I often have several open tabs while working with customers and checking product information, etc. With Bigin currently only

      • Set another Layout as Standard

        We created a few layouts and we want to set another one to standard:

      • Salesforceに添付ファイルを格納したい

        お世話になっております。 Salesforceに添付ファイルを格納したく、カスタムオブジェクトに連携し、 「ファイルのアップロード」項目を設けました。 実際、エラーもなく送信出来たのですが、実際生成されたカスタムオブジェクトのレコードを見ると、どこにも添付ファイルがありません。仕様として、この添付ファイルはSalesforceのどこに格納されるのでしょうか？ 今回作りたいフォームは、複数の書類を添付するため、Zohoformのファイルアップロード項目「本人確認書類」「源泉徴収票」などの項目を、Salesforce側にも設けた「本人確認書類」「源泉徴収票」という各項目にURLリンクとして紐づけたいと思っておりました。

      • Knowledge Base article lists

        Is it possible to adjust the number of articles that are visible under a category of the Knowledge Base portal? Currently it looks like by default it populates about 5 articles before it puts the "more" option at the bottom. Looking to see if I can extend

      • Discrepancy in Contracts with Fields list/Layout

        The Support Plan field on the layout isn't in the fields list. What am I missing?

      • Zoho writer unable to merge documents to PDF with basic fonts in Hebrew or fonts from my computer

        I created several forms that will be merged into PDF files through Zoho Writer and I am unable to receive the PDF in the basic fonts of the Hebrew language or in the fonts I have on my computer. The writer exports to PDF an exchange font that looks very

      • Migrating all workflows to another Zoho account

        We are going to transfer into another company, and we are going to get new emails and new Zoho accounts. Is there a way to migrate (or save in some sort of external file) all presets and settings that we have on this account? That includes primarily workflows,

      • Edit The Newsletter

        There doesn't seem to be the ability add a title and a caption below the button. Can this be done?

      • Additional Address - Company Name

        It would be very helpful to have a "Company Name" field in the Additional Address shipping section.  In a situation where you drop-ship orders to a different address or different company entirely, it may be necessary to list the company name of the receiver. I understand that the Attention field can be used for that purpose, but that's not really the intended purpose of that field.

      • Unable to Delete Items – No Visible Transactions but Error “Items which are a part of other transactions cannot be deleted…”

        Hello Community, We are using Zoho Inventory for our business and encountered a persistent issue that is preventing us from deleting certain items. The message shown is: “Items which are a part of other transactions cannot be deleted. Instead, mark them

      • Keyboard UX for Assemblies

        The new Assembly module has a counter-intuitive behavior that ought to be corrected. When an Assembly is ready to be entered, there are two options given, the blue-highlighted "Assemble" and the gray "Save as Draft". This correctly implies that the normal

      • landed cost-need help with different currency under the same bill

        I’m having trouble recording landed costs in Zoho Inventory/Books. My purchase order is in CNY, but the landed cost (freight) I pay is in USD. Zoho forces everything under the same bill to use one currency, so I can’t enter the landed cost in its actual

      • Improved Functionality PO Bill SO Invoice

        Hello, I need to enter over 100 items, it's frustrating to scroll a few item rows and wait for more to load, then scroll again. It would be nice to have buttons that scroll to the top or bottom with one click. Furthermore, these items I'm adding are VAT

      • Next Page