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 Marketing Automation

            Zoho Pagesense Resources

              Zoho SalesIQ Resources

                    Zoho TeamInbox Resources

                      Zoho DataPrep Resources

                        Zoho CRM Plus Resources

                          Zoho Books Resources

                            Zoho Subscriptions Resources

                              Zoho Desk Resources

                                Zoho Projects Resources

                                  Zoho Sprints Resources

                                    Qntrl Resources

                                      Zoho Creator Resources

                                        Zoho WorkDrive Resources

                                            Zoho Campaigns Resources

                                              Zoho CRM Resources

                                                    Design. Discuss. Deliver.

                                                    Create visually engaging stories with Zoho Show.

                                                    Get Started Now