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

    • Tip#45: Custom Tags and Cluster Tags

      Tagging your work items helps categorize and label work items within your Zoho Sprints workspace. Now, this feature is expanded across multiple modules, along with the introduction of cluster tags that offer an advanced tagging mechanism. Manage Tags

    • Extensions 101 webinar series: Build, integrate, and monetize with extensions

      Attention developers! Are you ready to take your extension development skills to the next level? We're excited to bring back the Extensions 101 webinar series with an expanded lineup of Zoho products and an introduction to more platform features. Last

    • [Free Webinar] User Management in Zoho Creator - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • A couple of minor enhancements to Workflows

      Last updated on September 17, 2024: These enhancements were initially available for early access, and we've now enabled them for all users. We are elated to announce a couple of enhancements to custom functions in our Workflows! Say hello to: "Source"

    • Business Continuity - Disaster Recovery

      I know about the Zoho CRM backup .zip files, however, this doesn't include any of the infrastructure with like custom fields or custom modules. I am curious on what everyone has in place for a true backup or what your plan is if your Zoho instance were

    • Narrative 11: Are your customers happy?

      Behind the scenes of a successful ticketing system: BTS Series Narrative 11: Are your customers happy? Happiness isn't just something you experience; it's something you remember. Hear your customers' voices by enabling customer happiness ratings in Zoho

    • Don't understand INVALID_REQUEST_METHOD when I try to post up an attachment

      When I make the POST request (using python requests.post() for files): https://www.zohoapis.com/crm/v8/Calls/***************01/Attachments I get this response: r:{ "code": "INVALID_REQUEST_METHOD", "details": {}, "message": "The http request method type

    • Signature field is showing black

      Hello, When customer signed the service form, it is showing as below picture Phone model: iPhone 16 Pro We tried delete and install application, but it not solved. This has on phone of a few person. There is any advice to solve this?

    • Zoho CRM Android app updates: record sharing, user image upload, Zoho Survey integration, and more

      Hello everyone, We've made some important improvements to Zoho CRM's Android app, and we'd like to walk you through the latest updates. Here's what's new: Record sharing with org users User image upload Zoho Survey integration support Venue preference

    • How to Delete/hide Google adwords section from Layout?

      Hi people, maybe someone can tell me how to remove or hide the Google adwords section from my layout? Im not using it and it takes too much space.

    • WIDGET in related record list ZOHO CRM; how to get and put data to subform custom fields?

      he need: Read and write two custom subform line-item fields on Quotes: Segment_wyceny (picklist/text) and W_pakiecie (number). Write works; read does not return these fields via SDK. Environment Zoho CRM Widget Zoho Embedded App SDK v1.2 Module: Quotes

    • Introducing Assemblies and Kits in Zoho Inventory

      Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces the

    • Way to update CRM records in quik view

      I have custom module in zoho crm and that module have 500 records. I want a quick way or UI so that user can easily update the record information in quick view without going to record detail view or edit view. I tried zoho sheet option but in zoho sheet

    • Where to integrate Price Book and Product List Price

      Hello, We sync zoho crm all modules with all data to zoho analytics. In zoho crm, we have "Price Books" and "Products" modules, where each product is assigned to a few price books with different list prices. From zoho crm, I am able to export a dataset

    • Form / CRM Integration Not entering into workflow

      I have a simple form setup with company name, first name, last name and lead source. Each of the fields are mapped to CRM Leads module. When the form is submitted, the lead is populated properly. I also have a workflow created that when the lead source

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • Zoho Slowness - Workarounds

      Hi all, We've been having intermittent slowness and Zoho just asks for same stuff each time but never fix it. It usually just goes away on it's own after a couple weeks. Given that speed is a very important thing for companies to be able to keep up with

    • Don't understand why Forms Mobile Scan and Fill not working

      I have configure enabled mobile scan and fill, I have enabled QR and Bar code on two fields name and position, I have mapped seq 1 to Name and seq 2 to position, I have created a 2d QR code with the person names and position, seperated by a comma. When

    • Recurring Supervisor Rule Reminders for Open/In-Progress Tickets

      Hello Zoho Support Team, I would like to suggest a potential improvement regarding reminders for tickets and activities in Zoho Desk. Currently, it is possible to set reminders only once. In the Supervisor Rules section, it is possible to configure reminders

    • Template usage

      Hi, We are using some templates as a response to customer questions. Is it possible to analyze the usage of these templates? We want to know if the use of our templates has increased over time

    • Ticket Status Colors

      Can i change the colors of Ticket Status in the admin panel? Or even change the background of the entire cell of a Critical ticket? This way its easy for my agents to see a urgent ticket when it comes in. Right now everything is black text. Here Right

    • Sync Lookup Fields from Zoho CRM

      HI Team, I have synced a lookup field from my CRM data to Campaigns. When I view the synced data the field appears to display a Zoho CRM record ID rather than the text value. Is it possible to get the sync to import the text value rather than the CRM

    • New From Address cannot verify

      I have created a new From Address, which is the support@ address for my domain, that forwards to the default support mailbox. Presumably then, the verification email that is sent, should turn up as a ticket, but it does not. How can I verify my from address so that I can use my own domain?

    • How to update/remove file in zoho creator widgets using javascript API

      Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

    • issue with image thumbnails not showing in Image Selector

      We have been using Zoho Campaigns for over a year, maybe close to two years, and this issue just started happening in the last month. I wanted to wait to see if it would resolve on it's own, and it doesn't seem to be. The thumbnail images for all new

    • Deluge Script for adding tag

      Trying to create a custom function where a tag is added to a record - but for the life of me, I cannot figure out how. Help please! Moderation Update: Adding the help doc and sample to add Tags to records via deluge here for everyone's benefit. tag1 =

    • Unlock your Zoho Vault with OneAuth, Windows Hello, TouchID, YubiKey, and many more!

      Hello everyone, We are thrilled to introduce one of the most highly requested features – the ability to unlock your Zoho Vault using various authenticators. The primary purpose of a password manager is to remember just one master password and securely

    • Creator roadmap for the rest of 2022

      Hi everyone, Hope you're all good! Thanks for continuing to make this community engaging and informative. Today we'd like to share with you our plans for the near future of Creator. We always strive to strike a good balance of features and enhancements

    • How can I get base64 string from filecontent in widget

      Hi, I have a react js widget which has the signature pad. Now, I am saving the signature in signature field in zoho creator form. If I open the edit report record in widget then I want to display the Signature back in signature field. I am using readFile

    • Add Setting Values to the Rules

      Hi, It would be great to use the rules to set values in fields for submission, such as if a Type is X then set the Field Y to 10. Thanks Dan

    • So we ran with it for the week

      In our company i bit the bullet and ran with FSM for a whole week. Service calls, deliveries and surveys. Covering about 30-120 miles a day to domestic properties. Loved the appointment list and satnav integration. Loved the timer to measure the appointments.

    • Is there a way to set Document Owner/Sender via the API

      When sending requests for zoho sign, it would seem zoho uses the id of the person that created the zoho api cred to determine the owner_id, is there a way to set a default for this?

    • What's New - September 2025 | Zoho Backstage

      September has been a different month for Zoho Backstage. Instead of rolling out a long list of new features, we focused on something just as important: Performance, reliability, and stability The event season is in full swing, and organizers are running

    • Prevent stripping of custom CSS when creating an email template?

      Anyone have a workaround for this? Zoho really needs to hire new designers - templates are terrible. A custom template has been created, but every time we try to use it, it strips out all the CSS from the head.  IE, we'll define the styles right in the <head> (simple example below) and everything gets stripped (initially, it saves fine, but when you browse away and come back to the template, all the custom css is removed). <style type="text/css"> .footerContent a{display:block !important;} </style>

    • Stock Quotes/Spreadsheet

      It would be nice if we could download security and mutual fund prices from Yahoo Finance (or?) in order to maintain an up to date investment portfolio on Zoho. Any chance?

    • link to any Belgian bookkeeping software?

      Hello, Does anyone on this Forum can help me with the question whether the ZOHO CRM (Invoices) or ZOHO Book can be linked to software that is used for Belgian Bookkeeping/accountancy? By linking, I mean either with the help of a middleware program or either by the ability to export the custom made reports as CSV-files... If someone has an experience with online CRM-Accountancy in Belgium, with ZOHO (or other), it would be great to read it... Thank you

    • marketing automation

      wants to know about the zoho marketing automation

    • Problems with email templates (HTML - Outlook)

      Hi there, I've been trying to create a newsletter from the template "Business 4". Everything looks great in the preview, but when I send it to my Outlook inbox, the layout doesn't seems to stick. More particularly: - The line-height is way more reduced, even though I used the line-height tool from the template - Columns but they are sometimes misaligned - Font size is not always the one I've selected. Could you help? Thanks!

    • How to create a drop down menu in Zoho Sheets

      I am trying to find out, how do I create a drop down option in Zoho sheet. I tried Data--> Data Validation --> Criteria --> Text  --> Contains. But that is not working, is there any other way to do it.  Thanks in Advance.

    • Introducing Keyboard Shortcuts for Zoho CRM

      Dear Customers, We're happy to introduce keyboard shortcuts for Zoho CRM features! Until now, you might have been navigating to modules manually using the mouse, and at times, it could be tedious, especially when you had to search for specific modules

    • Next Page