Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dynamically Styling Embedded Dashboards #32357

Open
Gilks opened this issue Feb 23, 2025 · 1 comment
Open

Dynamically Styling Embedded Dashboards #32357

Gilks opened this issue Feb 23, 2025 · 1 comment
Labels
global:theming Related to theming Superset

Comments

@Gilks
Copy link

Gilks commented Feb 23, 2025

Context

I'm embedding dashboards into my SaaS. My SaaS has a toggle that users can selected that swaps from light to dark mode.

Problem

For security reasons, you cannot interact with an iframe from a different origin. This means you're unable to directly modify the CSS within the embedded iframe. While it is possible to add CSS directly to each dashboard in SuperSet- this is not ideal as it leads to an administrative nightmare.

Question

Is it possible to initialize a dashboard with specific CSS? It would be nice if you could pass in props like this. This would allow the SaaS to dictate what the theme settings should be when the dashboard is loaded:

await embedDashboard({
  id: selectedDashboardData.uuid || selectedDashboardData.id,
  supersetDomain: process.env.REACT_APP_SUPERSET_DOMAIN,
  mountPoint: dashboardRef.current,
  fetchGuestToken: () => supersetToken,
  dashboardUiConfig: {
    hideTitle: true,
    hideTab: true,
    hideChartControls: true,
    cssTemplate: `
      .dashboard {
        background-color: red !important;
      }
    `
  }
});
@dosubot DosuBot
Copy link

dosubot bot commented Feb 23, 2025

Hey there, @Gilks! I'm here to assist with any bugs, questions, and help you become a contributor. Let's tackle this together! 🤖

I found a similar unsolved discussion titled Embedded dashboard does not use parent document preferred color scheme which might be relevant to your situation [1].

Regarding your question, the Superset embedding API does support passing custom UI configuration options when initializing a dashboard, as indicated by a change log entry that mentions adding optional dashboard UI configuration [2]. However, there is no specific mention of passing custom CSS directly through the API.

For injecting custom CSS into dashboards, Superset provides a mechanism through the injectCustomCss function. This function allows you to apply custom CSS to dashboards by creating a <style> element and appending it to the document's <head>. This approach can be used to dynamically manage styles, although it might require some additional handling to work with embedded dashboards [3][4].

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot dosubot bot added the global:theming Related to theming Superset label Feb 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
global:theming Related to theming Superset
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Gilks