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
Zoho Books Extension: What Happens If Custom Fields Already Exist?
When developing Zoho Books extensions, what happens if the target Zoho Books organization already has a custom field with the same API name as one defined in the extension? I’m asking because we originally created an on-Books version of this functionality,Modular Permission Levels
We need more modular Permissions per module in Books we have 2 use cases that are creating problems We need per module export permission we have a use case where users should be able to view the sales orders but not export it, but they can export otherFree Webinar on 21 January: Looking back at Zoho Mail in 2025
Hello Zoho Community! Curious about how Zoho Mail evolved in 2025? Wondering how these updates can make your everyday email work simpler? We’ve got a session you won’t want to miss. In our Zoho Mail 2025 recap webinar, we’ll walk you through the key featuresCliq Networks users can see all other network users contact information
Is there a way to hide user contact information from each user in networks? I would only like the users to see the admin's contact information, not other users. Network users information shared by defaultZoho Sheet - Printing - Page Breaks and Printing Customization
I think the title is descriptive enough in that I cannot find help documentation on a simple task of adding in page brakes for separating pages on print. ThanksMissing the "Find & Merge Duplicates" choice
Hi, I am missing the "Find & Merge Duplicates" choice. I looked under the "More Actions" menu in Contacts, Accounts, Vendors, and Leads and it is not there. I have full permissions. Please assist me on finding this feature. Thanks!OAuth integration issues
I'm experiencing persistent OAuth errors when trying to connect Make with Zoho API. I've tried multiple approaches but keep encountering the following issues: First error: 'Invalid Redirect Uri - Redirect URI passed does not match with the one configured'Marketing Tip #16: Ideal sizes and formats for adding images to your online store
Images can make (or break) your storefront experience. When your banners and product photos follow the right sizes and aspect ratios, your store looks cleaner, loads faster, and feels more trustworthy—especially on mobile. Here are recommended image sizesImprove WhatsApp Module in Zoho CRM
The current WhatsApp module UI in Zoho CRM feels cluttered and complex, especially when handling high volumes of conversations. It would be great to enhance the WhatsApp module UI/UX by adopting a clean and simplified interface similar to Bigin CRM’sBlueprint transitions on locked records
We use the ability to automatically lock records (quotes, sales orders, etc.) based on criteria, such as stage. For instance, if a quote has been sent to a client, the quote is then locked for further edits. Our ideal quote stage process is: Draft>Sent>Won.Enhance productivity with the revamped Zoho Sheet View
Hello folks, For some time now, you've been able to use the Zoho Sheet View to quickly edit multiple records or to insert a batch of new records. Its tabular interface allows users to engage in these tasks productively. Despite this, the existing SheetNo OR Filter for Views with a Related Modules Criteria
We would like to create a Deal View where the User can see all their deals. For that, we would need an OR to connect the criteria. One of the Fields is a "multiselect User", these (Related Modules Criteria) can only be Filter with an AND. Even betweenChat to Lead
Can I convert a Chat to a Lead?Limit maximum entries for subform - depending on fields entry
Hi Zoho! I have a form with a subform in it. I'd like to have limitation for the row number depending on an entry in a drop-down field in the main form (If the field in the main form is marked "Answer1" - Limit the entries to 1 row, if the field is "Answer2" to have 2 rows limitation, "Answer3" = no limitation at all) Can this be done? Thanks RavidSave HTML Snippet Page as PDF with Dynamic Data in Zoho Creator (Working Solution)
Hi Zoho Creator Community 👋, I faced a common challenge while working with HTML Snippet Pages — I needed to generate a PDF with dynamic data and save it back into the record automatically. Here’s the working solution that might help others. Use CaseMake Camera Overlay & Recording Controls Visible in All Screen-Sharing Options
Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an improvement to the screen-recording experience in Zoho WorkDrive. Current Limitation: At the moment the recording controls are visible only inside the Zoho WorkDrive tab. WhenRebranding Options for Zoho One
We need the addition of rebranding and white-labeling settings directly within the Zoho One Admin Panel. This feature should allow organizations to customize the unified portal with their own logo, brand colors, and custom domain mapping (e.g., portal.company.com).Tip #57- Accessibility Controls in Zoho Assist: Mobility- 'Insider Insights'
Remote support should be easy to navigate for everyone. For users with mobility-related accessibility needs, long sessions and complex navigation can be challenging. Zoho Assist’s Mobility Accessibility Controls simplify interaction through keyboard-basedTotal Cost in reports showing zero
The image below shows my issue. The column Total Cost should show the cost to our company based on hours logged and the employee's rate. For instance, if the person working on Subtask 1 is paid 20/hr, then Total Cost should display $160 ($20x8 loggedTo print Multiple delivery notes in batches
In Zoho Books, we can print a Delivery Note from an Invoice using the Print Delivery Note option, but it is non-editable and always prints all line items from the invoice. Our requirement is to deliver invoiced items in batches and print delivery notesInvoices not arriving and mail server settings
I am having an issue where some clients are not receiving invoices. I have configured Zoho Books to send on my behalf and configured the appropriate SPF, DKIM and DMARC settings on my mail server and tested these as working. I get the CC'd copies so IUPLOAD A CREATED PDF AUTOMATICALLY
Using the html header pdf+print button, I have managed to find a way to have a user create a pdf using entered form data. Using the schedule button, I can have a "file uploaded" pdf mailed to someone as an attachment. The missing piece is to be able to add the pdf, created in that html page to a file upload field automatically? Right now one has to save it to computer and then upload it in a FILE UPLOAD FIELD. Any help would appreciated !Consolidated Department-wise Payroll Cost Summary Report
Hello Zoho Payroll Team and Community, I am writing to discuss a reporting requirement regarding department-level expense tracking within Zoho Payroll. As we scale and manage salary distribution for employees across multiple departments, such as Accounts,How to remove chat icon from knowledge base?
I have set up a knowledge base to hold FAQs and documentation. It is currently standalone, and not integrated into our website. On every page there is a chat button in the bottom left corner that says "We're offline, please leave a message." How can I[ZohoDesk] Improve Status View with a new editeble kanban view
A kanban view with more information about the ticket and the contact who created the ticket would be valueble. I would like to edit the fields with the ones i like to see at one glance. Like in CRM where you can edit the canvas view, i would like to editAutomated Dismissal of Specific Notifications and Centralized Control of Toast Notification Settings
Dear Zoho Team, I hope this message finds you well. We would like to request two enhancements related to notification handling within Zoho Desk: Automatic Dismissal of Specific Notifications: Currently, when certain actions are taken in the ticket listShow field in spreadsheet view depending on other field value
Hello. Not sure if this is possible but let's say i have spreadsheet view in Creator with four different fields Field A, B, C and D Then i have a field named Response which for one record could contain only one of the pre-definde choices below A, B, CIntergrating multi location Square account with Zoho Books
Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.Zoho Learn Zapier Integration
Hello all, Is there any plan to integrate Zoho Learn with Zapier? It seems almost all Zoho products are in Zapier, with the exception of Learn and Marketing Automation.Notice: SalesIQ integration paused on Zoho Sites
I have this notice on my Zoho Sites in the SalesIQ integration setup. Can someone assist? "This integration has been temporarily paused for users. Reconnecting SalesIQ after disconnection will not be possible until we provide further updates." thankDifferences between Zoho Books and Zoho Billing
Without a long drawn out process to compare these. If you were looking at these Books and Billing, what made you opt for one and not the other. ThanksNew Feature : Copying tickets with all the contents such as conversations/history/attachments etc
Sometimes our customers and distributors do create tickets (or send emails) which contain more than one incident in them and then also some of the further conversations which are either created by incorrect new tickets or replies to old tickets are being created as combined tickets. In such cases we require to "COPY" the contents of the tickets into separate tickets and merge them into their corresponding original tickets. The "CLONE" feature doesn't copy the contents (especially the conversationsComo se agregan los empleados
Necesito saber si para agregar empleados los mismos necesitan tener licenciasDeluge Error Code 1002 - "Resource does not exist."
I am using the following script in a Custom Button on a Sales Return. Basically, the function takes the information in the sales return (plus the arguments that are entered by the user when the button is pushed) and creates a return shipping label viaAdding multiple Attendee email addresses when adding a Zoho Calendar event in Zoho Flow
I am trying to integrate Notion and Zoho Calendar via Zoho Flow. However, the Attendee email address supported by Zoho Calendar - Create event only supports one email address, so I am having difficulty implementing automation to automatically registerGraceful Handling of Exceeded Option Limits
Hi Zoho SalesIQ team. I would like to submit a feature request to deal with a bug in salesIQ Current Behavior (Bug): When a dynamic list passed to the Single Select Option Card contains more than 20 options, the Zobot stops responding (freezes/hangs)System default SLA descriptions can't be modified
The system default SLAs have identical descriptions for all SLA levels, but their settings differ. However, I am facing an issue where I cannot modify these descriptions and save the changes. The content of the description box can be edited but the changesAdding non-Indian billing address for my Zoho subscription
Hey Need help with adding a non-Indian billing address for my Zoho subscription, trying to edit the address to my Singapore registered company. Won't let me change the country. Would appreciate the help. Regards, RishabhHow to create one ZohoCRM organisation out of a multi-organization?
Hi, we have a multi-org including two different Zoho CRM organizations for two companies using respectively EUR and USD as default currency. I was wondering if there is any easy way to merge the two organizations into just one, so that users may accessGray screen while signing documents
We are all getting a "gray" screen when trying to sign documents in Zoho sign. Anyone else having issues?Next Page