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

        • Compensation | Salary Packages - Hourly Wage Needed

          The US Bureau of Labor Statistics says 55.7% of all workers in the US are paid by the hour. I don't know how that compares to the rest of the world, but I would think that this alone would justify the need for having an hourly-based salary package option.

        • Customizing Helpcenter texts

          I’m customizing the Zoho Desk Help Center and I’d like to change the wording of the standard widgets – for example, the text in the “Submit Ticket” banner that appears in the footer, or other built-in widget labels and messages. So far, I haven’t found

        • Ability to Edit Ticket Subject when Splitting a Ticket

          Often someone will make an additional or new request within an existing ticket that requires we split the ticket. The annoying part is that the new ticket maintains the subject of the original ticket after the split so when the new ticket email notification

        • Automatically Update Form Attachment Service with Newly added Fields

          Hi, When I have a Form Setup and connected to a 3rd Party Service such as OneDrive for Form Attachments, when I later add a new Upload Field I have to remove and redo the entire 3rd Party Setup from scratch. This needs to be improved, such as when new

        • Unable to produce monthly P&L reports for previous years

          My company just migrated to Books this year. We have 5+ years financial data and need to generate a monthly P&L for 2019 and a monthly P&L YTD for 2020. The latter is easy, but I'm VERY surprised to learn that default reports in Zoho Books cannot create

        • Reopen ticket on specific date/time

          Is there a way that we can close a ticket and setup a reopen of that ticket on a specific date and time? (without using the "on hold" ticket option)

        • API credit COQL COUNT

          The docs describe API credits in COQL from the LIMIT perspective: https://www.zoho.com/crm/developer/docs/api/v8/COQL-Overview.html When using aggregate functions such as `COUNT` or `SUM`, is that billed as 1 API credit?

        • Anyone Building AI-Based SEO Dashboards in Zoho Analytics?

          Hey everyone, I’m currently working on an SEO reporting dashboard in Zoho Analytics and looking to enhance it with AI-based insights—especially around AI visibility, keyword trends, and traffic sources. The goal is to track not just traditional metrics

        • Remove 'This is an automated mail from Zoho Sign' in footer

          Hi there, Is it possible to remove or change the text under the e-mail templates? I can't figure out how to do that: Would love to hear from you. Kind regards, Tristan

        • Passing Info from Function to Client Script

          Hello, I have recently started making use of client script for buttons, allowing me to give the user information or warnings before they proceed. This is great. However, I have never quite managed to pass back any extra information from the function to

        • Drag 'n' Drop Fields to a Sub-Form and "Move Field To" Option

          Hi, I would like to be able to move fields from the Main Page to a Sub-Form or from a Sub-Form to either the Main Page or another Sub-Form. Today if you change the design you have to delete and recreate every field, not just move them. Would be nice to

        • Zoho Payroll for Canada

          Is anyone else having problems getting setup for Canada?

        • Passing the CRM

          Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine when

        • One Contact with Multiple Accounts with Portal enabled

          I have a contact that manages different accounts, so he needs to see the invoices of all the companies he manage in Portal but I found it not possible.. any idea? I tried to set different customers with the same email contact with the portal enabled and

        • User Automation: User based workflow rules & webhooks

          User management is an undeniable part of project management and requires adequate monitoring. As teams grow and projects multiply, manual coordination for updating users & permissions becomes difficult and can give way to errors. User automation in Zoho

        • Default Ticket View - Table?

          Guys, We mostly use the table view to queue tickets. Maybe I am missing it - but how can I set that view as 'default" for all our agents? Thanks JV

        • Zoho One IS BUGGY

          Here are some things that just don't work: - Disabling applications from certain Spaces - Adding users (probably only for me) - Renaming applications in Zoho One Portal (fixed by now) - Reordering applications in Spaces When I try to reorder: It feels

        • Merge Fields that previously worked are now giving an Error!

          Saving a URL Link button on the Deal module. The below fields used to save without issue at all, but now produce an error of "URL contains unsupported merge field!" ${Contacts.Mailing Street} ${Contacts.Mailing City} ${Contacts.Mailing State} ${Contacts.Mailing

        • Clarification on Zoho Forms 1-User Plan: Multiple Submitters and Approvers

          Question Content (Copy–Paste Ready) Hello Zoho Team, I would like clarification regarding Zoho Forms pricing and user limits. I am planning to subscribe to the ₹700/month (1 user) plan. My use case is as follows: Only 1 person (myself) will create and

        • App for Mac OS X please!

          It would be awesome to have a mail app for Mac OS X that included all the cool features such as steams, calendar, tasks, contacts, etc. Most people prefer native apps, rather than running it through a web browser. I know that we can use the IMAP, CalDAV,

        • Facing Issues with Sites Mobile font sizes

          my page renediaz.com is facing issues mobile view, when i try to lower font sizes in home page, instead of changing the size, it changes the line space

        • Zoho Books Payroll

          How am I supposed to do payroll and pay my employees with Zoho Books? I think it's pretty strange that an accounting software doesn't have the ability to perform one of the most common functions in business; paying your employees. Am I missing something,

        • Canvas templates can now be shared with different CRM organizations

          ----------------------------------------Moderated on 14th February, 2023------------------------------------------- Dear all, This feature is now open for all users in all DCs. To learn more about importing and exporting canvas templates, read our help

        • Change Last Name to not required in Leads

          I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

        • ZOHO Books Query

          Good day, Can someone please advise. I recently migrated from ZOHO Invoice to ZOHO Books. No that I want to use the inventory on Books I cant as all my items have transaction history. The person I spoke to at ZOHO said I need to create a new Company profile

        • creating an alias

          your instructions for creating an alias are wrong. there is no add alias in my mail account. also i dont have a control panel link just a settings link how do i really make an alias

        • Reply to Email for SO/PO

          Hello, We are new to Zoho Books and running into an issue. Our support@ email is our integration user. When our team is sending out PO/SO's we are updating the sender email, but for some reason many of our responses are coming back to our support@ email

        • ZOHO Payroll Canada

          Any plans on the roadmap for Canada?

        • Zoho Books Sandbox environment

          Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a

        • Multi-currency and Products

          One of the main reasons I have gone down the Zoho route is because I need multi-currency support. However, I find that products can only be priced in the home currency, We sell to the US and UK. However, we maintain different price lists for each. There

        • ZOHO Writer Folders

          Hi We would love to have ability to create folders on the left hand side. We would then be able create and store our documents within each folder Hope you can provide this feature soon ! dux.centra

        • How can Data Enrichment be automatically triggered when a new Lead is created in Zoho CRM?

          Hi, I have a pipeline where a Lead is created automatically through the Zoho API and I've been trying to look for a way to automatically apply Data Enrichment on this created lead. 1) I did not find any way to do this through the Zoho API; it seems like

        • Escalation request: organization merge and data export (Ticket [154609577])

          Hello Zoho Team, I am posting here because my support ticket has not received substantive responses through the usual channels. Summary of the issue (ongoing for three weeks): I requested assistance with a data migration and a merge of two Zoho organizations.

        • Different form submission results for submitter and internal users

          I'm looking for suggestions on how to show an external submitter a few results while sending internal users all the results from the answers provided by the external user. The final page of our form has a section with detailed results and a section with

        • Formatting and slow

          Creating campaigns are difficult.  I'm fairly computer literate but some of the way Zoho Campaigns formatting works is painful.  Images fail to upload or are very slow. To top it off, syncing the contacts is a pain as well as temperamental links to create Segments. At this rate I'm afraid we might need to migrate back to Mailchimp.

        • Boost your Zoho Desk's performance by archiving tickets!

          The longer your help desk operations are, the more likely it is to accumulate tickets that are no longer relevant. For example, ticket records from a year ago are typically less relevant than currently open tickets. Such old tickets may eventually lead

        • Paste emails to create segment

          We are moving over from Mailchimp to ZOHO. However Mailchimp allows me to create a segment by pasting in emails from excel (or importing a .csv) can I do the same in Mailchimp?

        • Getting the Record ID of a form once it is submitted - so that form can be edited later

          In Zoho Forms, where can I access the record ID of a form once the form is submitted? - Record ID is not available in webhook payloads - It is not available to form fields, including in formulas - It is not available as a parameter in a thankyou page

        • Auto-Generate Line Numbers in Item Table Using HTML & CSS Counters (Zoho Books & Zoho Inventory Custom Templates)

          <div> <style> /* Start counter from 0 inside tbody */ tbody#lineitem { counter-reset: rowNumber; } /* Increment counter for each row */ tbody#lineitem tr { counter-increment: rowNumber; } /* Show counter value in first column */ tbody#lineitem tr td:first-child::before

        • Possible to define default font and size in Zoho Campaigns?

          Is it possible to define a default font (font, size and colour) for the text, H1 and H2 in Zoho Campaigns? For example: In a campaign, I add a text block, and the text is automatically century gothic, size 11, grey (6f6f6e) by default? Thank you!

        • Next Page