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

      • Marketer's Space - Going beyond basics: Smarter ecommerce marketing with Zoho Campaigns

        Hello Marketers, Welcome back to this week's Marketer's Space. In the last post, we discussed the basics of email marketing and how to get started with email marketing in ecommerce. In this part, we'll dive much deeper into some other advanced features
      • Experience effortless record management in CRM For Everyone with the all-new Grid View!

        Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and
      • Connecting two modules - phone number

        Hi, I’d like some guidance on setting up an automation in Zoho CRM that links records between the Leads module and a custom module called Customer_Records whenever the phone numbers match. Here’s what I’m trying to achieve: When a new Lead is created
      • Zoho Marketing Automation 2.0 - Landing Page function not working

        Dear Zoho Team, I am working on implementing Zoho Marketing Automation 2.0, and am now looking into the section "Lead Generation". If I open the "Landing Pages" section, I immediately get an Error code: Error: internal error occurred. Can you help me
      • Auto select option in CRM after Zoho Form merge

        Hi, I have a dropdown field in Zoho CRM that is filled with a Zoho Form. The data is filled but not automatically shown. After selecting the right value in the dropdown the information a second field is shown. So the question is; how can I make the dropdown
      • Unable to use Sign "You have entereed some invalid characters"

        Unable to use Sign "You have entered some invalid characters" I do not see any invalid characters. The text in "Leave a Note" is plain text which I entered directly into the field. See attached screenshot
      • Default Sorting on Related Lists

        Is it possible to set the default sorting options on the related lists. For example on the Contact Details view I have related lists for activities, emails, products cases, notes etc... currently: Activities 'created date' newest first Emails - 'created
      • 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
      • Messages not displayed from personal LinkedIn profile

        Hello. I connected both our company profile and my personal profile to Zoho social. I do see all messages from our company page but none from my private page. not even the profile is being added on top to to switch between company or private profile,
      • "Performed changes in the query is not allowed due to following reason" when adding columns or reordering data

        I'm trying to make changes to a query but every time i try to save it i get this error message.  I'm not touching the data it's flagging.  All I've tried to do is reorder a couple of fields and add a new one.  Why won't it let me do this?  It's a core
      • Onboard new users easily with native screen recording in Zoho Projects Plus

        Communication involving both visual and audio elements tends to capture more interest among the audience. Whenever we onboard new employees to the organization, the task of engaging them in the induction sessions, and keeping the spark going in their
      • Zoho Expense and Chase Bank Visa credit cards - Direct Feed?

        Our company uses JP Morgan Chase Visa credit cards. We can't be the first to try and use a combination of Zoho Expense + Chase Bank + Visa Credit Cards --- anyone successful with this combination? 1. The direct feed automation isn't working. When I go
      • Request to Add Support for PDF Templates and More Flexibility in Email Editor

        Hi Zoho Campaigns Team, I hope you're doing well. I wanted to share some feedback and request a few improvements in the Email Template feature of Zoho Campaigns. Right now, we can create email templates using the HTML editor, which is helpful. But we’re
      • Can you stop Custom View Cadences from un-enrolling leads?

        I'm testing Cadences for lead nurture. I have set un-enroll properties to trigger on email bounce/unsubscribe, and do NOT have a view criteria un-enroll trigger. However, help documents say that emails are automatically un-enrolled from a Cadence when
      • Meet Canvas' Grid component: Your easiest way to build responsive record templates

        Visual design can be exciting—until you're knee-deep in the details. Whether it's aligning text boxes to prevent overlaps, fixing negative space, or simply making sure the right data stands out, just ironing out inconsistencies takes a lot of moving parts.
      • Zoho Desk Android and iOS app update: Agent detail overview

        Hello everyone! We’ve introduced agent detail overview on the Zoho Desk Android and iOS app update. With this feature, you can get a complete view of agent’s tickets, response times, logged hours (for both tickets and activities), customer happiness ratings
      • Blog Widget: Show recent blog posts on my homepage

        Hey there I am using the Zoho Sites Blog feature. On my homepage, on the bottom I'd like to have a featured content section where I show some of my blog posts (selected, most recent, filtered by category and so on...). It would be nice to have a blog
      • YouTube Live #2: Agreement Intelligence with Zoho Sign's eSign AI assistant

        Hi there, We're back again with our YouTube live series and this time, we'll take you through our holistic agreement intelligence powered signature workflows. Struggling to draft an agreement? Need help double-checking clauses and going through complicated
      • How to iterate through excel data using zoho rpa

        I wanted to iterate or loop through excel data ( datatable). How can i do that
      • Update on the client portal URL for Guest users

        We’re updating the way Guest users access their Connect network. As part of this change, all client organization portals used by Guest users will now be accessible through a dedicated domain specific to each data center. The access URLs mentioned here
      • Zoho Commerce

        Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if not
      • Mass (Pull back) (Close WOs) (Close APs)

        Hi develop team. Just idea because Zoho FSM is great but its too manual. we have a lot of task to do every day and the system needs to have more features to automatic our tasks. I need to close several WOs, APs and Pull Back per day. Please we need mass
      • 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
      • Customising Zohidesk portal default widgets

        Hello, I'm wondering how could I customise the default widgets such as "popular topics", "popular articles" using CSS or to make the tiles at the bottom match the ones that I made in the picture attached. I have made some custom widgets and edited them
      • Microsoft Teams now available as an online meeting provider

        Hello everyone, We're pleased to announce that Zoho CRM now supports Microsoft Teams as an online meeting provider—alongside the other providers already available. Admins can enable Microsoft Teams directly from the Preferences tab under the Meetings
      • Add Custom Reports To Dashboard or Home Tab

        Hi there, I think it would be great to be able to add our custom reports to the Home Tab or Dashboards. Thanks! Chad
      • If there’s a batch at the end, the ‘mark as inactive’ function doesn’t work.

        when my batch has a date to batch end and I "mark as inactive" he batch does not obey the status and reactivates the batch.
      • Seamless multilingual messaging and tone control in Zia IM Composer

        Hello everyone! Managing customer conversations across multiple languages can be time-consuming. Using Zia in the Instant Messaging (IM) Composer helps you overcome this by providing tools to translate content, adjust your tone, and refine your messages
      • Customer happiness customisation

        Hi, I was wondering if it's possible to somehow customise to whom and when customer happiness request is sent? Can you enable it only for selected tickets for example based on workflow or any other criteria (customer name, tag or anything else)? Also
      • Workflow Failure - Notifications

        Good afternoon, I have just experienced an error whereby a Workflow failed, for a reason currently unknown. The problem is that one of my users had to flag this manually (thankfully he's very thorough) and this otherwise would have flown under the radar.
      • Advanced Deluge help needed with custom function and COQL limits

        I have a scheduled function that takes a snapshot of specific metrics and saves them to a custom module. However I'm struggling with the limits of COQL. I attach my full code, but an example of the issues I'm having is that it's erroring with a 'Limit
      • Tip of the Week - Conditional Formatting Chart

        Conditional formatting allows you to highlight your data series based on a pattern or a trend in your data. This makes it easy for you to identify when your data reaches certain values or when it deviates from the trend.  Zoho Analytics allows you to
      • Zoho Learn - AI Translate

        Hi Learn team, I had a situation today where I was providing training to a client team and I had written articles into their Zoho Learn to support their learning. I realised that one of the team members was a non-native English speaker and they were struggling
      • Payroll In Canada

        Hi, When can we expect to have payroll in Canada with books 
      • Power of Automation :: Auto-Sync Custom Date Field Between Related Tasks via Blueprint Transition

        Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate
      • Introducing auto-upgrade in Zoho LandingPage

        Hi everyone, We’re excited to share an upcoming update to help you get the most out of your landing pages — the auto-upgrade option, launching on October 22, 2025. Your landing pages are designed to bring in leads, and we want to make sure you never miss
      • Workdrive comment links stopped working.

        I have marked a PDF file with 95 comments, they have worked for a while. When i clicked on them they brought me to the correct page and showed me the outline that i had drew on the plans. The comments included the page number of the outline, but now it
      • In arattai received message can't be deleted

        The issue has been noticed in following: arattai app (Android) arattai app (Window) arattai web While the message posted by me may be deleted, the ones received from others can't be. The item <Delete> change to <Report> when the message is a received
      • How to Bulk-Update Sales Orders in CRM

        Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to
      • Zoho ToDo in Cliq

        Our organization utilizes Zoho ToDo in the Zoho Mail Desktop app. Is there a way for these to show up in Cliq Desktop app as well?
      • Next Page