Title: Custom user interfaces with Widgets | Community | Zoho Projects

Title: Custom user interfaces with Widgets | Community | Zoho Projects

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

      • Function 56: Automatically enable the option for customers to pay via bank account

        Hello everyone and welcome back to our series! One of the key features of Zoho Books is its integration with multiple payment gateways, allowing you to receive online payments for your invoices. This ensures faster payments, automates payment tracking
      • Attach Files to Your Notecards and share them on the go!

        Hey everyone! We’re excited to share a feature many of you have been asking for — you can now attach files directly to your text notecards and share with ease! 🙌 This update was built with your feedback in mind, especially for those who wanted a simple
      • Can i connect 2 instagram accounts to 1 brand?

        Can i connect 2 instagram accounts to 1 brand? Or Do i need to create 2 brands for that? also under what subscription package will this apply?
      • Workdrive on Android - Gallery Photo Backups

        Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. Emma
      • Integración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)

        Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? Gracias
      • YouTube Live #1: AI-powered agreement management with Zia and Zoho Sign

        Hi there! We're excited to announce Zoho Sign’s first YouTube live series, where you can catch the latest updates and interact with our Zoho Sign experts, pose questions, and discover lesser-known features. We're starting off by riding the AI wave in
      • How to add a % Growth column for year-over-year comparison (2024 vs 2025)

        Hello, I am trying to build a monthly revenue comparison between 2024 and 2025 in Zoho CRM Analytics. My current setup is: Module: Deals (Affaires) Filter: Stage = Closed Won Date field: Closing Date Grouping: By Month Metrics: Sum of Amount for 2024,
      • How to searchByCriteria records that are under approval?

        I need to search for both approved and pending approval records Is that possible with this method? Or I need to a different method? var priceReqID = $Page.record_id; log(priceReqID); var records = ZDK.Apps.CRM.Price_List_Item.searchByCriteria("Price_Request:equals:"
      • Power of Automation::Streamline log hours to work hours upon task completion.

        Hello Everyone, A Custom Function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as to when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-
      • How to add Simple Analytics to Zoho Pages?

        I have a website with Zoho Pages, how do I add Simple Analytics on it? They seem to have code they need to be embedded https://docs.simpleanalytics.com/script
      • End Date in Zoho Bookings

        When I give my appointments a 30 minutes time I would expect the software not to even show the End Time.  But it actually makes the user pick an End Time.  Did I just miss a setting?  
      • Cant seem to delete an email account

        Hello, I have researching for 4 days how to delete an email account and I am absolutely without a clue. The email account I am trying to delete is support<AT>fyshoes<dot>com. It's the first email account I made and it (is???) was associated with the super user (me). I have since changed it to adming<AT>fychoes<dot>com and I see the support email in my list but I just cant seem to get rid of it. Ultimately I want to associate that email account with another user that I want to add. This is really
      • Commerce Order as Invoice instead of Sales Order?

        I need a purchase made on my Commerce Site to result in an Invoice for services instead of a Sales Order that will be pushed to Books. My customers don't pay until I after I add some details to their transaction. Can I change the settings to make this
      • Import data into Multi-Select lookup field from CSV/Excel

        How to import data into a multi-select lookup field from the CSV/Excel Sheet? Let's say I have an Accounts multi-select lookup field in the Deals module and I want to import the Deals with Accounts field. Steps:- 1. Create/edit a multi-select lookup field
      • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

        Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:
      • Script that deletes a record?

        We're using WP Plugin "Integration for WooCommerce and Zoho Pro", and have created a couple of Feeds to send data to Zoho. We are trying to create Contact records, but only based upon condition. Tried to make it with small Deluge function and Workflow,
      • A formula that capitalises the first letter of each word

        Hi all, is there a zoho formula that can capitalise the first letter of each word in a string? INITCAP only capitalises the first letter of the first word.
      • Reverse payment on accidentally closed invoice.

        An invoice was closed accidentally with the full payment added. However, only partial payment was paid. How can I reopen the invoice and reverse this to update it to show partial payment?
      • Quotes in Commerce?

        In Zoho Ecommerce, I need to be able to generate quotes, negotiate with customers, and then generate invoices. Currently, I plan to integrate Zoho CRM to generate quotes. After negotiation and confirmation, I will push the details to Zoho Ecommerce to
      • Zoho Commerce - Mobile Application

        Does Zoho Commerce have a mobile application for customers to place an order?
      • Adding Markdown text using Zoho Desk API into the Knowledge Base

        Hi Zoho Community members, We currently maintain the documentation of out company in its website. This documentation is written in markdown text format and we would like to add it in Zoho Knowledge Base. Do you know if there is REST API functionality
      • Register user through Phone Number by Generating OTP

        In zoho commerce , I am developing website on online food store Inilialy the user get verification code to their email for registering there account for login. But I need to login using phone number by generating OTP automatically rather than verification
      • Custom Buttons for Mass Actions

        Hello everyone, We’ve just made Custom Buttons in Zoho Recruit even more powerful! You can now create Bulk Action Buttons that let you perform actions on multiple records at once, directly from the List View. What’s new? Until now, custom buttons were
      • Zoho Vault Passwords

        Is there a way to consume Zoho Vault Manager passwords using the API? Thanks in advance.
      • Is the ChatGPT Assistant integration capable of recognizing WhatsApp voice messages?

        I was wondering: if a visitor sends me a voice message on WhatsApp, would the assistant be able to transcribe it and reply to them?
      • Zoho Creator to Zoho CRM Images

        Right now, I am trying to setup a Notes form within Zoho Creator. This Notes will note the Note section under Accounts > Selected Account. Right now, I use Zoho Flow to push the notes and it works just fine, with text only. Images do not get sent (there
      • 【Zoho CRM】レポート機能のアップデート

        ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、レポート機能のアップデートをご紹介します。 目次 1. レポートのエクスポート時のレコードIDの表示について 2. 通貨項目の表示について 3. レポートの削除の監査ログへの反映について 1. レポートのエクスポート時のレコードIDの表示について これまで、レポートをエクスポートするとファイルにレコードIDが必ず含まれていました。レコードIDが識別子として役立つ場合もありますが、実際には多くの企業で参照されることはありません。
      • Translation in zoho bookings

        We cant translate zoho booking emails. The general text we can change. But what about text like: ""Here a link to join the meeting online:"" and "Add to Zoho Calendar" and "Add to Google Calendar"? No professional business have mixed languages. Its looking
      • Help Center IFrame Issue

        I have had a working Help Center on my website using an iframe for a while. But now for some reason the sign in page gets a refused to connect error. Can someone please help. If I go to the url manually it works correclty
      • Is there any way to bill one client in different currencies on different invoices?

        I have some customers who have their currency set as USD and most of their billing is done in USD.   However, from time to time I have a need to bill them in my base currency GBP for some specific invoices, but there seems to be no way of doing this that I can see. The only workaround that I can see is to create two client records for the same client, one for USD billing and one for GBP billing, but this is not an ideal situation. Is it likely that the (hopefully!) soon to arrive multi-currency support
      • API name for all fields in Zoho Project (Standard or custom)

        Hi! I struggle to find easily all API name of all field in Zoho Project to build my API rest with other services. We can find them very fast in CRM but not in PRoject.   Could you share a function to get the list of all API Name of any field of an App
      • Elevate your CX delivery using CommandCenter 2.0: Simplified builder; seamless orchestration

        Most businesses want to create memorable customer experiences—but they often find it hard to keep them smooth, especially as they grow. To achieve a state of flow across their processes, teams often stitch together a series of automations using Workflow
      • Zoho Assist not rendering NinjaTrader chart properly

        Hi everyone. Just installed and testing Zoho Assist. I want to display my laptop' screen (Windows 11) on a monitor connected to my Mac mini. The laptop is running a stock trading program called NinjaTrader. Basically, when running, this program displays
      • Involved account types are not applicable when create journals

        { "journal_date": "2016-01-31", "reference_number": "20160131", "notes": "SimplePay Payroll", "line_items": [{ "account_id": "538624000000035003", "description": "Net Pay", "amount": 26690.09, "debit_or_credit": "credit" }, { "account_id": "538624000000000403", "description": "Gross", "amount": 32000, "debit_or_credit": "debit" }, { "account_id": "538624000000000427", "description": "CPP", "amount": 1295.64, "debit_or_credit": "debit" }, { "account_id": "538624000000000376", "description":
      • Adding Social Media Buttons to Basic Campaigns

        Hi, I'm quote new to using Zoho Campaigns and I can't work out how to add Social Media Buttons into my basic campaign? In MailChimp there's a button that brings the icons into your campaign for you. I've tried adding the social media icons as 'buttons' in Zoho but it's not looking great. Can anyone help? Thanks!
      • Dropshipping Address - Does Not Show on Invoice Correctly

        When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company being
      • Best way to schedule bill payments to vendors

        I've integrated Forte so that I can convert POs to bills and make payments to my vendors all through Books. Is there a way to schedule the bill payments as some of my vendors are net 30, net 60 and even net 90 days. If I can't get this to work, I'll have
      • Link(s) between Notes

        Hello Everyone, It would be great if links could be created between notes. Let's say we have 5 Notes A, B, C , D, E. I would like to be able to link Note A to Note B but not in other way, so no link appears in Note B linking to Note A. An so on, linking
      • Regex in Zoho Mail custom filters is not supported - but it works!

        I recently asked Zoho for help using regex in Zoho Mail custom filters and was told it was NOT supported. This was surprising (and frustrating) as regex in Zoho Mail certainly works, although it does have some quirks* To encourage others, here are 3 regex
      • Feature Request: Assign Documents to Already Entered Bills, Expenses, Invoices, etc.

        Hi Zoho Team, We are regular users of the Documents module in Zoho Books and appreciate its ability to keep financial records well-organized. However, we’ve noticed a limitation: There is no way to attach a document from the "Documents > Files" section
      • Next Page