diff --git a/superset-embedded-sdk/README.md b/superset-embedded-sdk/README.md index 93b0aa4c09e6..7e05d94a6ce1 100644 --- a/superset-embedded-sdk/README.md +++ b/superset-embedded-sdk/README.md @@ -40,7 +40,12 @@ 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) + dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional) + hideTitle: true, + filters: { + expanded: true, + } + }, }); ``` diff --git a/superset-embedded-sdk/src/const.ts b/superset-embedded-sdk/src/const.ts index e88797452035..72eba8525d75 100644 --- a/superset-embedded-sdk/src/const.ts +++ b/superset-embedded-sdk/src/const.ts @@ -18,3 +18,7 @@ */ export const IFRAME_COMMS_MESSAGE_TYPE = "__embedded_comms__"; +export const DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY: { [index: string]: any } = { + visible: "show_filters", + expanded: "expand_filters", +} diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index 317195522c88..200acbb587cc 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -17,7 +17,10 @@ * under the License. */ -import { IFRAME_COMMS_MESSAGE_TYPE } from './const'; +import { + DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY, + IFRAME_COMMS_MESSAGE_TYPE +} from './const'; // We can swap this out for the actual switchboard package once it gets published import { Switchboard } from '@superset-ui/switchboard'; @@ -34,6 +37,11 @@ export type UiConfigType = { hideTitle?: boolean hideTab?: boolean hideChartControls?: boolean + filters?: { + [key: string]: boolean | undefined + visible?: boolean + expanded?: boolean + } } export type EmbedDashboardParams = { @@ -45,7 +53,7 @@ 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 **/ + /** The dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded **/ dashboardUiConfig?: UiConfigType /** Are we in debug mode? */ debug?: boolean @@ -99,6 +107,13 @@ export async function embedDashboard({ return new Promise(resolve => { const iframe = document.createElement('iframe'); const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : "" + const filterConfig = dashboardUiConfig?.filters || {} + const filterConfigKeys = Object.keys(filterConfig) + const filterConfigUrlParams = filterConfigKeys.length > 0 + ? "&" + + filterConfigKeys + .map(key => DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key] + '=' + filterConfig[key]).join('&') + : "" // setup the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work @@ -132,7 +147,7 @@ export async function embedDashboard({ resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug })); }); - iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}`; + iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}`; mountPoint.replaceChildren(iframe); log('placed the iframe') });