Zoho expense logo Extensions

Create Widget

There might be times when you need a service or feature that is not available in Zoho Expense. In such cases, you can create a widget and embed it in the app.

Set up Runtime Environment

To create a widget, first set up a runtime environment:

  • Install Node.js. If you’ve already installed it, continue to the next step.

Insight: Zoho Expense supports Node.js version 7.1.0 and above. You can verify the installed version by running the node -v command in your terminal.

  • Install the ZET (Zoho Extension Toolkit) globally by running this command in your terminal:
     npm install -g zoho-extension-toolkit

Note: Install the latest version of ZET.

Insight: The -g option in the above command denotes global installation. This allows you to run ZET commands from anywhere on your machine.

Build Widget

Once you have set up the runtime environment successfully, you can start building your widget. Here’s how:

  • Run zet init in your terminal.

  • Choose Zoho Expense from the list of services.

  • Enter a name for your project. This will be the name of the folder where your widget files are created.

  • A project template directory comprising all the necessary folders, dependency node packages, and files will be created automatically.

A widget will be created.

Insight: Run cd [widget name] in the terminal, to navigate to the current path of the widget’s directory. In that, the plugin-manifest.json contains meta information about the widget. You can configure the widget details, location, used connections, etc.

Configure Widget

Once you’ve created the widget, you can configure it in Zoho Expense using a few parameters. Here’s how you can configure the Hello World widget in the trip details sidebar:

  • Edit the plugin-manifest.json file based on the html file path and location as per your needs.
  • The location indicates where the widget will be displayed. In this case, the location will be the trip details sidebar (trips.details.sidebar).
  • The url is the HTML file path loaded initially. In this example, /app/widget.html is used.
  • The logo is the image file path used for the widget logo. In this example, /app/img/logo.png is used.
{
    "locale": [
        "en"
    ],
    "service": "EXPENSE",
    "whiteListedDomains": [],
    "modules": {
        "widgets": [
            {
                "location": "trip.details.sidebar",
                "name": "Expense Extension",
                "url": "/app/widget.html",
                "logo": "/app/img/logo.png"
            }
        ]
    },
    "config": [],
    "usedConnections": []
}
  • Here’s an HTML snippet of the Hello World widget:
 <!--app/widget.html -->
<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title>Hello World</title>
      <script src="https://static.zohocdn.com/zohofinance/v1.0/zf_sdk.js"></script>
</head>

<body>
   <h4>Welcome <i id="username"></i> to zoho finance widgets.</h4>
  <script>
 	window.onload = function () {
      // Initializing SDK.
      ZFAPPS.extension.init().then( (App) => {
          ZFAPPS.get("user.name").then((response) => {
            let userElement = document.getElementById("username");
            userElement.innerHTML = `Mr/Mrs. ${response['user.name']}`;
          });
        });
      };
     </script>
</body>
</html>

Here, https://static.zohocdn.com/zohofinance/v1.0/zf_sdk.js is the SDK URL. It contains the global object ZFAPPS. It helps you communicate with Zoho Finance products.

To make the global object work, initialize it once the iframe is loaded. Inside the initialization block, the ZFAPPS get API is used to get the user name from Zoho Finance applications.

Test Widget

Once the widget is created, you can test it on your local machine. To test:

  • Run zet run command in your terminal.
  • Access this URL in your browser to know whether the widget runs on the local server: https://127.0.0.1:5000/plugin-manifest.json

Next, you’ll have to switch to developer mode to test the widget. Here’s how:

  • Go to your Zoho Expense organization and navigate to Settings.
  • Go to Developer & Data and select Widgets.
  • Toggle the button to enable Developer Mode.

Navigate to the location where the widget has been configured and refresh the window to render the widget.

  • If you want to go back to the normal mode, toggle the button and turn it off.

Validate Widget

Once you’ve tested the widget, the next step is to validate it. Here’s how:

  • Run zet validate in the terminal to check if the guidelines specified in the plugin-manifest.json file are met.

Once the validation is successful, you can start packing the widget files. If not, make the necessary changes and run the command again.

Pack Widget

To upload a widget to the Zoho Marketplace, you must pack it first. Not all files from your project directory are required for upload. Run zet pack to zip essential files and folders, such as app and plugin-manifest.json.

Note: The zip file is generated under your_project/dist (SampleWidget/dist/SampleWidget.zip).

Upload Widget

Once the ZIP file is ready, you can upload the widget to Zoho Expense so that other users in your organization can use that widget as well. Here’s how you can upload your widget:

  • Go to Zoho Sigma, and click Extensions on the left sidebar.
  • Hover over the extension for which you want to upload the ZIP file and click the Edit icon. You’ll be redirected to the Zoho Expense Developer Portal.
  • Click the Configure tab at the top.
  • Click Upload Widget in the top right corner.
  • Enter the widget’s Name and provide a Description.
  • Click Attach From Desktop next to Upload ZIP and upload the ZIP file which was generated using the zet pack command.
  • Click Save.

Now, you can access the widgets in the specified locations.

Note: Ensure that the ZIP file is not empty and that the ZIP file name does not contain numbers or special characters.

ON THIS PAGE