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.


                            Zoho Desk Resources

                            • Desk Community Learning Series

                            • Digest

                            • Functions

                            • Meetups

                            • Kbase

                            • Resources

                            • Glossary

                            • Desk Marketplace

                            • MVP Corner

                            • Word of the Day

                                Zoho Marketing Automation
                                        • Sticky Posts

                                        • Building extensions #7: Create custom widgets for a simplified end-user experience

                                          Discover the benefits of using widgets! We explored the significance of widgets, prerequisites, and the availability of JS SDK methods as part of our previous post. In this post, let's go over a detailed example of using widgets along with certain Zoho
                                        • 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
                                        • Building extensions #5: Integrating applications with Zoho Projects through Connections

                                          In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
                                        • Building extensions #4: Fundamental features of a Zoho Projects extension

                                          Hello everyone! Thank you for visiting our Building Extensions series. As part of this series, we've already covered how to use the Sigma cloud editor and the ZET CLI to create, test, and publish extensions for Zoho Projects. You can refer to our earlier
                                        • Announcing the Zoho Projects API

                                          Today we're excited to announce the API for Zoho Projects where any developer can extend the project management and collaboration capabilities through our APIs and can build their own customized applications for their business needs. We've tried to make the API follow the REST (Representational State Transfer) principles and generate a XML/ JSON object which allows you to access / read / write Zoho Projects data from third-party systems like Google/Yahoo gadgets, web sites, billing & invoicing systems,

                                        Manage your brands on social media

                                                Zoho TeamInbox Resources

                                                  Zoho DataPrep Resources

                                                    Zoho CRM Plus Resources

                                                      Zoho Books Resources

                                                        Zoho Subscriptions Resources

                                                          Zoho Projects Resources

                                                            Zoho Sprints Resources

                                                              Qntrl Resources

                                                                Zoho Creator Resources

                                                                  Zoho WorkDrive Resources

                                                                    Zoho Campaigns Resources

                                                                      Zoho CRM Resources

                                                                      • CRM Community Learning Series

                                                                        CRM Community Learning Series

                                                                      • Tips


                                                                      • Functions


                                                                      • Meetups


                                                                      • Kbase


                                                                      • Resources


                                                                      • Digest


                                                                      • CRM Marketplace

                                                                        CRM Marketplace

                                                                      • MVP Corner

                                                                        MVP Corner



                                                                          Design. Discuss. Deliver.

                                                                          Create visually engaging stories with Zoho Show.

                                                                          Get Started Now