Building Extensions #3: Setting up the development environment and building extensions for Zoho Desk

Building Extensions #3: Setting up the development environment and building extensions for Zoho Desk

This series aims to equip developers with all they need to build extensions for Zoho Desk in Zoho Sigma and publish them in Zoho Marketplace.

Welcome back, Developers!

With our previous post on the basics of extensions and the scope of building them, we'd like to continue the momentum by discussing the process of actually building extensions for Zoho Desk. In this post, we'll address the technical prerequisites to develop extensions for Zoho Desk. We will also take you through the steps involved in creating and testing your extension.

The first step to build extensions for Zoho Desk is to download and install Node.js, followed by ZET (Zoho Extension Toolkit). ZET is the CLI tool offered by Zoho Desk that comes with a built-in http server to render the extension. It also enables you to build, test, validate, and package your extensions.

Setting up the development environment 

Installing Node.js 

You can install the Node.js runtime environment here (versions 7.1.0 and above are supported). Once you have installed Node.js, run the following command to verify it.

 $ node -v
 $ npm -v

Installing ZET CLI

Install ZET CLI, which enables you to build your extensions for Zoho products.
  • If you are a Mac/Unix user, run the following command to install ZET: 
 $ sudo npm install -g zoho-extension-toolkit
  • If you are a Microsoft Windows user, run the following command:
 $ npm install -g zoho-extension-toolkit
  • Use the following command to check the version:       
 $ zet -v
  • Use the help command to view all the available commands in ZET CLI and their usage.     
 $ zet -help

ZET commands:

init: Creates the skeleton of the extension project. It scaffolds the index file of your project with the necessary code to ease the development process.
run: Starts an https server in the current directory to serve the assets in it.
validate: Helps developers to ensure the extension is in alignment with the Zoho Desk guidelines.
pack: It will create ZIP file in the current directory to host extension's static assets in Zoho servers.

Building your extension 

Once the required development environment is set up, you are ready to build and test your extension. To start building your extension, you need to create a new project in ZET CLI.

Create a new project

Open your terminal and move to the directory under which you will be creating a new project for your extension.
  • Run the following command. This command will display the list of all Zoho Products for which extensions can be developed.
 $ zet init
  • Use the arrow keys to choose Zoho Desk and press Enter.    
 $ zet init
 ? Select the Zoho service for your widget and hit enter key (Use arrow keys)
 > Zoho Desk
   Zoho CRM
  • You will be prompted for the Project Name.
  • Provide a project name and click EnterYou will have to choose Yes/No based on your need for module support.
Note: We will be discussing module support in detail in a separate post. If you are a beginner developing your first extension, you can choose No.

Now, the project directory with all the necessary folders, dependency code packages, and files will be created.

 D:\zet\projects>D:\zet\projects>zet init
 ? Select the Zoho service for your widget and hit enter key Zoho Desk
 ? Project Name demoproject
 Initializing project at: D:\zet\projects\demoprojects
 Installing NPM dependencies…
 Project Initialized D:\zet\projects\demoprojects
 Run the following commands:
 cd demoproject
 zet run

The image below represents the project's default folder structure. The widget.html file is the default widget created within the project. Let's test this extension using this sample widget.

Testing your extension

You need to perform the following steps to test your extension:
  1. Start server in your local host
  2. Activate development mode in Zoho Desk

Starting the server

To start the local host server, navigate to the newly created project's directory and execute the following command.

 $ zet run

The http server will start and be accessible through port 5000 of your local machine.

Activate development mode

  1. Log into your Zoho Desk account. 
  2. Click on the gear icon in the top right corner and go to the Setup page.
  3. Click Build Extensions under Developer space.
  4. Click the Enable Developer Mode button in the top right corner of the page.Developer mode will be enabled.
  5. Go to the Tickets module and open a ticket.
  6. Click the Extension icon to the right of the Ticket details page. The extension widget page will appear. 

We hope you found this post useful. Try it out and let us know your feedback! We really appreciate hearing from you.

Stay tuned!

See Also

<<Previous                                                                                                                                                                                                    Next>>

    Zoho Developer Community

                              Zoho Desk Resources

                              • Desk Community Learning Series

                              • Digest

                              • Functions

                              • Meetups

                              • Kbase

                              • Resources

                              • Glossary

                              • Desk Marketplace

                              • MVP Corner

                              • Word of the Day

                                  Zoho Marketing Automation

                                          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