Knowledge Drop

Tabbed Dashboard using Liquid HTML

  • 15 June 2021
  • 0 replies
  • 1549 views

Userlevel 4

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>

 

 

Fancy Shmancy Tabs

 

This content is subject to limited support.                

 

 


0 replies

Be the first to reply!

Reply