Framework and Hosting
Set up Framework
Zoho Expense uses the ZET (Zoho Extension Toolkit) framework to build widgets. The ZET framework allows your widget to interact with Zoho Expense using supported SDK APIs. To facilitate this interaction, use the following script to import the framework’s JavaScript file:
<script src="https://static.zohocdn.com/zohofinance/v1.0/zf_sdk.js"></script>Once the JavaScript is imported, the global object ZFAPPS is available in the framework. You can create a client object to communicate with the product using the following function:
/* 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 streamline the development process.
Internal and External Hosting
You can host widgets internally on Zoho Expense servers or on an external server. If you host internally using Zoho Expense servers, you can build widgets using client-side technologies such as HTML, CSS, and JavaScript. These widgets render in Zoho Expense 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.