Building extensions #6: Custom user interfaces with Widgets

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
You can refer to the JS SDK document for the available SDKs.

Prerequisite for using the JS SDKs
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!

Sign up for a Zoho Developer account and start developing extensions for Zoho products using Sigma.

SEE ALSO:


Next>>

      • Recent Topics

      • Integrate Multiple ZohoBooks organization with zoho projects

        We have successfully connected our Zoho Books with Zoho Projects for synronizing timesheet data. Our Business specialty is, that the staff of the Main company (A) is working on several projects, but the Clients are sometimes contracted and paying to a

      • Zoho OAuth Connector Deprecation and Its Impact on Zoho Desk

        Hello everyone, Zoho believes in continuously refining its integrations to uphold the highest standards of security, reliability, and compliance. As part of this ongoing improvement, the Zoho OAuth default connector will be deprecated for all Zoho services

      • How do I add todays date to merge field

        I don't see any selection of todays date when creating a letter. Surely the date option of printing is standard? John

      • Tracking Emails sent through Outlook

        All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But

      • Whats that

        Price?

      • The same Contact associated to multiple Companies - Deals

        Hi, I would like to know if there is an option to associate the same contact with multiple companies (two or more) deals, using the same contact details for all. This is because we have contacts who are linked to different companies or branches of the

      • Portals-Adjust Column Sizes

        I am trying to adjust the column widths in Portals tabs. Columns that don't need to be wide are wide and longer ones are very short. I thought adding more to the digits box in Edit would widen them, but it doesn't. Anyone know how to adjust these?

      • Add link/button to open approved record from approval list and detail views?

        Hi, How do I allow users to click on an approval record and open that submission? For example, userA submits a quotation then userB approves/rejects. They both can see the quotation on "completed task" list & detail views, but there's no way for them

      • record submitted from creator and invoice is creating in books , but the workflow of books is not tiggering on create of record in books

        record submitted from creator and invoice is creating in books , but the workflow of books is not tiggering on create of record in books headermap = Map(); headermap.put("X-ZOHO-Execute-CustomFunction","true"); response_inv = invokeurl [ url :"https://www.zohoapis.com/books/v3/invoices/fromsalesorder?salesorder_id="

      • Prevent editing of a record after getting approved/rejectedr

        Hi, I'd like to block any user from editing a record after it was approved or rejected, how can I do that?

      • Formula Field/Campo de Fórmula

        Hello everyone, I have a purchase requisition form in which each department submits a request, and the request is automatically routed to the person responsible for that department. In this form, I have several fields with the following link names: Quantidade1,

      • Formatting Problem | Export to Zoho Sheet View

        When I export data to Zoho Sheet View, ID columns are automatically formatted as scientific notation. Reformatting them to text changes the actual ID values. For example, 6557000335603071 becomes 6557000335603070. I have attached screenshots showing this

      • Feature Request - The Ability to Link A Customer with a Vendor

        Hi Finance Suite Team, Many businesses buy and sell products from the same companies or individuals. For example, a car sales business may buy a car from a member of the public, and that member of the public may also buy a new car from us. This makes

      • Long table name (sync from Zoho Creator)

        Dears, How can I remove the suffix in parentheses? These tables are synced from Zoho Creator and are treated as system tables, so their names cannot be changed. This issue makes the aggregation formulas look awful.

      • [Free Webinar] Learning Table Series - Streamlining incident management process with Zoho Creator

        Hello everyone, We’re excited to invite you to another edition of the Learning Table Series webinar. As you may already know, we've moved to a purpose-based approach in the Learning Table Series this year. Each session now focuses on how a Zoho Creator

      • Unattended - Silent

        How can I hide the tray icon / pop up window during unattended remote access for silent unattended remote access?

      • Text snippet

        There is a nice feature in Zoho Desk called Text Snippet. It allows you to insert a bit of text anywhere in a reply that you are typing. That would be nice to have that option in Zoho CRM as well when we compose an email. Moderation Update: We agree that

      • Marketing Tip #18: Make your online store mobile-friendly to improve traffic

        Most online shoppers browse on their phones first. If your store is hard to read, slow to load, or tricky to navigate on mobile, they’ll bounce fast. A mobile-friendly store doesn’t just look nice; it improves engagement, reduces drop-offs, and helps

      • [Need help] Form closed. Please contact your form administrator for further assistance.

        https://forms.zohopublic.com/cceinfoifly1/form/CCE2025CCEFocusGroupRegistrationForm2025Fall/formperma/s_8XcLETTbFxZ_TAS4r_W6W5UBl8o5oxEnIX35IBKg4 I checked we didn't exceed the usage limit and form availability is enabled, Please help us enable this form

      • Zoho People. Updating TabularData

        I am trying to update tabular data in the record. I always have the same response. I have checked many times. Section ID is correct. May be something wrong with request structure itself. Can someone help me. Body content type: form urlencoded query params

      • Automatically CC an address using Zoho CRM Email Templates

        Hi all - have searched but can't see a definitive answer. We have built multiple email templates in CRM. Every time we send this we want it to CC a particular address (the same address for every email sent) so that it populates the reply back into our

      • Unable to Send Different Email Templates for Different Documents in Zoho Sign

        Hello Zoho Community, I am facing a limitation with Zoho Sign regarding email notifications sent to customers when a document is sent for signing. Currently, whenever I send any template/document for signing, the email notification that goes to the customer

      • Reminder needs 0 minute choice

        I most use 0 minute reminders.  Every other calender service has this choice.  If I create an event in my Android calendar with 0 minute reminder it will change to 5 minute.  Please ad 0 as a reminder choice, this should be a 5 minute fix.  Thanks.

      • Customer ticket creation via Microsoft Teams

        Hi all, I'm looking to see if someone could point me in the right direction. I'd love to make it so my customers/ end users can make tickets, see responses and respond within microsoft teams. As Admin and an Agent i've installed the zoho assist app within

      • Is there a way to update all the start and end dates of tasks of a project after a calendar change?

        Hi! Here's my situation. I've built a complete project planning. All its tasks have start dates and due dates. After completing the planning, I've realized that the project calendar was not the right one. So I changed the project calendar. I now have

      • How to update task start date when project start date changes?

        Hi there, When the start date of a project changes, it's important to update the start dates of the tasks associated with that project to reflect the new timeline. Is there a way to shift the start date of all project tasks when the start date of a project

      • Issue with Picklist Dropdown Not Opening on Mobile

        Hello I am experiencing an issue with picklist values on mobile. While the arrow is visible, the dropdown to scroll through the available values often does not open. This issue occurs sporadically, it has worked occasionally, but it is very rare and quite

      • using the client script based on the look up filed i wnat to fetch the record details like service number , service rate

        based on selected service look up field iwant to fetch the service serial number in the serice form how i achive using client script also how i get the current date in the date field in the on load of the form

      • Zoho Commerce - How To Change Blog Published Date and Author

        Hi Commerce Team, I'm discussing a project with a client who wants to move from Woo Commerce / Wordpress to Zoho Commerce. They have around 620 blog posts which will need to be migrated. I am now aware of the blog import feature and I have run some tests.

      • Does zoho inventory need Enterprise or Premium subsrciption to make Widgets.

        We have Zoho One Enterprise and yet we can't create widgets on inventory.

      • ZMA shows as already connected to Zoho CRM, but integration not working

        When I try to connect ZMA with Zoho CRM, it shows as already connected, but the integration doesn’t seem to be working. I’ve attached the screen recording for reference.

      • Automatic Email Alerts for Errors in Zoho Creator Logs

        Hello, We would like to request a feature enhancement in Zoho Creator regarding error notifications. Currently, Zoho Creator allows users to view logs and errors for each application by navigating to Zoho Creator > Operations > Logs. However, there is

      • Password Assessment Reports for all users

        I'm the super admin and looking at the reporting available for Zoho Vault. I can see that there is a Password Assessment report available showing the passwords/weak and security score by user. However I'm confused at the 'report generated on' value. Monitor

      • Setting certian items to be pickup only

        How do we have some items that are pickup only? I have several items in my item's list that I do not ship. But they need to be on the website to be sold, and picked up in store. Need to be able to do this as one of these products is a major seller for

      • Using gift vouchers

        We would like to be able to offer a limited number of gift vouchers, of varying values, to our customers, and are looking for the best way to do this. We have looked at Coupons and Gift Certificates, but neither seem to fit the bill perfectly. Coupons:

      • Automatically updating field(s) of lookup module

        I have a lookup field, which also pulls through the Status field from the linked record. When the lookup is first done, the Status is pulled through - this works perfectly. If that Status is later updated, the lookup field does not update as well. As

      • Zoho Commerce and Third-party shipping (MachShip) API integration

        We are implementing a third-party shipping (MachShip) API integration for our Zoho Commerce store and have made significant progress. However, we need guidance on a specific technical challenge. Current Challenge: We need to get the customer input to

      • Adding custom "lookup" fields in Zoho Customization

        How can I add a second “lookup” field in Zoho? I’m trying to create another lookup that pulls from my Contacts, but the option doesn’t appear in the module customization sidebar. In many cases, a single work order involves multiple contacts. Ideally,

      • Can you import projects into Zoho Projects yet?

        I see some very old posts asking about importing project records into Zoho Projects. But I can't find anything up to date about the topic. Has this functionality been added? Importing tasks is helpful. But we do have a project where importing projects

      • Zoho Inventory. Preventing Negative Stock in Sales Orders – Best Practices?

        Dear Zoho Inventory Community, We’re a small business using Zoho Inventory with a team of sales managers. Unfortunately, some employees occasionally overlook stock levels during order processing, leading to negative inventory issues. Is there a way to

      • Next Page