This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Privacy Policy. Click Preferences to customize your cookie settings.
Accept
Reject
Preferences
Log in to ask a question
Log in to ask a question

Need help creating a tabbed dashboard

Posted on 03-08-2024 09:38 AM
savordelli
Bronze 1
Bronze 1
Reply posted on --/--/---- --:-- AM

Hi, I am trying to create a dashboard for my product team to keep up with their metrics. Each P.O has their own metrics, So i wanted to separate the dashboard into tabs for each person.

I saw the posts below, however, I could not manage to do what I am trying to do. From my HTML knowledge it seems that those options allow me to navigate from html tag ids, however, they'll all be loaded into the same screen. That meaning when I open up the dashboard, all of them will be there, correct?

I've tried embedding the dashboards inside the MD tile, however it doesn't seem to create the Iframe at all.

Can someone explain to me what is needed to acomplish this?

```
<body> <div style="text-align:center; margin-bottom:20px;"> <button onclick="document.getElementById('iframe').src='embedlink';" style="padding:10px; margin-right:10px; font-size:16px;">tab 1</button> <button onclick="document.getElementById('iframe').src='embed link';" style="padding:10px; font-size:16px;">2</button> </div> <iframe id="iframe" style="width:100%; height:600px; border:none;"></iframe> </body>
````

https://www.googlecloudcommunity.com/gc/Exploring-Curating-Data/New-dashboards-beta-HTML-options/td-...

https://www.googlecloudcommunity.com/gc/Technical-Tips-Tricks/Tabbed-Dashboard-using-Liquid-HTML/ta-...

0 1 459
Topic Labels
0 Likes
1 REPLY 1

Posted on --/--/---- --:-- AM
dsimeonova
Bronze 5
Bronze 5
Reply posted on --/--/---- --:-- AM

Hey @savordelli !

The html accepted inside of the tiles is a little bit limited. 
In order to achieve the tabs menu inside of a dashboard it’s kind of a trick to simulate tab menu for the business user. But actually what it’s happening on the backend is that you will need to build several dashboards, include the tab html definition from the first link that you’ve shared (copy paste it inside of a text tile in the Body section), and finally put the proper links to each dashboard. 
It looks like you stay in the same screen but actually you are moving from one dashboard to another. You will need to include the same html code in each one of the dashboards that you’ve included as an option in the menu.

Additionally, some of the menus has a custom way of circle the titles inside of the menu, depending on which dashboard you are looking at. You will need to tune the code in order to circle the current dashboard. That would be the minor change.

I would suggest to copy the exact html code from the Looker article and substitute the links. It’s a good starting point changing a little bit the colours and the links.

Hope it’s clear. If not, please come back and share some examples of what exactly you would like to achieve.

And of course, please share if this helped you 🙂

0 Likes
Top Labels in this Space