Dashboard Tabs Preserving Filter Selection

If you’re migrating to Omni from a product that has tabbed dashboards, you may have wished you could make a filter selection on one tab and apply those same filters across other tabs. You can! Using our markdown visualization, you can make each tab link dynamic, carrying all of it’s filter arguments to the next.

Watch this short video to see it in action:

Dashboard A (Dashboard) — Omni Analytics - 28 January 2025 - Watch Video

Walkthrough with code samples:

Step 1) Have 2 or more dashboards with a common filter (or filters) and get their urls

collect the location and the url arguments, but not their json values

in the case of multiple filters, you may want to save them in a text editor like this:

myinstance.omniapp.co/dashboards/mydashboard1?account.billing_state=XXX&account.billling_zip=YYY
myinstance.omniapp.co/dashboards/mydashboard2?account.billing_state=XXX&account.billling_zip=YYY
Step 2) Set up a 'stub query' in the workbook

Our markdown viz does expect a query, so create something simple that doesn’t do anything. In my case, I clicked +add field and selected 1. There are many ways of doing this / just want to satisfy having a field on the tab so we can proceed to step 2. The data here will not be used.

Step 3) Apply the markdown and place the urls and apply special mustache arg

On your stub query, click chart and then the markdown viz as shown:


You can start with this html, replacing the hrefs with your dashboards and changing the {{filters.account.billing_state.json}} to your field which the dashboard filter will be applied upon.

<style>
.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }
.cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; }
.cur-nav-fix .tabs li a { 
   background: -webkit-linear-gradient(top, white, #eee); 
   background: -moz-linear-gradient(top, white, #eee); 
   background: -ms-linear-gradient(top, white, #eee); 
   background: -o-linear-gradient(top, white, #eee); 
}
#box-four { z-index: 1;}
#box-four:target .tabs, #box-five:target .tabs, #box-six:target .tabs { z-index: 3; }
.cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; }
</style>
<div id="box-four">
<ul class="tabs group">
    <li><a href='https://russ.playground.exploreomni.dev/dashboards/_a?f--account.billing_state={{filters.account.billing_state.json}}'>Dashboard A</a></li>
    <li><a href='https://russ.playground.exploreomni.dev/dashboards/_b?f--account.billing_state={{filters.account.billing_state.json}}'>Dashboard B</a></li>
</ul>
</div>
Step 4) copy or import the query to all the other dashboards in your tab scheme

You can either do the same procedure on each dashboard and copy paste the markdown, or use our “import tab” functionality which you can see the process for in our docs Link to tab importing walkthrough

1 Like