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
Issue with "Add Your Mobile Number"
Hello, I am trying to sign up for email service for a domain name, and I cannot finish the authentication. When I enter my mobile number, I receive the message "We’re unable to send OTP to this mobile number. Please contact support-as@zohocorp.com". Izoho mail non vérifié
Bonjour, Il y'a un jour que j'ai acheté un domaine et toute les tentatives pour l'associé a mon compte shopify son vaine. j'ai essayé TXT sans suite après, j'ai essayer avec CNAME sans suite. j'aurais besoin de votre assistance pour associé mon mail.Unable to send message;Reason:553 Relaying disallowed. Invalid Domain
i have facing the issue "Unable to send message;Reason:553 Relaying disallowed. Invalid Domain" if i verify domain evertthing i did but still face the same error.Override Auto Number field?
We are preparing to migrate from Salesforce. In Salesforce, we auto-generate a unique number on our Opportunities (Potentials). If the Opportunity results in a contract, we use that unique number as the Contract number. There are some situations whereUsing a third party service provider want to move directly with Zoho
Hi good day I’m currently using Zoho but I’m using a third party service provider I want to move directly with you guys I’m using Zoho email and invoices and my domain please let me know if it’s possible to move away from the third party provider my emailRequest for Assistance Regarding Email Sending Issue (554 5.1.8 - Email Outgoing Blocked)
Dear Zoho Support Team, I hope this message finds you well. I am writing to request assistance with an issue we are currently facing regarding our Zoho Mail account. Our email account, admin@tuyensinhcanuoc.com, is encountering the following error whenZoho Mail API returns empty inbox (0 messages) but webmail shows 37 unread emails
Hello, I'm experiencing a discrepancy between Zoho Webmail and the Mail API (EU region). **Setup:** - Account: EU datacenter (mail.zoho.eu) - API: Self Client OAuth2 via api-console.zoho.eu - Scopes: ZohoMail.messages.READ, ZohoMail.messages.UPDATE, ZohoMail.folders.READ,ShipStation and Zoho Inventory
Hello, I am looking to sync zoho inventory with shipstation ZOHO INVENTORY SHIP STATION Sales Order ==> create ORDERS INVOICE <== Shipments What exactly does BETA mean on the Shipstation connector? This is required for me to sign-on in the next month. Thanks in advance for your effortsE
We are trying to add our Zoho Form embed in our Elementor Page Builder. After adding Zoho Forms widget in elementor page builder it’s displaying in backend page builder but it’s giving 403 error while trying to save, as it’s not reflecting in front end.Connecting Zoho Inventory to ShipStation
we are looking for someone to help connect via API shipStation with Zoho inventory. Any ideas? Thanks. Uricustom module import.
Is there a way to import data into a custom module? Thanks RudyHEIC File Type Viewer
Hi, It would be nice to be able to click on the images in the All Entries/Reports Tables which are HEIC the same as JPG, PNG, etc. so they open in a viewer from Zoho or the Attachment Service, today HEIC requires you to download each image and open itHow to dynamically pass IDs from one API response to a second API call in Zoho DataPrep?
Hi Team, I am setting up a global consolidated reporting pipeline in Zoho Analytics (India) using Zoho DataPrep as the ETL engine. I am pulling data from multiple Zoho Books Data Centers (US, Singapore, India) thats why i used the URL Source (OAuth 2.0)Building Toppings #4 - Setting up and using connections in Bigin toppings
When building a topping to extend Bigin's functionality and connect it with third-party applications, creating and handling connections is an important step. Connections provide a secure way for your topping to authenticate and communicate with otherNeed code format to specify default values
Can someone please direct me to the code syntax or the proper translation per the instructions circled below. These instructions don't seem correct.AI Interview Insights: Turn Recorded Interviews into Quick Transcripts & Summaries
Evaluating interviews shouldn’t require replaying long recordings or taking manual notes. With AI Interview Insights, you can now review complete transcripts and AI-generated summaries of your One-way (Recorded) interviews right inside Zoho Recruit. ThisRecord payment: Payment Mode vs. Deposit To and how to "connect" them!?
How do we set up that when we choose: "Payment Mode"= Cash, then "Deposit to" is automatically set to Petty Cash, and if we choose "Payment Mode"= Check, then "Deposit to" is automatically set to Undeposited Checks, and if we choose "Payment Mode"=Grouping Undeposited Funds to Move to other accounts
In the bank option it would be nice to check what transactions in undeposited funds I want to move to other accounts. Then while checking this it can accumulate totals and created whats essentially a deposit slip. Once the transaction is moved it shouldFacing email delivery issues? Verify your domain's DNS records
Have you ever wondered why your legitimate emails are landing in the recipient’s spam folder? Or been surprised to see emails sent from your registered domain getting rejected by recipient email servers? Why does this happen? In most cases, this happensOrder of Departments in Help Desk
In the end user portal, , the departments are sorted by the date of creation of the department (or perhaps their id). Is there a way to choose the display order of the departments or at least to be able to sort them alphabetically?COGS - Account showing negetive
I have multiple COGS account and in these all there is one account is negetive so suggest why it is showing negetive value.?Create CRM Deal from Books Quote and Auto Update Deal Stage
I want to set up an automation where, whenever a Quote is created in Zoho Books, a Deal is automatically created in Zoho CRM with the Quote amount, customer details, and some custom fields from Zoho Books. Additionally, when the Sales Order is converted%PaymentLink%
Does not work. Software creates a BAD link. ....and yes payment options are turned on. Link on the invoice pdf once opened will work but this template is a joke.Google Photos
I am hoping that my question already has a fix. I current have Google synced accounts that I want to get away from. One in particular on is Google photos. Is there any software, or 3rd parties that I can join to back my photos up straight to specifically designated file in the ZOHO cloud that's tied to Docs? Please advise... MikeZoho Books Items Categorisation/Grouping/Folder
Is there a way to do items categorisation? a folder structure? Product Type A - Option 1/2/3 Product Type B - Option 1/2/3 Current problem : I have more than 50 items on the list, its hard for team to navigate.Cash payments before invoice date
We have been using zoho books for our hospitality business for some time and have been very happy with the system. However in 2025 an update was pushed through and we are now not able to record payments for invoices before the invoice date. the case scenarioCopy / Duplicate Workflow
I have workflows setup that are very similar to each other. We have a monitoring system watching servers, and all notifications - no matter what client it is about - will come from a noreply@ address which is not very helpful in having it auto assigned to the right account. I have setup a workflow that will change the contact name of the ticket (currently it would say noreply@) to the correct customer which is based on the subject line, as that mentions which server the alert it is about. I needTransfer between two customers (Peters Rental account to Peters Private account)
we are a Property Management company. Our customers have to accounts (registered as two customers - Peter Rental and Peter Private On the rental account all income and costs fron rental activities are noted. On the private account all private are notedAutomation#18: Automatically Fetch Values from Contacts to the Tickets Module
Hello Everyone, Welcome to this week's edition, where you can seamlessly sync fields from the Contacts to the Tickets module. For efficient business operations, it's crucial to have details mapped across different modules. Zylker Secure offers antivirusCharge multiple invoices
We use auto-charge/recurring invoicing for 100's of clients. If we create a single manual invoice we can charge it to the credit card for these clients with the CC added to their recurring invoices. If a client has multiple outstanding invoices, is there a way to make one charge for all of the invoices instead of a separate charge to the cc for each invoice?Handling/tracking escalation management in Zoho
Hi all, I am working on finding a tool to register and track our escalation management process. Specifically, this is about client escalations, typically related to project delivery issues. The idea is that we could have some sort of form with core questionsGlobal Choice List share ownership
I have created several forms that use one or more Global Choice Lists. These lists have been published to Org. I would like to allow one or more admins to edit the choices in these lists. Any help appreciated. GeoffSetting up property management in Zoho Books
Hi, I run a property management business that manages property complexes. There are multiple owners, some owning more than one property on the same complex. My role is to manage the fees they pay for maintenance of common areas, such as the swimming poolHow to prevent users from switching price lists in an order?
Hi, I have Zoho Finance integrated with Zoho CRM. My team will be placing orders through the CRM using the Finance module. When creating a new customer I will assign it a price list, I don't want the sales rep to switch to a different Price List, otherUnable to Change Display Name for my outlook mail ID
Hello, I recently added my personal outlook mail to Zohomail (in the web interface) using POP3 options. I tried to change the display name of the outlook account, but it changes for a brief moment and reverts back to the old name. Kindly help me withMollie Connect in Zoho Books
Have noticed that Zoho Books is missing the most popular payment provider in Europe: Mollie. Knowing that Mollie has a solid Java SDK, why is this not yet implemented in Zoho Books for European customers? More info: https://docs.mollie.com/oauth/ovUnable to change Lookup field from Multi Select to Single Select
I am trying to change a Lookup field in my Zoho Creator form from Multi Select to Single Select, but I am unable to find any option to do this.Simple Callback Notifications Needed
My team are terrible at remembering their CRM callbacks, often due to how long in the future they are set for. Is there a way i can set an e-mail notification for when a callback is due? For example we set it for 9am one day and five minutes before theyPersonal Data (RODO), Cookies / Trackers - ePrivacy
I have noticed several issues that should be addressed on the customer support page. Zoho Desk provides the support portal, but it currently lacks the following options: A GDPR and personal data processing consent checkbox before logging in, located inHow to set a multi-lookup field as mandatory?
Next Page