This project is a demo of Sisense's Embed SDK - a Javascript library used to embed Sisense dashboards into other web pages in an interactive manner, available in Sisense V8.1 and up.
Note: this demo utilizes some features available only with Sisense V8.1.1 and higher
The repository includes all the assets (such as an Elasticube and dashboards) required to set up this demo. Below you will find instructions for set up, customization and contributions.
For more information about the Sisense Embed SDK, please visit the Sisense Embed SDK documentation
Within this document:
External documents:
Make sure you have met the following prerequisites prior to starting:
- Installed
Sisense V8.1.1
on your server and activated it- Set up CORS
- Set up SSO (Optional - you can manually log in to Sisense in another tab to create a cookie)
- Have NodeJS and NPM installed and up-to-date
- Clone or download this repository
- The demo uses one of the sample Datamodels included with Sisense called "Sample ECommerce".
If you don't already have this Datamodel, Import the Elasticube file (.ecdata
) included in theassets
folder to your Sisense server - Import the Dashboard files (
.dash
) included in theassets
folder to your Sisense server - Open the
index.html
file using any text editor and:- Locate the line
<!-- Get iFrame SDK -->
- Beneath it, update the URL in the
script
tag to match your Sisense server's IP/host and port:<script src="http://localhost:8081/js/frame.js"></script>
- Locate the line
- Open the
config.js
file using any text editor or IDE and:- Update the
baseUrl
property to match your Sisense server's IP/host and port - Update the
dashboards
array with the OIDs of your imported dashboards
- Update the
- Run
npm install
- Run
npm start
to start a local dev server, which will automatically open the demo in your browser.
If a tab doesn't open automatically, navigate to http://localhost:8887/index.html
This project utilizes very few files and dependencies to keep things simple.
Below you can find a description of dependencies, project structure, and other info to help you understand this demo and customize it for your needs.
Dependencies
All of the dependencies below are used by the demo page itself and are not required to use the Sisense Embed SDK.
Name | Type | Source | Version | Description |
---|---|---|---|---|
Bootstrap | CSS | CDN | 4.4.1 | Bootstrap CSS framework used for the demo's UX design |
http-server | NodeJS | NPM | ^0.11.1 | Lightweight NodeJS-based HTTP server for static files |
This project's UI was based on, but does not depend on, the Bootstrap 4.4 Dashboard Example
File Structure
./
├── readme.md --> This README file
├── LICENSE --> License info
├── CONTRIBUTING.md --> Contribution guidelines
├── package.json --> NPM
├── index.html --> Main demo page
├── assets/ -->
│ ├── demo-dash-1.dash --> Sample Dashboard
│ ├── demo-dash-2.dash --> Sample Dashboard
│ └── Sample ECommerce.ecdata --> Sample Elasticube
├── images/ -->
│ └── main.gif --> GIF image used in this document
├── css/ -->
│ └── main.css --> Custom CSS (in addition to Bootstrap)
└── js/ -->
├── array-find.poly.js --> Polyfill of Array.prototype.find() for older browsers
├── config.js --> Demo configuration
├── index.js --> Demo code
└── log.js --> Faux console utility