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
annualy customer report
we need a report per customer that looks like this invoic number cleaning laundry repair management 01 january xxx euro xx euro xx euro xxx euro 02 february xxx euro xxx euro x euro xxxx euro and so on the years 12 months is that possible to make andExport your notes from Notebook!
Dear users, The long awaited feature is now live. Yes, you can now export your notes from Notebook app in bulk. But the feature has just started with web app alone for now. You can try the export feature as mentioned below: Go to our web app, https://notebook.zoho.com Go to 'Settings' > 'Export' Now, select the format: You can select either ZNote or HTML Once done, you can use the same to import or can have this a local backup of your notes. Note: Export for other platforms are in development andour customers have difficult to understand the Statements
our costumers have big problems to understand Zohos Statements. we need a text box after the payment number to explain what the payments are for. Is it possible to develop a version of the Statement with that kind of box and if so whu can do itCanva Integration
Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,Prepopulating Fields
Hello, I have a form (Assets) with 2 lookup fields: Client (from Clients) Site (from Client Sites) I modified the code (highlighted in red below), so the Site dropdown shows the list of sites related to the Client. must have Client_Site ( type = picklistREPORT THAT SHOWS SOH FOR ITEMS THAT HAVE ZERO SALES
When we started Zoho we imported a lot of inventory lines directly off our suppliers price list and have never ordered / sold. I want to clean up our data base and remove all these lines. What reeport will show me what lines have zero sales as well asAutomation series : Close all tasks once the project is completed
When a project is marked as Completed, it might still have open tasks such as recurring tasks that were not marked as complete, tasks that are no longer relevant, or tasks that no longer need attention after closure. To ensure the project reflects itsConverting Sales Order to Purchase Order
Hi All, Firstly, this code works to convert a sales order(SO) to a purchase order (PO) via a button, however I am running into an issue when I convert the SO where the values from the line items are not pulled across from the SO to the PO. The ones inHorrible Connectivity!
I have used Meetings several times, but most of the time the connection is horrible. The video freezes, the audio freezes, and we end up cancelling the meeting. I am on a high speed internet connection, and Zoom works fine, so I know it's not a problemIs it really true that I can't set the default 'deposit to' account in 2025?
I've been using Books for 7 years and the default account has never been a problem. I usually manually reconcile invoices and have never had a thought about which account. It has always been my account. However, I recently noticed that for the past 4Zoho DataPrep switching Date Format
When using a pipeline that is importing Zoho Analytics data into Zoho DataPrep, the month and day of date fields are switched for some columns. For example, a Zoho Analytics record of "Nov. 8, 2025" will appear in Zoho DataPrep as "2025/08/11" in "yyyy/MM/dd"Using Another Field Value for Workflow Field Update
I'm trying to setup a Workflow with a "Field Update" action on the Lead module, but I would like the new value to actually be taken from a DIFFERENT Field's on the Lead record (vs just defining some static value..) Is this possible? Could I simply useTax information
Hello, I need help/guidance on how to add my organization's Tax/VAT information. Thank you PavlyBuild smarter Guided Conversations with Fork Blocks
When your customers arrive on your support channel, they're not there to explore. They are usually confused and stuck while trying to fix something important. We understand how stressful that moment can feel and we want your bot to make things easier,Custom item field won't allow decimal.
Hello, I have a custom item field that needs to be able to have a value with a decimal place such as 6.7 or 6.18. I have tried custom formatting the input format but can not get the correct syntax to allow this. Is this possible in Zoho?Free webinar: Zoho Sign unwrapped – 2025 in review
Hey there! 2025 is coming to an end, and this year has been all about AI. Join our exclusive year-end webinar, where we'll walk you through the features that went live in 2025, provide answers to your questions, and give you a sneak peek on what to expectHubSpot CRM to Zoho Creator Integration
I'm trying to create an integration between HubSpot CRM and Zoho Creator with HubSpot being the push source (if a contact is created or updated in HubSpot, it pushes the information to Zoho Creator). I have two questions: 1- Is it best to use Zoho FlowGain control over record sharing with portal users through our new enhancement: criteria-based data exposure
Dear Customers, We hope you're well! Portals is a self-service avenue through which your clients can access and manage their direct and related data in Zoho CRM. This empowers them to be more independent and enables them to experience a sense of transparencyBest-practice setup in Zoho One for managing combined candidate pools and exporting anonymised CVs
We are new users of the Zoho One bundle and operate a consulting and engineering company. Our workforce model includes a mix of permanent employees, active job applicants, and freelance/independent consultants. All three groups need to be searchable,Meet Canvas' Grid component: Your easiest way to build responsive record templates
Visual design can be exciting—until you're knee-deep in the details. Whether it's aligning text boxes to prevent overlaps, fixing negative space, or simply making sure the right data stands out, just ironing out inconsistencies takes a lot of moving parts.hard-bounced email list
Hi, Below pops up when I try to send an Email to some of my customer. Please guide me how to take it out from hard-bounced list? I am not sure how they were marked in hard-bounced listRegister the 'Contact Role' addition and change as a Potential edition so it can trigger Workflows
We are trying to use "Contact Roles" in Potentials. Contact Roles are special and different than the other Related lists, so, it may have a special behavior. Something to keep in mind is that you will never have 100 Contact Roles as you can have 100 Tasks, Calls, or any other Related list. In our case we will have 2 in average and up to 4 or 5 maximum. The problem is that we need to bring information from 3 key Contact Roles to the Potential and adding a Contact to the Contacts Roles area never triggerCan I change the format of the buttons in the email templates?
Hi all! We have been working hard trying to brand our email templates, and have some way to go yet. One of the things we can't seem to edit is the green ${Cases.CUSTOMER_PORTAL_BUTTON} button and the font of the View Ticket text. Is there any way of doingBest practice to structure reporting to include events covering multiple months / quarters.
Hi, I'm new to Zoho, have some experience of more "enterprise" tools, looking for some input from the community. I'm looking to create a report that includes events that cover a long period, each event has a start / end date and I'm struggling undertandingMarketing Tip #11: Turn features into benefits that sell
We all love talking about our products, but here’s a secret: customers don’t just buy features, they buy benefits. Instead of just saying "Made from 100% organic cotton," try "Soft, breathable comfort that lasts all day." Benefits tell shoppers how yourSynchronise item image between Zoho Commerce and Zoho Books/Inventory/CRM
Here is a blindingly simple idea to tie several Zoho products together. Zoho - please include a method to synchronise the item image (or images) from one Zoho application to another. For example, if you upload an item image in Zoho Inventory, a user shouldHow do I migrate from zoho mail to Office 365?
The manual migration of Zoho Mail to Microsoft 365 typically requires using IMAP to move emails and configuring Microsoft Outlook to sync Zoho Mail. This approach can be error-prone, especially if there are multiple accounts or large email archives. Moreover,New Update: Convert External Users in Bulk in Zoho Directory
Greetings to all Zoho Directory users out there! We’re excited to introduce a new update that makes user management in Zoho Directory even more efficient; you can now convert external users in bulk! Earlier, admins could convert only one external userNew Update: Convert External Users in Bulk in Zoho One
Greetings to all Zoho One users out there! We’re excited to introduce a new update that makes user management in Zoho One even more efficient; you can now convert external users in bulk! Earlier, admins could convert only one external user at a time.How to edit form layout for extension
I am working on extension development. I have created all the fields. I want to rearrange the layout in Sigma platform. But there is no layout module in Sigma. How can I achieve this for extensions other than Zet CLI and putting the fields into widgetWebsite not properly connecting with Zoho Creator app portal (embed & data sync issue)
Hello Zoho Community, I’m currently facing an issue while trying to connect my external website with a Zoho Creator app portal. I have a tool-based website ( https://mygardencalculator.com/ ) where users interact with calculators and dynamic content.日本語フォントの選択肢拡充についての要望
日本語フォントの選択肢がとても少ないと感じたことはありませんか？ 多くのアプリ（たとえば Invoice）ではフォントが1種類しかなく、正直あまり使いやすい・見た目が良いとも言えません。 そろそろ、もっと多くの日本語フォントを追加してほしい、そしてすべてのアプリで同じフォント選択肢を使えるようにしてほしいと、私たちユーザーが声を上げる時期だと思います。 ご存じのとおり、現状ではアプリごとにフォント周りの仕様にほとんど一貫性がありません。 みなさん、一緒に要望を出していきましょう！Does anyone know how to setup Zoho Desk or Zoho CRM as a custom outgoing/incoming Call Centre?
I need to setup a call center so I can setup agents to make phone calls across Canada to market our services. I am trying to figure out the most reliable and cost efficient way to do this? I am currently paying for two phone services and neither seemDisplay actual mileage on an invoice
My users are creating expenses in Zoho expense. For example, they expense 10 miles and get paid 7 dollars (10 miles * IRS rate of .70). If I look at the expenses in Zoho Books, it does show them at 10 miles at .70 cent When I add these expense to an invoicePrevent Unapproved Quotes from Exporting to Zoho CRM Finance Module
Is it possible to prevent unapproved quotes in Zoho Books from being exported from Zoho Finance module inside Zoho CRM?Default font size for printing is too big
A recent issue in printing e mails is that the default font size is huge. This happens in both Edge and Firefox. In order to get what I would call a "normal" printout of an e mail it is necessary to go into the printer preferences / options and set the scale to 75%, otherwise a short e mail with signature and logos etc printed at 100% can take 3 or 4 pages. The annoying thing is that it is necessary to do this each time a printout is to be made as a change in scale only applies to that particularRequest for Auto PO - Min–Max based Automated Purchase Feature
Dear Zoho POS Team, I’m writing to request a feature enhancement that would significantly streamline inventory management for businesses using Zoho POS — particularly supermarkets, FMCG retail, and multi-store operations like ours. Feature Requested:Export Invoices to XML file
Namaste! ZOHO suite of Apps is awesome and we as Partner, would like to use and implement the app´s from the Financial suite like ZOHO Invoice, but, in Portugal, we can only use certified Invoice Software and for this reason, we need to develop/customize on top of ZOHO Invoice to create an XML file with specific information and after this, go to the government and certified the software. As soon as we have for example, ZOHO CRM integrated with ZOHO Invoice up and running, our business opportunitiesissue with deluge script
i used chat gpt to build this script and I am getting 2 errors which I cannot figure out how to fix: void monthly_sales_order_generation() { try { // ---------------- CONFIG ------------------- analytics_url_1 = "https://analytics.zoho.com/api/<workspaceID>/report/<reportID1>/data";Introducing LinkedIn Apply Connect for Zoho Recruit
Attract up to 3x more qualified candidates and hire more efficiently with LinkedIn Apply Connect. Let candidates fill-in job applications without any redirections, gain deeper insights with applicant highlights within Zoho Recruit, and keep candidatesNext Page