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:
- A connection between Zoho Projects and Zoho Desk.
- An extension configuration process that includes:
A. Creating an extensionB. Configuring the plugin manifestC. 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> <script src="" target="_blank">https://js.zohocdn.com/projects/js/client_sdk.min.js"></script> <script src="" target="_blank">https://code.jquery.com/jquery-1.12.4.min.js"></script> <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" } }; var url = "https://desk.zoho.com/api/v1/articles/search?title=" + subject + "*"; //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
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
Sticky Posts
Building extensions #10: Fetch customized user inputs, store them globally at the app level, and access them across entities
This data storage concept enables you to store data related to your extension for both entity properties and extension properties. In our previous piece, we looked at how to store data for entities using entity properties. In this post, we'll look atBuilding extensions #9: Store, retrieve, and access entity-specific data in widgets using data storage
Data storage - Overview Storing data related to the extension you are working on is essential. It can be saved as key-value pairs for an entity or extension, known as entity and extension properties, respectively. Data can be saved for the following entitiesBuilding 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 ZohoBuilding extensions #6: Custom user interfaces with Widgets
Welcome to our post on Widgets for Zoho Projects! In our last post, we explored the significance of the connections feature, showed how to use it, and provided an example use case. In this article, we'll look at the importance of widgets, another featureBuilding extensions #5: Integrating applications with Zoho Projects through Connections
In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Unusual activity detected from this IP. Please try again after some time.
Hello Zoho admin and IT team We are a registered website in Eloctronic services and we been trying to add our users to the zoho system but this issue faced us ,, hope you unlocked us please.Alert if a field is ticked.
Hi There, We have two modules named Opportunities (Deals) and End Users (CustomModule1), as per the image below. Within Opportunities, we have a lookup field that looks up from the End Users Module. We are looking to get an alert either via email or anotherZoho CRM Analytics - Allow To Reorder Dashboards
I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can goSending a Template to Sign
hi, trying to send a template to be signed using this as a test: $accessToken = "1000.xxx" $templateId = "1234" $uri = "https://sign.zoho.eu/api/v1/templates/$templateId/createdocument" $payload = @{ templates = @( @{ template_id = $templateId request_nameAdding Choices in a Sub-Form Dropdown
Hi, Has anybody tried Adding Choices to a Dropdown in a Zoho Creator Sub-Form programmatically? My Deluge code adds rows to a subform with 2 fields A and B. A - text field. B - dropdown. My Deluge script adds the row and displays A successfully. For theZoho CRM Email Templates 100% Width No Background How?
Hi, On the Zoho CRM Email Templates in setup > customization > templates > new templates > I choose blank template, but still it puts in a gray background and a max width for the email. I just want to make an email that looks like an email I would send from gmail that has no background or max width. How do you do this?Checking client unsubscribe details
Hi team, Can you please let me know where we can check if a client has unsubscribed, along with the date and time it was done? If this information is not available at our end, please help confirm the unsubscribe date for the below email ID from the backend: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 haveScan and Fill CRM Lookup Field
Not sure if there is a reason why this isn't possible or if I'm just missing it. But I would like to be able to use the scan and fill feature on the mobile app to prefill the CRM lookup field and fetch the rest of the data in the form.Customer Management: #2 Organize Customers to Enhance Efficiency
When Ankit started his digital services firm, things felt simple. A client would call, ask for a website or a one-time consultation, Ankit would send an invoice, get paid, and move on. "Just one client, one invoice. Easy.", he thought. Fast forward aZoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails
How do i setup Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emailsAttachments between Zoho and Clickup, using Flow.
Olá suporte Flow, tudo bem ? Estamos usando o flow para integrar Zoho Desk com o clickup. Não localizamos a opção de integrar anexos entre do zoho Desk para o clickup. Gostaríamos de saber se migrando para o plano pago, teremos suporte para fazer a integraçãoAdding an Account on Zoho Mail Trigger in Zoho Flow
I'm trying to create a flow using the zoho mail trigger "Email Receive". My problem is that when I select this trigger, it only shows one account from the account dropdown. I'm planning to assign it on a different email. How can I add other email adLinnworks
Unless I am missing something, the Linnworks integration is very basic and limited. I have reached out to support but the first response was completely useless and trying to get a reply in a timely manner is very difficult. Surely I should be able toTest data won't load
I am using a Flow to receive orders from WooCommerce and add them to a Zoho Creator app. I recently received an order which failed, and when attempting to test the order I found that it just shows a loading animation and shows up in the history as "queued."AddHour resets the time to 00:00:00 before adding the hour.
Based on the documentation here: https://www.zoho.com/deluge/help/functions/datetime/addhour.html Here's my custom function: string ConvertDateFormat(string inputDate) { // Extract only the date-time part (before the timezone) dateTimePart = inputDate.subString(0,19);WhatsApp Link is not integrating
Hello, I am using zoho flow. when new row added in google sheet it sends email to respected person. In email body I have a text "Share via WhatsApp". behind this text I putted a link. But when the recipient receives email and wants to share my given infoZoho flow - Webhook
If I choose an app as a trigger in Zoho Flow, is it still possible to add a webhook later in the same flow?Zoho Flow + Bigin + Shopify
We are testing Zoho Flow for the first time and want to create a flow based in first purchases. When a client makes his first order, we're going to add the "primeiracompra" (first order) tag to his account in Shopify (it's not efficient, but that's theIs it The Flow? Or is it me?
I want to do some basic level stuff, take two fields from a webhook, create a zsheet from a template using one field with date appended, create a folder using both fields as the name, and put the zsheet into that folder. I was going to elaborate - butHaving problem with data transferring from Google sheet to ZMA
When connecting Google sheet with Zoho marketing automation it is having the email as a mandatory field. Can I change it as non-mandatory field or is there any other way to trasnfer data from google sheet to ZMA. I have leads which we get from whatsapp,Dropbox to Workdrive synchronisation
I want to get all the files and folders from Dropbox to Workdrive and each time a new file or folder is added in dropbox i want it to be available in Workdrive and wise versa. Sync Updates to Files Trigger: "File updated" (Dropbox). Action: "Upload file"Microsoft Planner Task to Service Desk Plus Request - error n4001
Hi there. I'm trying to create a flow that will create a new request in ServiceDesk Plus when a new task is created in Microsoft Planner. I have succesfully connected both Planner and ServiceDesk Plus, and have configured the 'create request' sectionTrailing Space in "Date and time scheduled "
I am trying to use the Zoho Projects - Create event action in a flow. It is failing with the output error as: "Action did not execute successfully due to an unknown error. Contact support for more details." The input is: { "Duration - Minutes": 30, "Project":Project name by deal name; project creation via flow
Hello, I want to create a project in zoho projects using flow by a trigger at the crm. My trigger is the update of a deal (stage). The project name should be the account name/ deal name. But I dont find the solution to it. Can you please give me the answerSlack / Zoho Flow; Repl
I am trying to add a comment in a zoho ticket when someone reply's to a message in a thread. The Message posted to public channel trigger doesn't seem to pick up thread messages. I also cannot use the thread_ts field as it doesn't seem to pull that in.Get Holiday ready with Zoho Mail's Templates
As the holiday season approaches, it’s time to step away from work and unwind. You may not be able to respond to every email or send individual messages to wish everyone holidays greetings—but It is still important to stay connected. How do you send thoughtfulCustomize folder permissions in a Team Folder in a Team Folder via zoho Flow
HI All, on the nth level folder of a team folder I would like to Customize folder permissions when it's created in the flow of Creating folders. That last level I only want to grant access to a specific group, goup ID 201XXXXXXXX. Can you help with aAssociating a Candidate to a Job Listing
Hello, I am trying to use Zoho Forms embedded on my website for candidates to apply for a job opening. I want the form then to tie directly with zoho recruit and have the candidate be automatically inputed into Recruit as well as associated with the specificAutomate reminder emails for events
Hi team, I am trying to automate send event reminders via zoho campaign to my attendees 1 day prior to my scheduled events. I used zoho flow, autoresponder in zoho campaign, as well as I used workflow and automation - but none of these methods are working.Update related module entry Zoho Flow not working with custom module ?
Hi everyone. I am facing an issue here on Zoho Flow. Basically what I am doing is checking when a module entry is being filled in with an Event ID. Event is a custom module that I created. If the field is being filled in I fetch the contact with its IDHow to disable time log on / time log off
Hi We use zoho people just to manage our HR Collaborators. We don't need that each persona check in and out the time tracker. How to disable from the screen that ?Dealing With One-Time Customers on Zoho Books
Hello there! I am trying to figure out a way to handle One-Time customers without having to create multiple accounts for every single one on Zoho Books. I understand that I can create a placeholder account called "Walk-In Customer", for example, but IZoho Flow - Add to Google Calendar from trigger in Zoho Creator App
Hello! New to Zoho Flow, but I believe I have everything setup the way it should be however getting an error saying "Google Calendar says "Bad Request". Any idea where I should start looking? Essentially some background: Zoho Creator app has a triggerEmail authentication
أريد التحقق من البريد الإلكترونيWhat’s New in Zoho Analytics – December 2025
December is a special time of the year to celebrate progress, reflect on what we have achieved, and prepare for what’s ahead! As we wrap up the year, this month’s updates focus on refining experiences, strengthening analytics workflows, and setting theMarketing Tip #12: Earn trust with payment badges and clear policies
Online shoppers want to know they can trust your store. Displaying trust signals such as SSL-secure payment badges, return and refund policies, and verified reviews shows visitors that your store is reliable. These visual cues can turn hesitation intoThe improved portal experience: Introducing the template view for inventory modules, enhanced configurations, and PDF export support
Availability: Open for all DCs. Editions: All Hello everyone, You can now achieve a seamless, brand-aligned portal experience with our enhanced configuration options and the new template view for inventory modules. Your clients will now be able to viewZoho Analytics Bulk Api Import json Data
HI, I’m trying to bulk-update rows in Zoho Analytics, and below are the request and response details. I’d like to understand the required parameters for constructing a bulk API request to import or update data in a table using Deluge. Any guidance onProject Management Bulletin: December, 2025
The holiday cheer is in the air and it’s time to reflect on the year that was. At Zoho PM Suite, we've been working behind the scenes on something huge and exciting all year and now we are almost ready—with just a bit of confetti—for our grand releaseNext Page