Creating, testing, and editing Zoho Projects extensions - cloud editor|Community|Zoho Projects

Creating, testing, and editing Zoho Projects extensions - cloud editor|Community|Zoho Projects

Hello!! We're happy to announce the beginning of a new series called "Building Extensions," which aims to help guide developers in creating and developing extensions for Zoho Projects. The goal of this series is to assist developers with the extension creation process, as well as to explore the features and functionalities that are available in the developer platform to build extensions for Zoho Projects.

Extensions are essentially plugins or add-ons that extend a Zoho product's existing functionality by either enhancing itsexisting features or integrating with other applications and performing third-party actions from within the Zoho product itself. Zoho offers a developer platform named Sigma, which is intended exclusively for building extensions for various Zoho products.

In our first post of this new series, we'll look at how to create, test, and edit a Zoho Projects extension. Let's take a look at each of these topics individually.

Creating an extension using the Sigma cloud editor
  • Go to Sigma and access your workspace.
  • Once you enter your workspace in Sigma, you will be taken to the Extensions section in Sigma.
  • You may either build a new extension entirely from scratch, or use one of Sigma's current templates to begin your extension development process.
  • To begin creating an extension using a template, simply select the Extensions Gallery option in your workspace.

  • Choose an extension from the options available in Zoho Projects to begin creating one with a template. When you select an extension, you will be taken to the Sigma cloud editor, where you will find a template for that extension.
  • Alternatively, you can also start building an extension entirely on your own. To do this, click the New Extension button to start creating and building an extension.
  • Enter a Name and Description for the extension. Choose the service as Zoho Projects.

  • There are two ways you can create an extension for Zoho Projects:
➤ Using the cloud editor
➤ Using the command line interface (CLI)
  • Toggle Upload Existing File to YES to build your extension using CLI, and NO to develop it using the cloud editor.
  • In this post, we'll look at how to create an extension with the cloud editor. So toggle to NO, accept the terms and conditions, then click Create.
Note: We'll be exploring building extensions using CLI in our next post.

  • You'll be redirected to the cloud editor for the extension you've created, where an app folder and a plugin-manifest.json file will be available by default.
  • The app folder will have a defined directory structure populated automatically for the sample Zoho Projects extension. This app folder can be used to manage all of the important resources that are required for your extension.
  • The plugin-manifest.json will help with the configuration of your extension. It contains a set of keys and values that determine your extension's settings.
Note: We'll go over most of these keys in detail when we get into the related feature and functionality in upcoming posts.

  • When you examine the default plugin-manifest json file populated in the cloud editor, you'll find the widgets key being configured with these details for a default sample widget:
➤ A name key mapped with the sample widget name as "Projects Extension."
➤ A location key mapped with the default location as "task_tab." This key determines the location to load thewidget. Zoho Projects supports multiple locations where you can load widgets. You can select the location based on your requirements; however, the default location is the task details tab.
➤ An URL key that holds the path or location of the HTML file that will be loaded as the widget UI. By default, the path is defined as: /app/index.html.
  • The cloud editor also includes a pre-populated index.html file in the app folder that will be loaded as the widget UI in the task details tab.

Now that we've looked at the folders and files that are created by default when an extension is created, let's now explore how you can test this extension in a testing environment.

Testing an extension using the cloud editor
  • The Sigma cloud editor allows you to test your extension functionalities in a testing environment before publishing the extensions and installing them in a Zoho Projects portal.
  • To test the extension, click Run in the cloud editor.

  • You'll be taken directly to a specific portal in your Zoho Projects account. If you only have one portal, you'll be landing directly in that portal. If you have multiple portals, you'll be prompted to select the portal where you wish to test your extension.
Note: The extension's components (for example, widgets) can be tested in the portal by selecting the Run option; however, no instance of the component will be reflected on the portal until the extension is published and installed in that portal.

  • Once you've entered the testing environment, click on a task to enter the task details page, because the extension you've created has a sample widget named Projects Extension in the task details tab.

  • On the task details page, you can view the widget named Projects Extensions as an individual task tab. Click on the Projects Extensions tab.

  • The widget will be loaded with the UI as available in the index.html file.

  • Once you are done with testing your extension functionalities, switch to the cloud editor tab and click Stop.

  • In what situations can we use the Run option?
➤ To run the extension for the first time in the testing environment.
➤ Whenever the plugin-manifest.json file is modified, you have to use the Run option again.
Note: If you make modifications to any other files, simply refresh the extension to see the changes; there's no need to use Stop and Run again.
➤ When you use the Stop option to end a test and then want to retest the extension, the Run option has to be used.
Editing an extension using cloud editor
  • Whenever you want to make changes to your extension code, choose the Extensions section in the left panel of your Sigma workspace.
  • Hover over the extension to which you want to make changes. Click on Edit Builder icon.

  • You'll be taken to the cloud editor of that particular extension, then you can go ahead and make your edits.
  • Alternatively, you can also click on the Extension Details icon.

  • Then, click Edit Extension.
  • This method will also take you to the cloud editor of the extension where you can make necessary changes.
In this post, we've covered creating an extension, testing it, and making changes to it. We hope you found this information useful. Keep following us for more information!

Sign up for a Zoho Developer account ans 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