Creating extensions for Zoho Projects using a CLI | Community | Zoho Projects

Creating extensions for Zoho Projects using a CLI | Community | Zoho Projects

In our previous post, we noted the two ways to create extensions for Zoho Projects— using the cloud editor and using the command line interface (CLI). We also shared how to create an extension using the Sigma cloud editor. In this post, we'll take a closer look at creating an extension using the CLI.

You'll learn how to create an extension project template with the CLI, test it, upload the zipped project while creating an extension, and then edit or change it. Let's go over each of these steps in detail.

Building an extension project using the CLI
  • To create an extension project, we must first set up the development environment, which involves:
➤ Downloading Node.js: Node.js acts as the base platform as well as the JavaScript environment in which the JavaScript code is executed.
➤ Installing ZET CLI: Zoho offers a command line interface called Zoho Extension Toolkit (ZET) which enables you to build, test, and pack your extension project.
Please follow the steps in this link to download Node.js and install ZET CLI.
  • Once the development environment is ready, use the basic ZET commands to create, validate, pack, and test your extension project.
zet init: Create a new project and add the necessary folder structure and resources
zet validate: Validate the entire project
zet pack: Pack the project to get a zipped file that will later be associated as the connected app
zet run: Run the internal Zoho server to test the project locally
Now, let's use these commands to create and manage an extension project.
  • First, use the zet init command. Select Zoho Projects as the Zoho service from the dropdown list.

  • Enter a name for the extension. An extension with the directory structure required for a sample Zoho Projects extension is created automatically.

  • This directory structure contains an app folder and a plugin-manifest.json file, both of which are similar to those created by the Sigma cloud editor detailed in the last post.

  • The app folder can be used to manage all the important resources required for your extension. By default, itincludes an index.html file, which serves as the UI for a sample widget.
  • The plugin-manifest.json file helps with extension configuration. It includes a widgets key configured with a default sample widget named, "Projects Extension" in the default location as the task details tab, along with the URL as the location of the index.html file.
Now that the extension project has been created, lets go ahead and test it in the Zoho Projects portal.
Testing an extension project using the CLI
  • To test a sample Zoho Projects extension created with the ZET CLI, use the Change Directory command to navigate to the project folder. Then, run the zet run command.

  • This command starts a local server and enables you to test your extension locally.
  • Now, navigate to your Zoho Projects portal. Click the Setup icon.
  • Select Developer Space from the left panel. Click Enable Developer Mode.

  • Developer Mode will be enabled and the page will automatically refresh.
  • You may now test your extension functionalities in the Zoho Projects portal.
  • Since the sample extension had a default widget called, "Projects Extension" configured on the Task Details page, choose and enter a project task in your portal.

  • Click on the Projects Extension tab on the Task Details page, and you will see that the widget has loaded.

  • Once you have finished testing your extension's functionality, use the zet pack command. This command adds a dist folder to the directory structure, zips the extension project, and places the zipped file inside the newly created dist folder.
Uploading the zipped file to your Sigma extension

Now that we have created the extension project and tested its functionalities locally, lets go ahead and create an extension in Sigma.
  • Once you enter your Sigma workspace, click the New Extension button to build a new extension.
  • Enter a name and description for the extension. Choose Zoho Projects for the service.
  • Toggle Upload Existing File to Yes.

  • Click Browse to locate and upload the extension project's zipped file, accept the terms and conditions, and click Create.

  • You will be redirected to the cloud editor. The directory structure of your CLI extension project will be automatically populated with the project's contents.
Editing an extension created with the CLI
  • You can make edits or changes to your extension code directly from the cloud editor.
  • If you wish to make changes to a file or its contents in the directory structure of your CLI extension project, please be sure to pack the extension project again using the zet pack CLI command.
  • Go to Sigma. Click the Extension Details icon of the extension you wish to edit.

  • Click the Edit icon under the extension name.

  • Browse for and upload the new zipped file, accept the terms and conditions, and click Update.

  • The extension will be updated to reflect the changes you have made.
In this post, we have covered the process of creating an extension for Zoho Projects through ZET CLI. We hope you found this information useful. Keep following this space for more information!

Sign up for a Zoho Developer account and start developing extensions for Zoho products using Sigma.

SEE ALSO










                            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

                                                                      Tips

                                                                    • Functions

                                                                      Functions

                                                                    • Meetups

                                                                      Meetups

                                                                    • Kbase

                                                                      Kbase

                                                                    • Resources

                                                                      Resources

                                                                    • Digest

                                                                      Digest

                                                                    • CRM Marketplace

                                                                      CRM Marketplace

                                                                    • MVP Corner

                                                                      MVP Corner

                                                                    





                                                                    




                                                                        Design. Discuss. Deliver.

                                                                        Create visually engaging stories with Zoho Show.

                                                                        Get Started Now