Framework and Hosting

IN THIS PAGE…

Set up Framework
Internal and External Hosting

Set up Framework

Zoho Invoice uses the ZET (Zoho Extension Toolkit) framework to build widgets. The ZET framework allows your widget to interact with Zoho Invoice using supported JS SDK (Java Script Software Development Kit) APIs. To facilitate this interaction, use the following script to import the framework’s java script file:

<script src="https://js.zohostatic.com/zohofinance/v1/zf_sdk.js">

Once the java script 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 below 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, you’ll have to install node JS and ZET CLI (Command Line Interface) to set up a run time environment for building the widget. This will help you in streamlining the development process.

Internal and External Hosting

You can host widgets internally on the Zoho Invoice’s server or on an external server. If you host it internally using the Zoho Invoice’s server, you can build your widgets using client-side technologies such as HTML, CSS, JS, and so on. These widgets will be rendered in Zoho Invoice 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.

Was this document helpful?

Yes

Let us know where we can improve

Thank you for your feedback!