How to embed an Apache Superset dashboard in a webpage?

Question

I am trying to implement the Apache superset dashboard in a webpage. Anyone have any idea how to implement this?

This question needs more information. What kind of webpage? Just HTML? Do we have JavaScript? Is it powered on the server-side by C#? PHP? JS? — TylerH, Jul 21 '22 at 13:59

score 11 · Answer 1 · edited May 17 '21 at 17:51

11

Keep the iframe tag line as you mentioned.

<iframe src="linkToYourDashBoard?standalone=true"></iframe>

and check the superset_config.py file.

HTTP_HEADERS = {'X-Frame-Options': 'SAMEORIGIN'}

Change the line to

HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}

or

HTTP_HEADERS = {}

Don't forget to add superset_config.py file to your python path.

edited May 17 '21 at 17:51

Bonifacio2

3,405
6
34
54

answered Jan 25 '19 at 07:26

Soumen

121
6

I want to add authentication and authorization in the webpage.Can i able to do that ? – Ankita Jan 25 '19 at 10:22
Yes, you can. Follow the documentation – Soumen Jan 25 '19 at 10:33
As of at least 2.0.0, Superset now also supports `?standalone=` values of `0, 1, 2, 3` with more granularity in terms of what's hidden compared to just `true`. See https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/. – Sam Firke Aug 12 '22 at 17:47

score 4 · Answer 2 · edited Jul 21 '22 at 13:59

4

First, you need to update the public roles with these options.

Security/List Roles:
can explore json on Superset,
can dashboard on Superset,
all database access on all_database_access

Second, embed your dashboard in your HTML

<iframe src="localhost:8088/superset/dashboard/5/?standalone=true"></iframe>

edited Jul 21 '22 at 13:59

TylerH

20,799
66
75
101

answered Jan 16 '19 at 14:58

emacip

41
3

could you please explain in more details.(if you have any screenshot,this would really help) – Ankita Jan 16 '19 at 15:25
when i am running this HTML its not working
Your browser does not support iframes.
– Ankita Jan 17 '19 at 09:26
try using tag – emacip Jan 17 '19 at 11:02
http://localhost:8088/superset/dashboard/5/?preselect_filters=%7B%2248%22%3A%7B%22Retailer_country%22%3A%5B%5D%2C%22Quarter%22%3A%5B%5D%2C%22Product%22%3A%5B%5D%7D%7D this is my dashboard URL,am i doing anything wrong with html ? – Ankita Jan 17 '19 at 11:56
try [link](http://localhost:8088/superset/dashboard/5/?standalone=true&preselect_filters=%7B%2235%22%3A%7B%22Retailer_country%22%3A%5B%22Quarter%22%3A%5B%5D%2C%22Product%22%3A%5B%5D%7D%7D) you need the `standalone=true` – emacip Jan 17 '19 at 13:11
I tried the link you suggested but still not working in chrome or firefox. – Ankita Jan 17 '19 at 15:29
here is the html code – Ankita Jan 17 '19 at 15:29
can we implement the webpage through flask ? @emacip #superset #apache-superset – Ankita Jan 21 '19 at 10:06
I dont think so @Ankita its very clear [documentation](https://superset.incubator.apache.org/security.html) – emacip Jan 21 '19 at 20:42
http://10.85.150.139/r/5 this is my dashboard url which is in aws ..whenever i am trying to use this link in iframe tag it is not working whenever i am trying to add in hyperlink it is working @emacip – Ankita Jan 22 '19 at 10:16

score 4 · Answer 3 · edited Sep 30 '22 at 13:36

Superset Embedded SDK allows you to embed dashboards from Superset into your own app, using your app's authentication.

superset backend server: update superset_config.py or config.py

FEATURE_FLAGS =  {
  "EMBEDDED_SUPERSET": True, # requirement
}
"GUEST_ROLE_NAME": "Public", # you might need to edit role permissions when 403 error
"GUEST_TOKEN_JWT_EXP_SECONDS": 300  # 5 minutes, or you could set it longer

your app's backend server

fetch access_token
- http://localhost:8088/api/v1/security/login
fetch guest_token
- http://localhost:8088/api/v1/security/guest_token/

your app's frontend, for example:

<script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
<script>
    supersetEmbeddedSdk.embedDashboard({
      id: 'd3918020-0349-435d-9277-xxxxxx', // given by the Superset embedding UI
      supersetDomain: 'http://localhost:9000',
      mountPoint: document.getElementById('container'), // any html element that can contain an iframe
      fetchGuestToken: () =>
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.xxxxxx.1RExnlLfdDI6P4vG3gB0otLL7XR_3OE2OZ0WhCKyTyE', // guest_token
      dashboardUiConfig: {} // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
    })
  </script>

Please refer to: Embedding Superset dashboards in your React application

score 0 · Answer 4 · answered Jul 18 '22 at 19:16

Superset now provides the Superset Embedded SDK, an NPM package for inserting an iframe that will embed your Superset dashboard. I'm using it at the moment and it is relatively straightforward; this is the current implementation example provided in the docs:

import { embedDashboard } from "@superset-ui/embedded-sdk";

embedDashboard({
  id: "abc123", // given by the Superset embedding UI
  supersetDomain: "https://superset.example.com",
  mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
  fetchGuestToken: () => fetchGuestTokenFromBackend(),
  dashboardUiConfig: { hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
});

Obviously the end result could still be achieved by adding the iframe "manually," but using the official abstraction might provide simplicity and future functionality in subsequent versions.

How to embed an Apache Superset dashboard in a webpage?

4 Answers4

Linked