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:


    Nederlandse Hulpbronnen


      • Recent Topics

      • Zoho Sprints iOS app update: Global view, screen capture control, file encryption, tags enhancement

        Hello everyone! We are excited to introduce new features in the latest version(v2.1) of the Zoho Sprints iOS app update. Let’s take a quick look at what’s new. 1. Global view Global view brings all your project items into one centralised space. You can
      • Marking a meeting 'done'.

        I would like to somehow mark a meeting 'done' and placed under the contact's page rather than deleting it and having no record of it. Am I missing a button that does this?
      • Zoho Projects Android and iOS app update: Conditional layout rules for Tasks

        Hello everyone! Task conditional layout rules configured on the web app(projects.zoho.com) are now applied on the Zoho Projects Android and iOS app. Conditional layout rules can be set for the Add/ edit task form and it allows you to change the property
      • How to account for vat with postponed VAT accounting

        Hi everyone, looking for some help with postponed VAT accounting, I use DHL express for my imports and they used to pay the VAT for me and then invoice me. I could then log this as a bill and the VAT element from import was recorded as input VAT, all
      • Introducing Formula Fields for performing dynamic calculations

        Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This
      • How can I link Products in a Deal Subform to the Products Module

        Hello, I have a pricing subform on our Deals page and use a lookup field to associate a product with each line. I want to be able to look at a product page within the Products module and see a list of the deals connected to that product. I have this working
      • Zobot with Plugs

        Hello, I am having a problem with Zobot using Plugs. Here is my current flow: When I run the flow, I should immediately see the messages from the initial cards (Send Message cards), then after running the plug, and finally, see the messages after the
      • Use URL field to populate Image in a Email Template

        We have two records Record 1: Appointments (with a Lookup to Doctors module) Related Record 2: Doctors (with a URL field that is an image of the doctor) We would like to populate a CRM email template with the image of the URL field for the related doctor
      • Delete button

        Hi, The delete button were hide into the three dot button. Can I display outside? why Zoho make this update?
      • Is there a way to show contact emails in the Account?

        I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail
      • Invalid scope choice: Workdrive integration in CRM

        Bug: There is an invalid option in the permission choices for Workdrive integration in CRM. If the entry "WorkDrive.teamfolder.CREATE" is selected, it will return a message indicating invalid OAuth scope scope does not exist.
      • Dark Mode - Font Colors Don't Work

        When editing a document in Dark Mode and selecting font colors, they don't show up on screen.  Viewing/editing the same document in Light Mode shows them just fine.
      • Good news! Calendar in Zoho CRM gets a face lift

        Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities
      • Zoho mail admin panel not opening

      • Can Zoho Marketing Automation send OTP codes via WhatsApp during user registration?

        The flow I would like to implement is: A user signs up in the mobile app and enters their phone number. The system generates a one-time verification code (OTP). The OTP is sent to the user via WhatsApp message. The user enters the code in the app to confirm
      • Zoho CRM WooCommerce Integrtation

        Looking for a solution for my 50 client to show detailed analytics on source of traffic that led to events, leads, conversions. Hi all, I have not been able to find a workable guide or solution to how exactly step by step integrate the Zoho CRM with WooCommerce
      • Attaching files to emails within CRM Deals.

        Hello, We have recently started using the extension "Workdrive for CRM" (Related List) to view/store our documents for each Deal, instead of using Attachments. Overall it feels like a better way to go but the user experience is not so great when it comes
      • Service line items

        Hello Latha, Could you please let me know the maximum number of service line items that can be added to a single work order? Thanks, Chethiya.
      • 500 internal server error on opening an iframe through a deluge script

        Hi Team I am trying to open an external url in an iframe through my deluge script which is associated to a custom button . By doing this i am getting an "Internal Server Error" . Please can you help me with this.
      • Kaizen #225 - Making Query-based Custom Related Lists Actionable with Lookups and Links

        Hello everyone! Welcome back to another post in the Kaizen series! This week, we will discuss an exciting enhancement in Queries in Zoho CRM. In Kaizen #190, we discussed how Queries bridge gaps where native related lists fall short and power custom related
      • Help Center and SEO: Any Benefit to My Domain-Mapped Website Ranking?

        First of, I love the Help Center which I've just decided to integrate into my website to replace its old-fashioned FAQs. So much more to achieve there now! Lots of new benefits to the site visitors and to me in terms of organizing and delivering all the
      • No Need To Fix Something That Is Working

        Zoho Books is a great financial tool which helps businesses to become more efficient and productive with day-to-day operations. As such, every change, upgrade, improvement needs to be carefully thought before implemented in the software and I'm sure Zoho
      • Filter button in the Zoho Sheet Android App doesn't toggle on

        I am a new Zoho Sheets user and experiencing a specific issue with the filter functionality in the Android mobile application. Detailed Issue Description: The filter icon appears correctly in the toolbar. Upon tapping the filter icon/button, the toggle
      • Is Zoho Sites still actively being developed?

        Hello, Is Zoho Sites still actively being developed as part of the Zoho ecosystem? I noticed that the What's New page (https://www.zoho.com/sites/whats-new.html) does not show any updates since Q1 2025. We were considering migrating our website from Squarespace
      • Project Notifcatiion Emails - Milestone

        Hello: I cannot get myself, or most importantly my portal client user to recieve an email upon completion of a milestone. I have set up our 1st project. I have set up a test client user. (accepted the invitation and is listed in the system as a client
      • Zoho Forms - Feature Request - Year Field

        Hi Zoho Forms Team, You currently have the following date and time fields: Date Time Date and Time Year and Month It would be useful if you could include a "Year" field For example a recent application I completed said "What year was your house built?"
      • Integrate Excel or Zoho Sheet functions / calculations to CRM product module

        Hello Community, I hope someone more experienced can help me with this question. Our price / payment plan calculations are in an Excel spreadsheet and I would like to use all those functions / calculations in my Products module. So when we send a quote
      • Sync CRM Contacts to USER'S contacts on Office 365

        I can see that the O365 sync is transferring contacts backwards and forwards between Zoho CRM and Office365. But it has created a separate address book in Office 365 called "Zoho CRM Contacts". This address book is not used by Office/Outlook's email function
      • Manage Every Customer Conversation from Every Channel inside Zoho SalesIQ

        Your customers message you from everywhere. But are you really able to track, manage, and follow through on every conversation, without missing anything? With interactions coming in from websites, mobile apps, and messaging platforms like WhatsApp and
      • Zoho Books | Product updates | February 2026

        Hello users, We’ve rolled out new features and enhancements in Zoho Books. From Advanced Reporting Tags to the ability to mark projects as completed, explore the latest updates designed to improve your bookkeeping experience. Introducing Advanced Reporting
      • Update latitude & longitude address field API

        How do I update the coordinates of an address field from a widget? I can't modify the latitude and longitude of the address field. I think the problem is how I'm writing formdata variable. zoho_init.then(function (data) { var queryParams = ZOHO.CREATOR.UTIL.getQueryParams();
      • Zoho Forms - Feature Request - Past Into Scanning/OCR Field

        Hi Zoho Forms Team, You recently introduced the OCR/Scanning field which I have found great use for with one client who receives work orders as a screenshot from one customer. I want to raise a feature request here which would make that field even more
      • inability to use different primary address on invoice per location

        my company operates in two different locations with different email address. The problems then is the inability to edit the primary to suite the invoice for the second location.
      • Use Zoho Creator as a source for merge templates in Zoho Writer

        Hello all! We're excited to share that we've enhanced Zoho Creator's integration with Zoho Writer to make this combination even more powerful. You can now use Zoho Creator as a data source for mail merge templates in Zoho Writer. Making more data from
      • Anyone in Australia using Zoho Books AND has their account with NAB?

        Hi I have an account with both NAB and Suncorp. Suncorp transaction come in the next day however NAB transactions take 4-5 business days to appear. eg: A deposit made today in my Suncorp will be imported into Zoho tomorrow. A deposit made today to the NAB account will be imported maybe Saturday (Friday overnight). I have contacted both Zoho and NAB but noone seems to know why. I was just wondering if anyone else in Australia uses NAB and has this issue (or doesn't) maybe we could compare notes and
      • Detailed Balance Sheet for tax preparer

        I'm using the free edition of Zoho Books. My tax preparer is asking for "detailed" Profit & Loss and Balance Sheet reports which include all the activity and transactions within the various categories. The default reports do not include these details.
      • On Edit Validation Blueprint

        Hello, I have a notes field and a signature field. When the Approve button is clicked, the Signature field will appear and must be filled in. When the Reject button is clicked, the Notes field will appear and must be filled in. Question: Blueprint will
      • Zoho Projects - Cloning a task does not trigger task workflow when created

        Hello! I have a Project where my team uses a set of tasks from a tasklist as templates, so we could simply clone it and drag it to another list in kanban view to avoid creating a new one from scratch. The process works well, but after cloning it the new
      • Host Group Appointments Online in Zoho Bookings

        Greetings from the Zoho Bookings team! We’re excited to announce a new enhancement to Group Booking that makes hosting online group events smoother and more professional than ever. You can now conduct online group events with auto-generated meeting links
      • Can't rename groups on Mac desktop app

        I'm working on an up-to-date Mac with a freshly downloaded Notebook app. I'm trying to rename a group within a notebook. Here I have, left to right, a note, a group, and a note. I select the group. On the top left, I select Action. On the dropdown, "Rename"
      • Next Page