Framework and Hosting
Zoho ERP widgets are built using the ZET (Zoho Extension Toolkit) framework. This help document covers how to set up the framework and choose between internal and external hosting for your widgets.
Set Up Framework
Zoho ERP uses the ZET (Zoho Extension Toolkit) framework to build widgets. The ZET framework allows your widget to interact with Zoho ERP using supported JS SDK (JavaScript Software Development Kit) APIs. To set up this interaction, use the following script to import the JavaScript file:
<script src="https://static.zohocdn.com/zohofinance/v1.0/zf_sdk.js"></script>Once the JavaScript is imported, the global object ZFAPPS will be available in the framework. You can create a client object to communicate with the product using the function below:
/* Initialization */
ZFAPPS.extension.init().then(() => {
/* Once initialized, you can use ZFAPPS SDK's all APIs */
/* You don't need to initialize every time to access its APIs. It's a one time initialization */
});Example:
ZFAPPS.extension.init().then(() => {
ZFAPPS.get('user.name').then(function (data) {
//response Handling
}).catch(function (err) {
//error Handling
});
/* Below is an example to get the current organization's name */
ZFAPPS.get('organization.org_name').then(function (data) {
//response Handling
}).catch(function (err) {
//error Handling
});
});Next, install Node.js and ZET CLI (Command Line Interface) to set up a runtime environment for building the widget. This helps you build and test widgets locally.
Internal and External Hosting
You can host widgets internally on the Zoho ERP’s server or on an external server. If you host it internally using the Zoho ERP’s server, you can build your widgets using client-side technologies such as HTML, CSS, and JavaScript. These widgets will be rendered in Zoho ERP using iframes.
However, if you want to host the widget on an external server, you will have to use server-side technology to achieve this.
When you mention the widget URL in the plugin-manifest.json file, widgets that are hosted internally are configured with a relative URL {/${file_path}}, whereas widgets that are hosted externally use an absolute URL {https://${yourdomain}/${file_path}} to which the widget will redirect.