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
【Zoho CRM】データ一覧画面でのメモのバッジ機能リリースのお知らせ
ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。2026年度もゾーホーユーザーコミュニティをどうぞよろしくお願いいたします！ 今回は「Zoho CRM アップデート情報」の中から、新機能のデータ一覧画面でのメモのバッジ機能をご紹介します。 目次 概要 メモのバッジ機能について メモの作成について メモに関する様々な処理について 最近追加したメモについて メモのバッジの非表示について クライアントスクリプトの対応 概要 メモのバッジ機能について 既存の活動バッジに加えて、すべてのタブのデータ一覧表示画面に、各データごとに利用できる「メモのバッジ」（キャプチャ内の赤枠部分）が新たに導入されました。is it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?
so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assignCan’t find fsm in zoho one
Every other app is available to me in Zoho one except fsmPosibility to add Emoticons on the Email Subject of Templates
Hi I´ve tried to add Emoticons on the Subject line of Email templates, the emoticon image does show up before saving the template or if I add the Emoticon while sending an Individual email and placing it manually on the subject line. Emoticons also showTask Deletion Restriction & Strict Stage Control
Hello Zoho Community, We have the following two issues currently pending and under testing, for which we require a workable and reliable solution: 1. Task Deletion Restriction We are testing ways to ensure that staff users are not able to delete tasksUnable to mass update a picklist field
Hello, I have the records within our Accounts module divided between two account types: Parent Accounts & Member Accounts. I am attempting to mass update accounts from one picklist value to the other (within other specific criteria in our custom fields)Process checklist in CRM
Hi We've created a new sales process that I'm mapping into the CRM - issue I have is that some of the tasks / milestones I would like to capture require very simple tick box responses but there are quite a few under a variety of sub categories so I don'tCRM project association via deluge
I have created a workflow in my Zoho CRM for closing a deal. Part of this workflow leverages a deluge script to create a project for our delivery team. Creating the project works great however, after or during the project creation, I would like to associateHolidays - Cannot Enter Two Holidays on Same Day
I have a fairly common setup, where part-time employees receive 1/2 day's pay on a holiday and full-time employees receive a full day's pay. Historically, I've been able to accommodate this by entering two separate holidays, one that covers full-timeWhere is the settings option in zoho writer?
hi, my zoho writer on windows has menu fonts too large. where do i find the settings to change this option? my screen resolution is correct and other apps/softwares in windows have no issues. regardsFile emails in Shared email folder
Hi, I am unable to allow users to collaborate in Shared email folders: User 1 shares a folder let's say "SharedTopic" with full permissions Users 2 and 3 can see this folder but are unable to add emails to this folder or search in this folder. For example,This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details
Hi Team, when I,m trying to create a email account (imagixmidia.com.br) it's showing this error >> This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details plz help me thanksHow to manage task lists in Zoho Desk?
Hello, I use Zoho Desk for IT customer support. I have a list of standard operating procedures (SOPs), including SOPs for onboarding new users, offboarding users, losing a device, etc. These are lists of tasks to be performed depending on the situation.Zoho Books' 2025 Wrapped
Before we turn the page to a new year, it’s time to revisit the updates that made financial management simpler and more intuitive. This annual roundup brings together the most impactful features and enhancements we delivered in 2025, offering a clearActivating Zobot instead of chat
Hi folks, I know this will be obvious, but I have not been able to locate the details on this via google or youtube. We've had SalesIQ life chat set up for a while now and it is working perfectly. I have just finished development of a Zobot (using codeless)Adding a new section to the related details sidebar when creating a new ticket.
Hello, I was wondering if you can add a new section to the related details sidebar when creating a new ticket. I was wanting to have it to where it also shows the account information related to the contact chosen as well. This is the section I am referringDisplaying only unread tickets in ticket view
Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter thatOne Contact with Multiple Accounts with Portal enabled
I have a contact that manages different accounts, so he needs to see the invoices of all the companies he manage in Portal but I found it not possible.. any idea? I tried to set different customers with the same email contact with the portal enabled andIs Zoho Shifts included in the Zoho One plan?
In case the answer is no: there's any plan to make it available via One? Thank youZoho Tracking Image location
So we've been having an issue with tracking email opens. Specifically in Gmail. Our emails are not that long either, maybe 4 sections of image/250 characters of text/button per section. But all my test accounts I used via Gmail we're showing opens. But then come to find out the tracking image is at the very bottom of the email. So If the message is clipped (It always just clips our social icons on the bottom) and the user doesn't click the show more button it never tracks the open. Looking at otherCreating an invoice to be paid in two installments?
Hi there, I own a small Photographic Services business and have not been able to find a way to fit my billing system into Zoho, or any other Accounting software. The way my payments work is: 1. Customer pays 50% of total price of service to secure theirZoho Tables is now live in Australia & New Zealand!
Hey everyone! We’ve got some great news to share — Zoho Tables is now officially available in the Australian Data Center serving users across Australia and New Zealand regions! Yes, it took us a bit longer to get here, but this version of Zoho TablesDelivery and handling of documents e-stamped using Zoho Sign
Hello everyone! Zoho Sign makes it easy to pay non judicial stamp duty online and automatically attach the digitally generated e-stamp challan to electronic documents. We also manage the delivery of physical e-stamped papers. We periodically receive theseIntroducing Dedicated Modules for Plans, Addons, and Coupons in Zoho Billing
We’ve enhanced the way you manage Plans, Addons, and Coupons in Zoho Billing. Previously, all three grouped together under Subscription Items. Now, each one has its own dedicated module, giving you a cleaner and more intuitive experience. This updateSortie de Zoho TABLE ??
Bonjour, Depuis bientôt 2 ans l'application zoho table est sortie en dehors de l'UE ? Depuis un an elle est annoncée en Europe Mais en vrai, c'est pour quand exactement ??Drop Down Value
Hi, May I know why Zoho Flow treat this drop down as number and not as string. If so, how can I fetch the right value for filtering. This field is from Creator, in Creator upon checking by default it is a string since it's not a lookup field.Zoho CRM's mobile apps: A 2025 Recap
2025 marked a year of steady progress for Zoho CRM's mobile apps. We rolled out several updates and features to improve usability and make everyday CRM work a lot easier to manage. Here’s a look back at some of the key releases from 2025. Android releasesFacebook follower count doesn't match FB Analytics
Hi all, I am wondering if anyone else has issues with follower counts for Facebook not matching FB's native analytics tool. On the Zoho dashboard, it's showing 1,007, but FB shows 1,060. All the other channels match up. Any insights are much appreciated!Meta and Facebook data report discrepancy
I have been currently gathering manually facebook follower data thru meta. In zoho marketing plus the social media reporting only allows for page likes, and so there is a discrepancy with the data. please the difference in files attached. Is there wayUnlocking New Levels: Zoho Payroll's Journey in 2025
Every year brings its own set of challenges and opportunities to rethink how payroll works across regulations and teams. In 2025, Zoho Payroll continued to evolve with one clear focus: giving businesses more flexibility, clarity, and control as they grow.Can I export all attachments from Zoho CRM?
Can I export all attachments from Zoho CRM?Community Digest — Noviembre y Diciembre 2025
¡Hola, Comunidad de Zoho en Español! Cerramos el año de la mejor forma con nuestro último Community Digest de 2025, donde podrás encontrar las últimas novedades de nuestros productos. ¿Todo listo para empezar 2026 con el mejor pie? ¡Vamos a ello! ZohoZoho Projects Plus’ 2025- the year we launched
We’ve been building project management tools for the past 19 years, and a question we often hear is: Different teams in our organization prefer different project management methods; while the development team prefers agile, the marketing and sales teamsZoho Books emails suddenly going to Spam since 11 Nov 2025 (Gmail + now Outlook) — anyone else?
Hi everyone, We migrated to Zoho Books in July 2025 and everything worked fine until 11 Nov 2025. Since then, Zoho Books system emails are landing in customers’ Spam (first Gmail, and now we’re seeing Outlook/Office 365 also starting to spam them). ImpactedHow do you print a refund check to customer?
Maybe this is a dumb question, but how does anyone print a refund check to a customer? We cant find anywhere to either just print a check and pick a customer, or where to do so from a credit note.Company Multiple Branch/ Location Accounting
Hi All, anyone know whether company can maintain their multiple Branch Accounting in Zoho Books. It will be chart of Accounts & Master Data will be same but different report available as per per Branch. Thanks & regards, Vivek +91 9766906737Zoho Books Invoices Templates
It would be really helpful to have more advanced features to customise the invoice templates in Zoho Books. Especially I´m thinking of the spacing of the different parts of the invoice (Address line etc.). If you have a sender and receiver address inEmail Administrators! Join our tips & troubleshooting series
Greetings to all the admins out there! This announcement is exclusively for you. As we step into the New Year, we’re excited to start a dedicated series of admin-specific tips curated to support you. These posts will help you overcome everyday challengesDeprecation of the Zoho OAuth connector
Hello everyone, At Zoho, we continuously evaluate our integrations to ensure they meet the highest standards of security, reliability, and compliance. As part of these ongoing efforts, we've made the decision to deprecate the Zoho OAuth default connectorFree Webinar : Unlock AI driven business insights with Zoho Inventory + Zoho Analytics
Are you tired of switching between apps and exporting data to build customized reports? Say hello to smarter & streamlined insights! Join us for this exclusive webinar where we explore the power of the Zoho Inventory–Zoho Analytics integration. LearnNext Page