Version 0.9

Skip to end of metadata
Go to start of metadata

Audience

This documentation is intended for users who are familiar with JavaScript programming and are experienced with creating dashboards using Sisense.

Use this Getting Started guide to familiarize yourself with the concepts of Sisense’s Javascript API and start enhancing Sisense with custom functionality.

Who can use the API?

Any Sisense designer can extend Sisense dashboards and widgets with the Javascript API. Limiting API usage to administrators can only be achieved using the user role customization feature.

Deploying Javascript plugins to the Sisense installation folder can be performed by anyone with access to the physical drive.

What can I do with the API?

The Sisense web application was built to be easily extensible via the Javascript API. Javascript can be implemented using the following two methods:

Do things such as:

  • Build new types of widgets
  • Tweak out-of-the-box visualizations to match the exact look and feel you are looking for
  • Fine tune the application behavior for specific needs
  • Apply custom formatting

Adding Custom JavaScript to a Dashboard

Enhance Dashboard functionality by adding JavaScript to it in the Sisense web app.

To add custom JavaScript to a dashboard:

  1. Click the Dashboard menu  menu button in the top-right corner of the Dashboard and selectEdit Script.
  2. In the JavaScript editor that opens, you can add and edit your JavaScript code.
  3. Click Save and refresh your dashboard.

Adding Custom JavaScript to a Widget

Enhance widget functionality by adding JavaScript to it in the Sisense web app.

To add custom JavaScript to a Widget:

  1. Hover over the top-right of the widget and click pencil to edit the widget.
  2. Click the Widget menu menu  in the top-right corner of the widget and select Edit Script.
  3. In the JavaScript editor that opens, you can add and edit your JavaScript code.

Creating Plugins with JavaScript

You can edit the JavaScript file for an existing plugin, or create a new plugin using JavaScript.

To add custom JavaScript to a plugin:

  1. Browse to your Plugins folder: C:\Program Files\Sisense\PrismWeb\plugins, and open the specific plugin folder. If you are creating a new plugin, create a new plugin folder under thePlugins folder.
  2. Open the widget.js file in an editor, and update the code.

Note

If an extra JavaScript library is required, you can add a reference to it from the JSON file in the same plugin folder. You can use a relative path to the same folder.

See the following section to see how JavaScript is used to create a new widget.

Creating a New Widget Plugin with JavaScript

A common method for adding a new widget is to create a new widget plugin, and add it to the plugins folder. We recommend using an existing plugin, and then update the JavaScript, JSON and CSS files, as well as other additional files you may need as a part of the new plugin.

To create a new widget plugin:

  1. Create or locate your Plugins folder: C:\Program Files\Sisense\PrismWeb\plugins. If the plugins folder does not yet exist, create it under PrismWeb.
  2. Copy an existing widget (folder and files) into the Plugins folder, and then rename the plugin folder. You can find custom JavaScript scripts as well as plugins in our support site.
  3. In the plugin folder, edit the following files:
    • plugin.json: Open the file in an editor to see information about the plugin. If an extra JavaScript library is required, it can be referenced here from the source array. Save a local copy of the JavaScript file in the same directory, and it can be referenced with a relative path. Make sure to leave the code for the CSS, as it is required by the plugin.
    • widget.css:  This CSS file contains information about the style for the infobox and other classes.
    • widget.js:  This JavaScript file runs when the dashboard is loaded, and registers the new plugin as a widget. If this runs successfully, you will see the plugin appear in the list of widget types. The majority of this file’s code can be left as is, but you must modify the render property. Update the rest of the code where necessary, using the following guidelines:
      • Changing the widget’s panel: The panel for the widget is defined under the data property. The panels property is an array that defines what a user is allowed to define. If you change the name of a panel, any further reference to that panel in the JavaScript code must also be updated to reflect the new name.
      • isSupported & rankMetadata: These two properties are used to determine whether the dimensions/values specified by the user are supported to build the required chart.
      • processResult: If the results returned need to be modified before rendering the chart, this is the place to do so. An example is if an extra data set needs to be calculated off the given data (regression analysis) before being passed to the chart renderer.
      • Icons: If you want to include a small icon in the chart type list, you can add the image file to this directory and reference it using the iconSmall property. This path is not relative, so the path will have to be specified in the following format: “/plugins/MyPlugin/icon.png”.
  4. After editing the above files, and including them in the plugin folder you created, the plugin will become available in the Sisense web app.
  5. Log into a dashboard, and create a new widget. Open the Advanced configuration, and you should see the name of your new plugin in the list of available chart types.

 

JavaScript Implementation Examples

Visit our forums for more examples

For a full list of Sisense Plugins, click here.  

  • No labels