Tabbed Dashboard using Liquid HTML

Knowledge Drop

Last tested: Mar 1, 2021

The code snippets below would go in a text tile on your dashboard. The idea is you can break up larger dashboards into multiple “Tabs” while keeping content in one place from the end user’s perspective. The end user sees a clickable navigation bar on your dashboard. 

Basic Version:

<hr>

<div type="button" class="btn btn-primary btn-lg btn-block">Text goes here</div>

<a href="path to next 'tab' in the dash here" class="btn btn-primary">Text goes here</a>

#Add as many new <a href ... lines as you like for more tabs!

Fancier Version:

<hr>

<div class="vis-single-value">

<div class="btn-group btn-group-sm">

<a type="button" class="btn btn-primary btn-lg btn-block">Text goes here</a>

<a href="path to next 'tab' in the dash here" class="btn btn-primary">Text goes here</a>

#Add as many new <a href ... lines as you like for more tabs!

</div>

</div>

Even better example, works on dashboard-next:

<div style="border-bottom: solid 1px #4285F4;">

<nav style="font-size: 18px; padding: 5px 10px 0 10px; height: 60px">

<a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="/dashboards-next/someid"> Tab1 Name </a>

<a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="/dashboards-next/someid2" > Tab2 Name</a>

<a style="padding: 5px 15px; border-top: solid 1px #4285F4; border-left: solid 1px #4285F4; border-right: solid 1px #4285F4; border-radius: 5px 5px 0 0; float: left; line-height: 40px; font-weight: bold; background-color: #eaf1fe;" href="#"> Current Tab Name </a>

</nav>

</div>
d54794f1-c2b1-4efa-ac4d-89a48a3f331e.png
Fancy Shmancy Tabs

This content is subject to limited support.                

Version history
Last update:
‎06-14-2021 06:17 PM
Updated by: