How to embed an Apache Superset dashboard in a webpage?

Asked 16/1, 2019 at 14:20 Answered 5/6 at 9:49

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

Lenlena answered 16/1, 2019 at 14:20 Comment(1)

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? – Snath 21/7, 2022 at 13:59

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'}

HTTP_HEADERS = {}

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

Granvillegranvillebarker answered 25/1, 2019 at 7:26 Comment(3)

I want to add authentication and authorization in the webpage.Can i able to do that ? – Lenlena 25/1, 2019 at 10:22

Yes, you can. Follow the documentation <flask-appbuilder.readthedocs.io/en/latest/security.html> – Granvillegranvillebarker 25/1, 2019 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 superset.apache.org/docs/creating-charts-dashboards/…. – Alpenglow 12/8, 2022 at 17:47

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>

Pellagra answered 16/1, 2019 at 14:58 Comment(10)

could you please explain in more details.(if you have any screenshot,this would really help) – Lenlena 16/1, 2019 at 15:25

when i am running this HTML its not working <!DOCTYPE html> <html> <body> <iframe src= "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%7Dstandalone=true" width="600" height="400" seamless frameBorder="0" scrolling="no"> </iframe> <p>Your browser does not support iframes.</p> </iframe> </body> </html> – Lenlena 17/1, 2019 at 9:26

try using <embed> tag <embed src="w3schools.com" height="300" width="300" /> – Pellagra 17/1, 2019 at 11:2

localhost:8088/superset/dashboard/5/… this is my dashboard URL,am i doing anything wrong with html ? – Lenlena 17/1, 2019 at 11:56

try link you need the standalone=true – Pellagra 17/1, 2019 at 13:11

I tried the link you suggested but still not working in chrome or firefox. – Lenlena 17/1, 2019 at 15:29

here is the html code <!DOCTYPE html> <html> <body> <iframe src="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"></iframe> </body> </html> – Lenlena 17/1, 2019 at 15:29

can we implement the webpage through flask ? @Pellagra #superset #apache-superset – Lenlena 21/1, 2019 at 10:6

I dont think so @Lenlena its very clear documentation – Pellagra 21/1, 2019 at 20:42

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 @Pellagra – Lenlena 22/1, 2019 at 10:16

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

Walkin answered 28/9, 2022 at 8:56 Comment(0)

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.

Dalrymple answered 18/7, 2022 at 19:16 Comment(0)

set TALISMAN = False in your config file (will make your superset instance very unsecure)

Canvass answered 5/6 at 9:49 Comment(1)

Your answer could be improved with additional supporting information. Please edit to add details, so that others can confirm that your answer is correct. – About 11/6 at 18:25

Recommended topics

Hot tags