cancel
Showing results for 
Search instead for 
Did you mean: 
steve
Sisense Team Member
Sisense Team Member
To embed dashboards from Sisense into your web application, typically you would use either the IFRAME or EmbedSDK approaches (see sisense.dev for more details).

If your application is written in React, then React components to achieve tasks, like this, make life easier.

You can always write your own components around Sisense SDKs and APIs, but here is one I wrote that you can use to get started.

Example Application

To see the component working in a live sample application, simply visit this link and enter your Sisense URL and dashboard ID into the relevant input boxes.

 

sampleApp.gif

 

To download the source of this example application, clone this repo and follow the instructions on the readme page.

 

Use the React Component in Your Application

To see more details on how to use the React Component for Sisense Embed SDK in your application, visit the repo for the component and follow the instructions on the read me.

At the time of writing this article, here is all you should need to do:

  • Install module using npm
npm install --save sisensers/sisense-embedsdk-react

 

  • Import the module into your React application
import SisenseDashboardEmbed from 'sisense-embedsdk-react'

 

  • Use the `SisenseDashboardEmbed` component on your page
<SisenseDashboardEmbed
sisenseUrl={sisenseUrl}
dashboardId={dashboardId}
/>

 

The component accepts a number of other optional 'props', including Booleans, to control the dashboard settings (toolbar, left pane, right pane), volatile mode (don't save changes to dashboard state), as well as strings for the look and feel theme, css height/width for rendered frame etc.

Also, you can control if things like EmbedSDK should be unloaded when the component unmounts through the props, as well as attach your own handler to execute when the dashboard has loaded.

I hope this helps some of you get started with using Sisense in React! Leave a comment if you use my example and share your experience. 

Comments
sisense-nuna
7 - Data Storage
7 - Data Storage

Is this a precursor to the Compose SDK? Is this recommended as "the Sisense way" for using Sisense via React, or is this just a sample / reference?

cc @moti 

steve
Sisense Team Member
Sisense Team Member

It's a sample / reference to help customers who need to embed into React today, as ComposeSDK is not currently available to customers.

potatomochi
7 - Data Storage
7 - Data Storage

Is this also possible to use it to import widgets too and customise the widgets? I have some issues connecting using the APIs and SDK

steve
Sisense Team Member
Sisense Team Member

hi @potatomochi 

For widgets, try this (slightly different library as it uses sisenseJS) but approach is similar

https://github.com/sisense/sisensejs-components

 

cc @moti @Oleksandr_K 

Version history
Last update:
‎02-15-2024 02:59 PM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: