Building 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 feature available in Zoho Projects.
Importance of widgets
Widgets are graphical user interface components that enable you to customize the user interface to provide users with easy data access and the flexibility to perform data operations. Zoho Projects offers widget support in multiple locations to enable users to further customize the UI in the location that most suits their needs.
When and where can widgets be used?
Widgets can be used for multiple purposes, some of which include:
➤ Collect and organize data from multiple sources before presenting it to the end user in a customized style.➤ Display data to end users to allow them to make an input decision, then use that input data to carry out business processes.
You can also load and utilize widgets in multiple locations in Zoho Projects based on your business needs.
Configuring widgets in plugin-manifest.json
To include a widget in an extension, it must be configured in the plugin-manifest.json file. As we explained in an earlier post, the plugin-manifest.json file includes a sample widget named "Projects Extension" in the task details tab by default.
However, as part of an extension, you can add multiple widgets at various locations. In order to include a widget, you need to provide values for the below three keys:
- name - The name of the widget.
- location - The location in which the widget must be loaded. You may find the value to be used for each specific place in the widget locations document.
- url - The path to the HTML file containing the widget UI that must be rendered.
Depending on the functionality of your extension, you can configure as many widgets as you want in your plugin-manifest.json in this manner.
Support for Widgets in Zoho Projects - JS SDKs
Zoho Projects offers JS SDKs that allow widget code to interact with the extension. In order for the javascript widget code to communicate with the extension, Zoho Projects provides JS SDKs support for multiple functionality. Some example functionalities include:
- Initializing the extension
- Fetching current user details
- Getting details of portal, task, and much more
- Setting details for tasks, issues, projects, and so on
- Invoking connections inside the extension
Prerequisite for using the JS SDKs
- In order to use the JS SDK methods as part of the extension, the following CDN URL must be included in the javascript widget code: https://js.zohocdn.com/projects/js/client_sdk.min.js
- If you want to use the Zoho Projects style, include the following link in your code: https://css.zohocdn.com/projects/styles/zps-extn/client_sdk.css
Note: It is important to invoke the init method in order to initialize the extension and utilize the other JS SDKs. All other JS SDK methods can be used only once the init method is invoked.
A few use case examples
- Streamlining Zoho Projects developers' work by displaying Zoho Desk articles related to the task's subject as a tab on the task details page. This allows them to find any existing references related to the task at hand that they can refer to and get a head start on the work.
- Managing your Zoho CRM open cases from within Zoho Projects to efficiently track and prioritize the cases based on their status.
- Uploading and associating files with ease to a third-party file management service, such as Sharepoint or Dropbox, right from Zoho Projects. Similarly, having access to and managing third-party files within the Zoho Projects module of your choice. These synchronized data exchanges between applications help you stay organized and save time.
- Managing your company's expenses and project budgets by collaborating with Zoho Books to allocate funds and generate invoices for each project. As a result, you can easily create estimates, invoices, and deliver the generated bills to the project client while maintaining all of your finances in one place.
These are just some of the examples of what widgets can be used for. Widgets provide you more control and flexibility over the UI design and help in simplifying the user experience.
We hope you found this information useful. Keep following this space as we will explore more such sample business solutions along with their implementation in our upcoming posts!
SEE ALSO:
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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
Canadian Banks ?
Can you advise which Canadian Banks can be used to fully sync credit cards and bank accounts? ThanksSorry! we encountered some problems while sending your campaign. It will be sent automatically once we are ready. We apologize for the delay caused.
Hello. Lately we are having problems with some campaigns, which show us this error message. Sorry! we encountered some problems while sending your campaign. It will be sent automatically once we are ready. We apologize for the delay caused. We can't findCan I remove or divert certain contacts from an active Campaigns workflow?
I have created a workflow in Zoho Campaigns, which sends different emails, once contacts have been added to a mailing list. To choose which email to send to the contacts, there are conditions, which divert contacts based on their company type and their company size. There was a subsection of this workflow, where company size wasn't selected correctly, and some contacts have been sent down the wrong path and received the wrong email. The workflow contains a reminder loop and a further series of emails.How to map fields from Zoho Recruit to Zoho People
I've got these fields from my Job Offer that I'm trying to map to the Work information fields in Zoho People, but they arent showing up. For example, how do I get the department name field (in the job post) to map to the work information field in ZohoUTM in zoho campaigns
Helloo everybody!!! Someone know how IF ZOHO CAMPAIGNS has UTM for tracking the url of any campaigns. thank uFull Context of Zoho CRM Records for Zia in Zoho Desk for efficient AI Usage
Hello everyone, I have a question regarding the use of Zia in Zoho Desk in combination with CRM data. Is it possible to automatically feed the complete context of a CRM record into Zia, so that it can generate automated and highly accurate responses forKnowledge base printing
I saw a posting about printing the knowledge base as I was looking for the answer, but we would like the ability to print out the entire knowledge base with a click, keeping the same organization format. Bonus would include an index of keywords andSearch not working!
I have items in my notebook tagged but when I search for a tag nothing comes up! Any fix for this?Updates for Zoho Campaigns: Merge tag, footer, and autoresponder migration
Hello everyone, We'd like to inform you of some upcoming changes with regard to Zoho Campaigns. We understand that change can be difficult, but we're dedicated to ensuring a smooth transition while keeping you all informed and engaged throughout the process.How do i integrate google analytics to Zoho Campaigns?
Looking to track Zoho Traffic from email Current topic is outdatedHow do teams manage meeting follow-ups across Zoho tools?
We’re using Zoho tools for collaboration and tracking, but managing meeting notes, action items, and follow-ups across teams is still challenging. Curious how others are handling this within Zoho workflows. Are there best practices or integrations thatMejoras urgentes para ZOHO MEETING
Tengo unos meses usando Zoho Meeting. En general, es buena, pero hay cosas vitales que no logra cumplir con mínima calidad. 1) Calidad de audio y video: urge mejoras. Audio con retraso, imagen borrosa, mal recorte de silueta con fondos virtuales. Además,Saving sent email campaign as PDF
I'm looking to add all campaigns sent to an archive folder in sharepoint. Is there anyway to accomplish this in Zoho Flow ? I'm falling at the first hurdle ... can I automatically save a sent campaign as a PDF to a folder location ?Exporting All Custom Functions in ZohoCRM
Hello, All I've been looking for a way to keep about 30 functions that I have written in Zoho CRM updated in my own repository to use elsewhere in other instances. A github integration would be great, but a way to export all custom functions or any wayConditional Layouts On Multi Select Field
How we can use Conditional Layouts On Multi Select Field field? Please help.Appreciation to Qntrl Support Team
We are writing this topic to appreciate the outstanding level of support from Qntrl Team. We have been using Qntrl since 2022 after shifting from another similar platform. Since we joined Qntrl, the team has shown a high level of professionalism, support,How can I hide "My Requests" and "Marketplace" icon from the side menu
Hello everybody, We recently started using the new Zoho CRM for Everyone. How can I hide "My Requests" and "Marketplace" from the side menu? We don't use these features at the moment, and I couldn't find a way to disable or remove them. Best regards,Whatsapp Integration on Zoho Campaign
Team: Can the messages from Zoho Campaign delivered through Whatsapp... now customers no longer are active on email, but the entire campaign module is email based.... when will it be available on whatsapp.... are there any thirdparty providers who canMandatory Field - but only at conversion
Hello! We use Zoho CRM and there are times where the "Lead Created Date & Time" field isn't populated into a "Contractor" (Account is the default phrase i believe). Most of my lead tracking is based on reading the Lead Created field above, so it's importantUsing data fields in Zoho Show presentations to extract key numbers from Zia insights based on a report created
Is it possible to use data fields in Zoho Show presentations along with Zoho Analytics to extract key numbers from Zia insights based on a report created? For example, using this text below: (note that the numbers in bold would be from Zia Insights) RevenueFree webinar: AI-powered agreement management with Zoho Sign
Hi there! Does preparing an agreement feel like more work than actually signing it? You're definitely not alone. Between drafting the document, managing revisions, securing internal approvals, and rereading clauses to make sure everything still reflectsWhatsApp Channels in Zoho Campaigns
Now that Meta has opened WhatsApp Channels globally, will you add it to Zoho Campaigns? It's another top channel for marketing communications as email and SMS. Thanks.CRM For Everyone - Bring Back Settings Tile View
I've been using CRM for Everyone since it was in early access and I just can't stand the single list settings menu down the left-hand side. It takes so much longer to find the setting I need. Please give users the option to make the old sytle tile viewLets have Dynamics 365 integration with Zohobooks
Lets have Dynamics 365 integration with ZohobooksAdd notes in spreadsheet view
It would be great if we could Add/edit notes in the spreadsheet view of contacts/leads. This would enable my sales teams to greatly increase their number of calls. Also viewing the most recent note in the Contact module would also be helpful.Opening balances - Accounts Receivable and Payable
Our accounting year starts on 1st August 2013 and I have a Trial Balance as at that date, including Accounts Receivableand Accounts Payable balances, broken down by each customer and supplier. Q1 - do I show my opening balance date as 31st July 2013 orCancel Subscription
Hi , Im want to cancel my account but without success please help me to do itMaking 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?Direct Access and Better Search for Zoho Quartz Recordings
Hi Zoho Team, We would like to request a few enhancements to improve how Zoho Quartz recordings are accessed and managed after being submitted to Zoho Support. Current Limitation: After submitting a Quartz recording, the related Zoho Support ticket displaysMultiple Cover Letters
We are using the staffing firm edition of Recruit and we have noticed that candidates cannot add more than one cover letter. This is a problem as they might be applying for multiple jobs on our career site and when we submit their application to a client,URGENT: Deluge issue with Arabic text Inbox
Dear Deluge Support, We are facing an issue that started on 12/Feb/2026 with custom functions written using Deluge within Qntrl platform. Currently, custom functions do not accept Arabic content; it is replaced with (???) characters. Scenario 1: If weFile Conversion from PDF to JPG/PNG
Hi, I have a question did anyone every tried using custom function to convert a PDF file to JPG/PNG format? Any possibility by using the custom function to achieve this within zoho apps. I do know there are many third parties API provide this withNow in Zoho One: Orchestrate customer journeys across apps with Zoho CommandCenter
Hello Zoho One Community! We’re excited to introduce Zoho CommandCenter as a new capability available in Zoho One. For the whole customer journey As Zoho One customers adopt more apps across sales, marketing, finance, and support, a common challenge emerges: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 andTotals for Sales Tax Report
On the sales tax report, the column totals aren't shown for any column other than Total Tax. I can't think of a good reason that they shouldn't be included for the other columns, as well. It would help me with my returns, for sure. It seems ludicrousFree Webinar: Zoho Sign for Zoho Projects: Automate tasks and approvals with e-signatures
Hi there! Handling multiple projects at once? Zoho Projects is your solution for automated and streamlined project management, and with the Zoho Sign extension, you can sign, send, and manage digital paperwork directly from your project workspace. JoinExported Report File Name
Hi, We often export reports for information. It is time consuming to rename all the reports we export on a weekly basis, as when exported their default name is a seemingly random string of numbers. These numbers may be important, I'm not sure, but I amAutomatic Refresh on Page?
Hi everyone, We use a page as a dashboard which shows data for the laboratory and tasks pending etc. Is there a way to set the page to automatically refresh on a X time? Many thanks TOGAdd RTL and Hebrew Support for Candidate Portal (and Other Zoho Recruit Portals)
Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to set the Candidate Portal to be Right-to-Left (RTL) and in Hebrew, similar to the existing functionality for the Career Site. Currently, when we set the Career SiteDefault Reminder Time in New Tasks or New Event?
Any way to change this from 1:00am? Thanks, Gary Moderation Update (February 2026): With the Calendar preferences, the default reminder time for Meetings, Appointments and All-Day Meetings can be set. Read more: Calendar preferences in Zoho CRM RegardingNext Page