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

      • Recent Topics

      • CRM verify details pop-up

        Was there a UI change recently that involves the Verify Details pop-up when changing the Stage of a Deal to certain things? I can't for the life of me find a workflow or function, blueprint, validation rule, layout rule ect that would randomly make it

      • Sync your Products Module for better context.

        In customer support, context is everything. The integration between Zoho Desk and Zoho CRM helps your sales and support teams function as one, delivering better customer experiences. With the latest update to this integration, you can now sync the Product module in your Zoho CRM with your Zoho Desk portal. This feature enables products from Zoho CRM to reflect in the "product" field in Zoho Desk. This can save your support team valuable time and effort.    Some things to note when syncing the two:

      • Does Zoho Writer have Dropdowns

        I want to add a drop down field in Zoho writer. Is this possible?

      • How can Data Enrichment be automatically triggered when a new Lead is created in Zoho CRM?

        Hi, I have a pipeline where a Lead is created automatically through the Zoho API and I've been trying to look for a way to automatically apply Data Enrichment on this created lead. 1) I did not find any way to do this through the Zoho API; it seems like

      • Transitions do not update fields until the record moves to next stage

        We have a blueprint where a couple of stages have multiple transitions. If only some of the transitions are completed, but not all, Zoho does not update any of the fields impacted by the completed transitions. Is there any way Zoho can udate the fields

      • Blueprint enhancements - Parallel and multiple transitions, and more

        Last modified on Sep 4, 2023: All Zoho CRM users can now access these enhancements. Initially, these features were available only on an early access basis and by request. However, as of August 2, 2023, they have been made available to all users in all

      • Optimum CRM setup for new B2B business

        Can some advise the most common way to setup Zoho CRM to handle sales for a B2B company? Specifically in how to handle inbound/outbound emails. I have spent hours researching online and can't seem to find an accepted approach, or even a tutorial. I have

      • using the Client script on the load of the form if service no is empty means then i want to make issue relate to is Service

        using the Client script on the load of the form if service no is empty means then i want to make issue relate to field is Service if Purchae no is empty means then i want to make issue relate to is Purchase

      • Multiple header in the quote table???

        Hello, Is it possible in Zoho CRM to add multiple headers or sections within the Quote product table, so that when the quote is printed it shows separate sections (for example “Products” and “Services”)? To clarify, I’m asking because: This does not appear

      • using the Client script I want to Hide Show the Fields

        if Related to service means some of the field like service no want to shoe and hide Amc no , purchase no how i achive this let issu = ZDK.Page.getField('Issue_Related_To').getValue(); if (issu == 'Service') { var field_obj = ZDK.Page.getField('Warranty_Cases');

      • openUrl in blueprints

        My customer wants to open a URL at the end of a blueprint transition. Seems this isn't possible right now but it would be very useful. In this thread, https://help.zoho.com/portal/en/community/topic/openurl-not-working the Zoho agent said that it's logically

      • Dropshipping Address - Does Not Show on Invoice Correctly

        When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company being

      • Prepayment of a sales order

        How does everyone handle this common (at least it is common for us!) situation? We require all our orders to be fully prepaid before shipment since we manufacture made to order, custom products. Since ZOHO does not allow a sales order to be prepaid, we are forced to create an invoice at the time an order is placed to allow the customer to pay it. Our sales category is therefore skewed, since the sale was actually booked at the time an order was placed, rather then at the time it is shipped, which

      • Access to Specific Zoho Desk layout for external parties

        Hi, We have a partner who handles for us sales requests from specific markets. He is not a Zoho Desk user. But we want him to b part of a specific Zoho Desk layout to handle inquiries.  How to achieve it in the easiest way possible?

      • Deposit on a Sales Order

        Good day, 100% of my business is preorders, no inventory. I am trying to run away from QB for one of my businesses, but I require two options that I don't seem to find with Zoho Books. 1 - If there is a way to apply a deposit on a sales order, as with

      • How Does Knowledge Base Search and Article Recommendation Work?

        Hello, I would like to understand how the Knowledge Base search engine works. Specifically, does it search based on: The article title only? The full article content? Both, the article and the content? Keywords? Tags? Also, how does the system determine

      • validation rules doesn't work in Blueprint when it is validated using function?

        I have tried to create a validation rule in the deal module. it works if I try to create a deal manually or if I try to update the empty field inside a deal. but when I try to update the field via the blueprint mandatory field, it seems the validation

      • Bulk Delete Attachments

        Is there a way to bulk delete attachments on the form entries? our storage is full and deleting files one by one is pain taking process.

      • How do I sync multiple Google calendars?

        I'm brand new to Zoho and I figured out how to sync my business Google calendar but I would also like to sync my personal Google calendar. How can I do this so that, at the very least, when I have personal engagements like doctor's appointments, I can

      • Zoho CRM || Unable to Bulk Assignment of Territories for Contacts

        Dear Zoho CRM Support Team, I hope this email finds you well. We recently performed a bulk upload of Contacts into Zoho CRM using the official sample Excel template downloaded from the CRM. The upload itself was completed successfully; however, we encountered

      • Cannot get code to work with v2.mergeAndStore!

        Please can someone help me pass subform items into a repeating mail merge table row using v2.mergeAndStore? I have a mail merge template created in Writer and stored in Workdrive. This template is referenced by a custom CRM function which merges all of

      • Ability to CC on a mass email

        Ability to CC someone on a mass email.

      • Is It Possible to Convert a Custom Module to a Quote?

        I recently created a custom module in our CRM environment for RFQs so that our sales team can submit quote requests directly in Zoho rather than by email/phone. This allows for a cleaner overall process, minimizing potential errors and potentially encouraging

      • Ability to Disable System Banner Messages in Chat Flow Control

        Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement related to the system banner messages in Zoho SalesIQ chat flow control. Current Behavior: SalesIQ allows configuring various automatic banner/system messages such as: Waiting

      • How do you do ticket add ons in Backstage?

        Hi Everyone, If you wanted to have general admin tickets and allow for add ons, like camping, or car or Carbon offset. What would you do? Peace Robin

      • Writing SQL Queries - After Comma Auto Suggesting Column

        When writing SQL Queries, does anyone else get super annoyed that after you type a comma and try to return to a new line it is automatically suggest a new column, so hitting return just inputs this suggested column instead of going to a new line? Anyone

      • Sort Legend & stacked bar chart by value

        I'd love to see an option added to sort the legend of graphs by the value that is being represented. This way the items with the largest value in the graph are displayed top down in the legend. For example, let's say I have a large sales team and I create

      • Idle Chat Reminders for Agent-Handled Conversations

        Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement to the Idle Chat Handling functionality in Zoho SalesIQ—specifically for chats that are handled by human agents after a bot-to-agent transfer. Current Behavior: In Zobot settings,

      • Layout Adjustment.

        Hello Latha, Hope you are doing well. I wanted to check with you about adjusting the layout columns in the Service Report from the backend, as currently there is no capability for us to customize the layout from our end. Below is the output that I am

      • Snapchat

        Are there any plans to add Snapchat to Zoho Social or is there any API that we can use to integrate into Zoho.

      • Zoho Sign "An unexpected error occured" when clients trying to sign documents

        We are unable to have clients sign our documents. When attempting to complete the process an error appears saying "an unexpected error occured" and in the document history just shows "signing failure." We are at a complete standstill with no response

      • Service Reports.

        Hello Team, I have a requirement to create multiple service reports for a single AP. That means, in one AP I have 5 service line items, and all line items are linked to assets. Once I complete the AP, I want to generate 5 individual service reports, one

      • ¡Vuelven los Workshops Certificados de Zoho a España!

        ¡Hola usuarios de Español Zoho Community! Hace ya unos días que hemos dado la bienvenida al 2026, y promete ser un año de lo más emocionante. Y es que nos gustaría haceros nuestro particular regalo de Reyes, aunque lleguemos un poco tarde. 🎁 ¡Nos gustaría

      • Cancel Subscription

        Hi , Im want to cancel my account but without success please help me to do it

      • Deprecation Notice: OpenAI Assistants API will be shut down on August 26, 2026

        I recieved this email from openAI what does it means for us that are using the integration and what should we do? Earlier this year, we shared our plan to deprecate the Assistants API once the Responses API reached feature parity. With the launch of Conversations,

      • How to list services on quote instead of products

        I need to create a customer facing estimate that displays our services. The default quote layout only allows products to be listed. Is there a way to correct this?

      • Making an email campaign into a Template

        I used a Zoho Campaign Template to create an email. Now I want to use this email and make it a new template, but this seems to be not possible. Am I missing something?

      • Syncing calendar with Google Calendar doesn't work when events are sent to auto repeat

        Hi... The ZOHO CRM -- GOOGLE CALENDAR sync is broken. If I create a single event on either side, sync works, but if I create an event with auto repeat on either side it doesn't work. Furthermore, events created before the sync don't show up in the calendar.

      • Invoice status on write-off is "Paid" - how do I change this to "Written off"

        HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

      • CRM gets location smart with the all new Map View: visualize records, locate records within any radius, and more

        Hello all, We've introduced a new way to work with location data in Zoho CRM: the Map View. Instead of scrolling through endless lists, your records now appear as pins on a map. Built on top of the all-new address field and powered by Mappls (MapMyIndia),

      • Next Page