Gitlab Link: https://gitlab.com/SisenseJS/filter-samples
This project was created to show several ways to integrate 3rd party components with Sisense.js. Many web apps that leverage Sisense.js for embedding do so because they already have a consistent look/feel for their application and want the controls related to Sisense to match. This sample project showcases a few common filter types, in a simple web page. This webpage uses Semantic UI framework, but this approach would be similar for Bootstrap, Material Design, etc
Almost all custom filter controls follow the same workflow:
- Fetch data - Make an API call to fetch data from Sisense, and add the results as potential selections in the UI
- Initialization - Setup the component with this data
A simple toggle switch, that sets/unsets a filter when clicked
A dropdown menu built using Semantic UI's dropdown framework. This example has a simple dropdown which fetches a list of unique values from Sisense, and sets a filter based on user selection (supports multi-select).
Also included is a more complex dropdown that nests multiple dimensions into levels. This takes a bit of HTML manipulation to create the hierarchy, but generally it works the same as the simple example.
Calendar Date Range Picker
This directory contains all files required for Semantic UI. No customizations were made here
This file contains the base object that will store a reference to all settings/methods related to this website. When setting this up, you should update the server address and potentially the Elasticube.
This HTML page is the default landing page for this website. It loads config.js and main.js, to initialize the application, and includes the definition of the filter components and widgets to display. This sample uses widgets from the Sample Healthcare dashboard that comes with the free trial of Sisense, so if you change the Elasticube in config.js you should also change the widget IDs and filter properties defined in this file.
This contains any styling outside of the Semantic UI framework
- initScript - Adds a <script /> tag to your HTML page, to add the Sisense.js Library
- connect - Once the Sisense.js library has finished loading, connect to your Sisense server
- loadApplication - Once connected, create a new Dashboard and find all the widgets & filters on the web page. For each widget found, run the loadWidget function. For each filter found, run the initFilter function.
- loadWidget - For a given widget ID, load the widget and render to the page
- initFilter - For a given filter, initialize it and add an event handler for when a user interacts with it
- initScript() - Kicks off the initialization workflow
To get more help on Semantic UI their Documentation.
For more help with Sisense.js, check out the Sisense documentation here.
Please sign in to leave a comment.