Provide option to set visibility of template variables in kiosk mode

[tktr]

Release v5.3 introduced a breaking change making template variables invisible in Kiosk mode (#13025).

In our setup, we're exposing dashboards through a third party application. In the past, kiosk mode came in handy for this purpose hiding navbars which are needless in this case. However, with the current releases > 5.3, those exposed dashboards are rendered unusable as users are no longer able to change the variables.

Apart from that, as it was already pointed out in #7691, it might be sometimes preferred to have a visual context of the graphs shown in the current view.

That being said, I can understand that the use cases for kiosk mode are diverse and it's difficult to cover them all. But wouldn't it make sense to have another option allowing to set the visibility of variables?

[torkelo]

Hard to have options for every possible scenario and use case.

Closing this for now but we other can upvote this and we can reopen if there is a large demand for this.

[deckn]

This breaking change is indeed quite annoying. For a 24/7 view, you often need the visual context that the variables provide. Wouldn't it be a valid option to add a setting parameter, while creating the variable, if it should be displayed in tv and/or kiosk mode? In my opinion, this could be a very flexible solution, which should cover, in combination of the tv and kiosk mode, most of the possible scenarios.

The FR #7691, which seems to me to be the initial request for this change, was for a specific scenario, for which a workaround already exists

I know that we can set the variable values through the URL but having it in the GUI is more user friendly.

In my opinion this not a valid argument to introduce a breaking change. An while reading your own comments, I guess you had the same feeling:

so new breaking change of kiosk mode (to hide submenu (ie variables)), would implement this FR #7691 I don't like introducing a breaking change, really hard to judge the impact this breaking change will have.

However I also understand that you don't want to reopen the same topic over and over again.

[Paul-Reed]

I also would like to see the submenu visible in kiosk node, not only for the template variables, but also for Dashboard Links which 'users' can use to navigate between different dashboards.

Currently for this reason, I am unable to use kiosk node which is a shame as it's a nice feature...

[FunDeckHermit]

For all who are affected by this, I found/made a workaround to keep things functional.

1. Make a dashboard with a variable (eg. foo) using a query
2. Insert a Table Panel with exactly the same query
3. Table Panel Settings -> Visualisation -> Column Styles -> Link -> Url: /d/<dashboard_giberisch>/${__cell_0}?var-foo=${__cell_0}&kiosk=tv
4. Make sure to insert a variable between the last / and ?
5. (optional) Create a Text Panel with the variable $foo for feedback about the active variable.

This might not work for your data-source and multiple-selections.

[nitinguptadr-dori]

We release dashboards to customers in kiosk mode - but now there is no way to have them select from a pull down menu that we used to expose via variables. Thus the user cannot choose different options which would refresh various charts.

[voyzark]

Any update on this? This seems like the most common use case you just randomly chose to destroy

[phxnsharp]

We also would like to embed Grafana inside another app using an iframe. Inside the iframe we would like variables and time controls, but nothing else. No ability to edit, switch dashboards, change view mode, etc. Thank you!

[breu]

In my opinion @torkelo https://github.com/grafana/grafana/issues/7691 was the breaking change and removed functionality that existed previously. It looks like others have the same opinion too

[torkelo]

Open for a PR that adds more control over this

[sbstnpl]

We're embedding some dashboards/widgets in kiosk mode as iframe into other sites and therefore it would be great to have the option to use editable variables :)

[xuhrc]

it's too bad that can not have variables in tv mode, maybe we can make this an option in preferences

---

grafana just hide the template variables in the web page. I found a solution for this issue

1. find the grafana.dark/light.xxxxxxxxxxxxxxxx.css
2. append .view-mode--tv .submenu-controls{display: flex} to the end of the two css files

then you'll get template variables shown in tv mode

[nuKs]

2. .view-mode--tv

+1,

also works for kiosk mode: .view-mode--kiosk .submenu-controls{display: flex !important} or .view-mode--kiosk .navbar, .view-mode--kiosk .sidemenu, .view-mode--kiosk .submenu-controls, .view-mode--tv .submenu-controls{display: flex !important}

[gbnj2004]

it's too bad that can not have variables in tv mode, maybe we can make this an option in preferences

grafana just hide the template variables in the web page. I found a solution for this issue

1. find the grafana.dark/light.xxxxxxxxxxxxxxxx.css
2. append .view-mode--tv .submenu-controls{display: flex} to the end of the two css files

then you'll get template variables shown in tv mode

thanks a lot, I find a way to resolve this trouble for a long time, now I can have a good time.

[gbnj2004]

it's too bad that can not have variables in tv mode, maybe we can make this an option in preferences

grafana just hide the template variables in the web page. I found a solution for this issue

1. find the grafana.dark/light.xxxxxxxxxxxxxxxx.css
2. append .view-mode--tv .submenu-controls{display: flex} to the end of the two css files

then you'll get template variables shown in tv mode

希望国内的小伙伴能看到这个解决方案，这个以及楼下的回复都是解决如何在grafana的kiosk模式下自定义隐藏或显示global variable、其他组件的方法。希望百度能爬到这条信息方便国内小伙伴解决烦恼。

[gbnj2004]

share my kiosk config which append to the end of the two css files as what xuhrc said above： .view-mode--kiosk .submenu-controls,.view-mode--kiosk .navbar{display:flex !important} .view-mode--kiosk .navbar-buttons--tv,.view-mode--kiosk .sidemenu,.view-mode--kiosk .navbar-page-btn{display:none !important} .view-mode--kiosk .navbar:before {content:"陕重汽-信息技术部Zabbix监控";font-size:3vw;margin:auto;}

[bob454522]

I found a solution for this issue

1. find the grafana.dark/light.xxxxxxxxxxxxxxxx.css
2. append .view-mode--tv .submenu-controls{display: flex} to the end of the two css files

This is a great mod, thanks for posting! i am making use of this, but for showing VARs dropdown while in KIOSK mode. It should be noted that making this change could (will?) very likely be overwritten by a future update, so it may disappear (and have to be re-modified by end user, post grafana update)

also works for kiosk mode: .view-mode--kiosk .submenu-controls{display: flex !important}

(would be GREAT to have this feature built into grafana, for the update issue referenced above). thanks, LOVE GRAFANA!

[DasDepp]

Hi all, thanks for all the information.

also works for kiosk mode: .view-mode--kiosk .submenu-controls{display: flex !important}

But I also want to show the time range settings in the kisok mode. Would be great if somebody know what I have to change in the .css file.

Thanks!

[DonatoD]

With Grafana 8.0.3 this solution of adding the code at the and of the dark/light css doesn't seem to work anymore. Please Grafana team, add this feature. In the meantime what could be the workaround? Thanks

[jflatby]

Would also like this. Same use case, embedded grafana dashboard in iframe, in which users should not be able to navigate around grafana, but they should be able to change the template variables on the dashboard they are viewing.

Turning off kiosk mode is not a solution because it suddenly looks like you are viewing the entirety of grafana and not one dashboard

The suggested workaround here is not an option for me either, since we run the grafana docker image and can't change the source code.

[DonatoD]

Could you please post an example on what you're getting? at the end what I need is to eliminate the left bar bust still having dashboard links and variables dropdown

[jflatby]

That is basically what I need as well.

I don't really have anything to show you. I just have a normal non-kiosk grafana dashboard with a sidebar and variables, embedded in an