diff --git a/superset-embedded-sdk/README.md b/superset-embedded-sdk/README.md index 5ffd1f9735671..93b0aa4c09e63 100644 --- a/superset-embedded-sdk/README.md +++ b/superset-embedded-sdk/README.md @@ -40,6 +40,7 @@ embedDashboard({ 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) }); ``` diff --git a/superset-embedded-sdk/package.json b/superset-embedded-sdk/package.json index fa426bb9efd4f..848e72a91ff91 100644 --- a/superset-embedded-sdk/package.json +++ b/superset-embedded-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@superset-ui/embedded-sdk", - "version": "0.1.0-alpha.3", + "version": "0.1.0-alpha.4", "description": "SDK for embedding resources from Superset into your own application", "access": "public", "keywords": [ diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index a1cd1007c2107..ad4fa3c8d59b7 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -29,6 +29,12 @@ import { Switchboard } from '@superset-ui/switchboard'; */ export type GuestTokenFetchFn = () => Promise; +export type UiConfigType = { + hideTitle?: boolean + hideTab?: boolean + hideChartControls?: boolean +} + export type EmbedDashboardParams = { /** The id provided by the embed configuration UI in Superset */ id: string @@ -38,6 +44,8 @@ export type EmbedDashboardParams = { mountPoint: HTMLElement /** A function to fetch a guest token from the Host App's backend server */ fetchGuestToken: GuestTokenFetchFn + /** The dashboard UI config: hideTitle, hideTab, hideChartControls **/ + dashboardUiConfig?: UiConfigType /** Are we in debug mode? */ debug?: boolean } @@ -59,6 +67,7 @@ export async function embedDashboard({ supersetDomain, mountPoint, fetchGuestToken, + dashboardUiConfig, debug = false }: EmbedDashboardParams): Promise { function log(...info: unknown[]) { @@ -69,9 +78,26 @@ export async function embedDashboard({ log('embedding'); + function calculateConfig() { + let configNumber = 0 + if(dashboardUiConfig) { + if(dashboardUiConfig.hideTitle) { + configNumber += 1 + } + if(dashboardUiConfig.hideTab) { + configNumber += 2 + } + if(dashboardUiConfig.hideChartControls) { + configNumber += 8 + } + } + return configNumber + } + async function mountIframe(): Promise { return new Promise(resolve => { const iframe = document.createElement('iframe'); + const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : "" // setup the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work @@ -103,7 +129,7 @@ export async function embedDashboard({ resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug })); }); - iframe.src = `${supersetDomain}/dashboard/${id}/embedded`; + iframe.src = `${supersetDomain}/dashboard/${id}/embedded${dashboardConfig}`; mountPoint.replaceChildren(iframe); log('placed the iframe') });