This tutorial's objective is to teach you the fundamentals of Sigma to build an extension.
STEP 1: Create your app
For this tutorial, let us create a new extension with Zoho Projects service to display 'Hello World' text. This extension will be displayed within the related section of tasks and issues.
-
Login to
sigma.zoho.com.
-
Navigate to the
Extensions
module.
-
Click
New Extension.
-
Enter the Name, Description, and choose
Zoho Projects
in Service.
-
Click the radio button to
Agree to the terms and conditions.
-
Click
Save as Draft.
Once done, you'll be navigated to cloud editor with default files.
plugin-manifest.json
By default, plugin-manifest.json file will be opened in the cloud editor. The plugin-manifest contains all the metadata about your extension.
Structure of plugin-manifest.json:
This file holds the details of an extension.
connectors: Integrate with third party apps using Connectors. If the connectors are configured and authenticated once, it can be commonly used in all extensions. Connectors are not used in this instance since this is a basic project extension. Know more about connectors from this help document.
whiteListedDomains: Mention the specific domains here if your extension needs third-party services. When making API calls, the extension can access only the domains specified. Other domains won't be supported due to security reasons. If no external access is required for the extension, the array can be kept empty.
service: It is the product for which the extension is created. Here the service will be Zoho Projects.
storage: Data storage can be enables or disabled for the extension. By default, the value will be false.
locale: It is the language that is supported by the extension. We only support English at the moment ("en").
modules
: These are the modules supported in the extension. Currently, we support Widgets module in Sigma. Within Widgets, you can provide the Name of the extension, location where the extension should be displayed and URL of the initial page of the extension.
index.html
Now, let's move on to
index.html
file.
You can customize this HTML file as per your requirement. For 'Hello World' extension, update the text content in the file.
Below are the other required directories and files created in a project template directory:
app
|
This contains all the files required for the front-end component of the extension.
|
img
|
This contains all the images of the extension.
|
translations
|
This folder contains the files that are required for translating the app in other languages.
|
STEP 2: Test the extension
-
Click
Run
at the top bar to run and test the extension.
-
You'll be navigated to the
Zoho Projects
portal to test the extension.
-
In case you are a part of multiple portals, in the ensuing pop-up, select the organization in which you would like to run the extension.
-
Go on to a
task/ issue.
-
Click (...) in the related section and choose
Projects Extension.
-
Hello World
extension will be displayed within the task/ issue.
Refer to this
help document
to know how to publish an extension in Sigma.