Dashboard sharing: add options to hide menu and dashboard header

[paveew]

What would you like to be added:

Provide options for dashboard share. For example

https://domain/d/directory-name/dashboard-name?orgId=1&refresh=10s&from=1594089258270&to=1594091058270&var-key=value&option-sidemenu=hide&option-dashboardtitle=hide

option-sidemenu=hide means that the page opened with this url will hide the side menu;
option-dashboardtitle=hide means that the page opened with this url will hide the dashboard title;

Why is this needed:

In the case of embedding a grafana monitoring dashboard into an existing monitoring website. I want the embeded pages to look like the original pages of my website. So the left menu, the title, and even the timepicker need to be removed.

[dprokop]

@Alan-LOL thanks for this feature request. We cannot promise anything regarding implementing this, but we are welcoming any contributions from the community. If you want to implement this - we are more than happy to consider adding this to Grafana.

[hshoff]

I want the embeded pages to look like the original pages of my website. So the left menu, the title, and even the timepicker need to be removed.

Have you tried the kiosk view mode for this? example: https://play.grafana.org/d/000000045/big-dashboard?orgId=1&kiosk

[paveew]

@hshoff Thank you! Kiosk view mode solved my problem. And it need some extra work to interact with grafana(for example: change the variables). See https://community.grafana.com/t/interact-with-embedded-dashboards/3408

[paveew]

Can we add some apis for interacting with an embedding grafana dashboard which is under kiosk view mode, such as

window.addEventListener("message", (event) => {
  if(!event || !event.data) {
    return;
  }
  switch(event.data.action) {
    case 'variablesUpdate':
        // verify and update variables...
    // other cases...
  }
}, false);

And then the parent page can update the varibe in this simple way

const message= {
  action: 'variablesUpdate',
  value: [{
    name: 'variableName1',
    value: 'variableValues1'
  }, {
    name: 'variableName2',
    value: 'variableValues2'
  }]
}
document.getElementById("grafana-iframe").contentWindow.postMessage(message, '*')

I'm not sure if it's a good idea.

[Volpe95]

If you don't want the user to edit the view mode depending on his permission , I had the same issue and solved it by dynamically editing the index.html with a js script , the HTML file can be located in public/views directory in your grafana folder.

[bhumisha]

Hi, I am also facing similar issue, I am embedding https://play.grafana.org/d/000000045/big-dashboard?orgId=1&kiosk to my tooltip popup, But I need to show time series options and other criteria..
I just want to hide title and Icon or back button.

Kiosk is hiding everything and TV mode is showing all. https://grafana.com/docs/grafana/latest/dashboards/playlist/#start-a-playlist.

Any help please

[Betula-L]

Maybe we can add a "dashboard mode" here for embeding situation which only keep time selector and dashboard.

[torkelo]

This already exists for single panels (the embedd tab in share modal) special route for single panels

[Seraf]

Hello, we're in the same situation.
We'd like to embed a Grafana Dashboard and not only a single panel. We are able to generate it programmatically with Json, but we'd like to render this whole dashboard showing exactly the same things as described above.

It would be really nice to display a dashboard already configured rather than "creating" the same dashboard again by stacking all single panels individually 😅
Definitely looking for this feature or giving some inputs about it ! =)