Developer Space - Develop Extension

The Develop Extension section in Developer Space lets you create own eWidget extensions. The extension you create can be installed from the Marketplace and used by other users. 

Zoho Marketplace

Zoho Marketplace is the online platform which offers extensions and widgets that help the users enhance their workflow across multiple apps. The users can install the extensions from the Zoho Marketplace, to build upon the exiting functions of the Zoho applications. 

In addition to the extensions available already, developers can now create more comprehensive extensions for Zoho Mail. These extensions can be built to integrate the functions of Zoho Mail with the features of the third-party applications. This helps the users build extensions to suit custom requirements. 

Once you have built the extension, you will have to submit it for a review. After analyzing the functionality, your extension will be approved and will be published in the Zoho Marketplace, which will be available to all Zoho users to install and use.

Developing the Extension

You can start building your extension directly from Zoho Sigma platform using a pre-populated Zoho Mail plugin manifest. Alternatively, you can also use the ZET CLI to build your extension and then upload the file to Zoho Sigma for submission. 

Creating extension in Zoho Sigma 

To get started, create a workspace for yourself in Zoho Sigma with the following steps:

1. Login to Zoho Sigma
2. Enter your workspace name
3. Click Create Workspace

​Once you have created your workspace, click on New Extension button on the top-right corner. Enter the details like name and description and select Zoho Mail from the Service section. Then click Save as Draft and follow the detailed instructions given in this help page to begin creating your extension in Sigma. 

Creating extension with ZET CLI

Command Line Interface (CLI) is used to create and package widgets. Zet command is the CLI used to package widgets for Zoho Mail.

Pre-requisites

In order to create your own widgets for Zoho Mail, you are required to download the nodejs. You can download it from here. (Version below 7 are not supported)

You can verify the node by running the following commands:

$ node -v verifies the version of the node.
$ npm -v verifies the version of the npm.

Installation

Install the ZET (Zoho Extension Kit) CLI using the below command.

$ npm install -g zoho-extension-toolkit@latest 

Run the below ZET command to verify the installation. Help details about the various support commands will be displayed:

$ zet

Creating a Project

Create a project with the following command:

$ zet init

The list of Zoho services is displayed. Choose Zoho Mail and press Enter.

You will be prompted to provide a project name. Type the preferred project name and press Enter.

Including Resources

Once you enter the project name, a directory of the same name is created on your system. It contains all the required folders, files and packages.

Navigate to the project directory and open the "App" folder. Include the resources of your widget into the relevant sub-folders.

Running the server

Run the following command to start the https server that runs your extension locally:

$ zet run

This command makes use of the 5000 port of your local machine. Before starting the server, ensure that the 5000 port is not occupied.

To verify the successful running of the server, open the given URL in your browser:

https://127.0.0.1:5000/

Validate and Pack

Execute the following command to validate your extension:

$ zet validate

Your extension needs to follow the below-given specification. Running the validate command will identify any violations of the specifications if any. Any such violations need to be rectified before uploading the zip.

Run the below pack command to create a zip with all the files and folders required for the running of your extension:

$ zet pack

The zip is present in the dist folder of your project directory. You can upload this zip to the Marketplace.

Specification

The project directory of your extension includes a plugin-manifest.json file. This file contains the configuration details of your extension. The keys included in this file need to follow the following configuration:

• locale: This is the default locale for the extensions. The translation folder of your project directory should contain all the translation files. The format of the files should be "<locale-code>.json". 
• service*: The Zoho product for which your extension is created. 
  • While creating an extension for Zoho Mail, the service key will be auto-populated in the manifest as "service": "MAIL".
• storage: The value of this key should be set as "true" if you want your extension to store application data.
• logo: File path of the image you wish to use as the logo for your extension. Ex: "apps/images/logo.png"
• modules*: Widget is the module used for Zoho Mail Extensions. It is an array of the details of your extension. The widget module is required to have the following set of properties.
  • location: Location of your widget in the Zoho product.
    • It has to be "zoho.mail.preview.rightpanel" for Zoho Mail, to access your extension in the widget panel.
      

    • It has to be "zoho.mail.pinnedview.rightpanel", if you want to perform quick actions using your widget. The widget will be available to be pinned to the right pane. Refer here to pin a widget to the right pane.
      

      This API can be used to open the extension in the widget panel from the quick-action window or vice-versa.

    • It has to be "zoho.mail.preview.moreoption", if you want to include the application in the Add to option of the More options drop-down in mail preview pane.
      ​ ​
    • It has to be"zoho.mail.emailaddress.moreaction", to view and access your widget from the Contact Card in the Preview Pane.
      
  • name: Name of the project directory of your widget. It is auto-populated.

  • url: It is the path defined for your widget.

    MANIFEST SAMPLE: For accessing the widget in right panel
    
    "modules": {
          "widgets": [
    ​                         {
                                    "location": "zoho.mail.preview.rightpanel",
                                    "name": "extension_name",
                                    "url": "/app/widget.html"
                             }
                        ]
    ​                 }

  • MANIFEST SAMPLE: To perform quick actions using the widget in pinned view
    
    ​"modules": {
          "widgets": [
    ​                         {
                                    "location": "zoho.mail.preview.rightpanel",
                                    "name": "extension_name",
                                    "url": "/app/widget.html"
                             }
                            ​​{
                                  "location": "zoho.mail.pinnedview.rightpanel",
                                    "name": "extension_name",
                                    "url": "/app/widget.html"
                             }
                        ]
    ​                 }

  • MANIFEST SAMPLE: To include application to the Add to option of the More options ​drop-down in mail preview pane.
    
    ​"modules": {
          "widgets": [
    ​                         {
                                    "location": "zoho.mail.preview.rightpanel",
                                    "name": "extension_name",
                                    "url": "/app/widget.html"
                             }
                            {
                                    "location": "zoho.mail.preview.moreoption",
                                    "name": "extension_name",
                                    "url": "/app/widget.html"
                             }
                            ​​{
                                  "location": "zoho.mail.pinnedview.rightpanel",
                                    "name": "extension_name",
                                    "url": "/app/widget.html"
                             }
                        ]
    ​                 }