Customizing Sisense
  • 31 May 2022
  • 3 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Customizing Sisense

  • Dark
    Light
  • PDF

The features and functionality Sisense offers as part of an embedded analytics solution let you customize and rebrand the application to match your brand’s look and feel in two ways:

  • Using the no-code user interface customization and white-labeling capabilities.
  • Enhancing and extending the Sisense embedded solution customization options using JavaScript and the Add-on framework.

Customizing using the Sisense User Interface

Sisense enables you to customize the Sisense user interface to display your company's unique branding and suit your company’s look and feel.

White Labeling Sisense

You can white-label Sisense with your company's branding. Use either the Sisense web application or the Sisense REST API to replace existing icons and images with your own. Sisense white labeling enables you to replace the Sisense logo and name, customize the emails sent by the system, and more. When white labeling Sisense, you completely rebrand a Sisense deployment for your customers. They aren't necessarily aware that the analytics they are accessing is actually a Sisense server. See White Labeling Sisense for more information.

Customizing the User Interface

Sisense enables you to customize the Sisense UI to display your company's unique branding. Update brand and text colors, using the color palette in the application, and fonts to match your company’s look and feel. See Customizing the Sisense User Interface for more information.

Add-ons

Add-ons can be used to add specific features and extend the functionality of the core Sisense product. The Web Application includes an add-on framework that allows you to easily add new customizations or modify existing functionalities according to your needs.

Add-ons are preferable to dashboard or widget scripts because they are a single source of truth, meaning any customizations you make will be applied globally to several widgets, rather than to an individual dashboard. For widget scripts, you need to copy the same code to each widget you want to customize the same way, while with the add-on, the script is placed on the server in the plugins folder and can be used for every widget. If you want to change the script at any time, you change it in one place, rather than having to change it for every widget individually.

Each widget has its own unified structure so when you create a widget in the proper format you can write your own rendering logic to render it how you want. You can use any third party library to include it into the rendering process, or you can render it with pure javascript.

Some common Sisense add-ons are:

  • New widget types
  • Extending the functionality of existing widgets
  • Extending the functionality of a dashboard as a whole. For example you can create a new network chart, Histogram or just add some cool animation to spice up the dashboard.

See Developer documentation for more information.

Customizing the User Interface with Code

You can enhance and extend the Sisense embedded solution customization options using JavaScript and the Add-on framework.

You can customize the look and feel of the user interface by creating scripts for dashboards and widgets, which reference widget lifecycle events.

Some use cases for using scripts to customize widgets are:

  • Changing the look and feel with a quick adjustment of the widget or the several widgets on the dashboard by modifying, for example, colors of buttons
  • Change the underlying data, which is used to render the widget, so it can be used to add some new columns or new data to be fetched, for example, the script can dynamically add columns to fetch data from the last week, and render it.
  • Change a query or change the response of a query to modify how the data is sorted in the responses from APIs

Using Highcharts to Customize Widgets

Several of the charts used in Sisense (Column, Bar, Area, Pie, Polar, and Scatter widgets) leverage Highcharts behind the scenes. This means that any of these chart types can be easily manipulated using the Highcharts API. For example, adding a plotting line on the chart widget, changing colors on a widget, or changing the hover effect. Click here for further information.

Using D3 to Customize Widgets

Other widget types (treemap, calendar, sunburst) use the D3 library. Each one of these will use D3 differently, as D3.js is more of a framework for creating shapes. The rendering process here is handled more behind the scenes, instead of through configuration objects, so the best way to manipulate them is by hooking onto the ready event and manipulating the HTML after it's been written to the page. Alternatively, you can hook into the render event and manipulate the data at w.queryResult.$$rows. Click here for further information.

See Customizing Sisense using Javascript for examples on how to use code to customize Sisense.


Was this article helpful?