• Dashboards & Visualizations

    Is there a way to implement multiple tabs/pages for a single dashboard?

    sizemorejm
    Explorer

    Is there a way to implement multiple tabs/pages for a single dashboard?

    Labels (1)
    0 Karma
    1 Solution

    danspav
    SplunkTrust
    SplunkTrust

    Hi @sizemorejm,

     

    It's good to hear you're swapping between tabs - the next step is to update your searches.

    At the moment, all searches are running when the dashboard loads. What we can do is update the searches so that they only run when their tab is active. That way we only run the searches the user wants.

    To do that, update your search code so that they also have depends="$show_tab_X$":

     <row depends="$show_tab_1$">
        <panel>
          <title>Tab 1</title>
          <table>
            <search depends="$show_tab_1$">
              <query>| makeresults | eval title="Tab 1"</query>
            </search>
          </table>
        </panel>
      </row>
      <row depends="$show_tab_2$">
        <panel>
          <title>Tab 2</title>
          <table>
            <search depends="$show_tab_2$">
              <query>| makeresults | eval title="Tab 2"</query>
            </search>
          </table>
        </panel>
      </row>

     

    Once the search is run, we want to keep the results, so when users click back to the tab the results are still there. 

     

    Cheers,
    Daniel

    View solution in original post

    0 Karma

    gcusello
    SplunkTrust
    SplunkTrust

    Hi @sizemorejm ,

    good for you, see next time!

    Ciao and happy splunking

    Giuseppe

    P.S.: Karma Points are appreciated by all the contributors 😉

    0 Karma

    gcusello
    SplunkTrust
    SplunkTrust

    Hi @sizemorejm ,

    install the Splunk Dashboard Examples App (https://splunkbase.splunk.com/app/1603) and see the Link Switcher dashboard, is what you're searching.

    Ciao.

    Giuseppe

    0 Karma

    danspav
    SplunkTrust
    SplunkTrust

    Hi @sizemorejm,

    On Simple XML dashboards (aka Classic Dashboards) you can do that by using tokens.

    When you set a token, you can make panels or rows show, or make searches run.

    To make it show when the token exists use this:

    <row depends="$token$"> 

    There's more info on docs here:

    https://docs.splunk.com/Documentation/SplunkCloud/9.0.2303/Viz/tokens#Access_tokens_to_show_or_hide_...

     

    Here's a sample dashboard with 4 tabs that show based on which button you click:

    <form version="1.1">
      <label>Tabbed Dashboard</label>
      <description>https://community.splunk.com/t5/Dashboards-Visualizations/Splunk-Dashboard/m-p/646374#M52808</description>
      <fieldset submitButton="false">
        <input type="link" token="page" searchWhenChanged="true" id="tab_menu">
          <label></label>
          <choice value="Tab 1">Tab 1</choice>
          <choice value="Tab 2">Tab 2</choice>
          <choice value="Tab 3">Tab 3</choice>
          <choice value="Tab 4">Tab 4</choice>
          <change>
            <condition value="Tab 1"><set token="show_tab_1">true</set><unset token="show_tab_2"></unset><unset token="show_tab_3"></unset><unset token="show_tab_4"></unset></condition>
            <condition value="Tab 2"><set token="show_tab_2">true</set><unset token="show_tab_1"></unset><unset token="show_tab_3"></unset><unset token="show_tab_4"></unset></condition>
            <condition value="Tab 3"><set token="show_tab_3">true</set><unset token="show_tab_1"></unset><unset token="show_tab_2"></unset><unset token="show_tab_4"></unset></condition>
            <condition value="Tab 4"><set token="show_tab_4">true</set><unset token="show_tab_1"></unset><unset token="show_tab_2"></unset><unset token="show_tab_3"></unset></condition>
          </change>
        </input>
      </fieldset>
      <row depends="$show_tab_1$">
        <panel>
          <title>Tab 1</title>
           <table>
            <search>
              <query>| makeresults
    | eval title="Page 1"</query>
              <earliest>-24h@h</earliest>
              <latest>now</latest>
            </search>
            <option name="drilldown">none</option>
          </table>
        </panel>
        </row>
        <row depends="$show_tab_2$">
        <panel>
          <title>Tab 2</title>
        <table>
            <search>
              <query>| makeresults
    | eval title="Tab 2"</query>
              <earliest>-24h@h</earliest>
              <latest>now</latest>
            </search>
            <option name="drilldown">none</option>
          </table>
        </panel>
        </row>
        <row depends="$show_tab_3$">
        <panel>
          <title>Tab 3</title>
        <table>
            <search>
              <query>| makeresults
    | eval title="Tab 3"</query>
              <earliest>-24h@h</earliest>
              <latest>now</latest>
            </search>
            <option name="drilldown">none</option>
          </table>
        </panel>
        </row>
        <row depends="$show_tab_4$">
        <panel>
          <title>Tab 4</title>
         <table>
            <search>
              <query>| makeresults
    | eval title="Tab 4"</query>
              <earliest>-24h@h</earliest>
              <latest>now</latest>
            </search>
            <option name="drilldown">none</option>
          </table>
          </panel>
      </row>
      <row depends="$CSS_ONLY$"><html><style>
    #tab_menu { width: fit-content!important; }
    div#tab_menu button{
                        height: 38px!important;
                        border: 1px solid #cccccc;
                        min-width: 100px;
                        /* background-color:#ffffff; */
                        width: auto;
                        padding: 10px;
                        margin-right: 8px;
                        color: #333333;
                        height: 55px;
                        border-radius:7px;
                        font-size: 16px;
                        }
    
    div#tab_menu button[aria-checked="true"]{background-color:#006eaa!important;color:white!important;}
      </style></html></row>
    </form>

    danspav_1-1686265314249.png
    Cheers,
    Daniel

    Tags (1)

    sizemorejm
    Explorer

    Hello Daniel,

    Your post was very helpful in solving my issue. I have another question regarding the use of tabs. So now I am able to swap between tabs, but in each tab I am calling different searches for individual tables. Is there a similar way to "unset" the search for a table when the tab is not in use? I am experiencing some lag, I believe.

    Thanks,

    James

    0 Karma

    danspav
    SplunkTrust
    SplunkTrust

    Hi @sizemorejm,

     

    It's good to hear you're swapping between tabs - the next step is to update your searches.

    At the moment, all searches are running when the dashboard loads. What we can do is update the searches so that they only run when their tab is active. That way we only run the searches the user wants.

    To do that, update your search code so that they also have depends="$show_tab_X$":

     <row depends="$show_tab_1$">
        <panel>
          <title>Tab 1</title>
          <table>
            <search depends="$show_tab_1$">
              <query>| makeresults | eval title="Tab 1"</query>
            </search>
          </table>
        </panel>
      </row>
      <row depends="$show_tab_2$">
        <panel>
          <title>Tab 2</title>
          <table>
            <search depends="$show_tab_2$">
              <query>| makeresults | eval title="Tab 2"</query>
            </search>
          </table>
        </panel>
      </row>

     

    Once the search is run, we want to keep the results, so when users click back to the tab the results are still there. 

     

    Cheers,
    Daniel

    0 Karma

    maayan
    Path Finder

    Great solution thank you!

    I added "depends" to my all charts search,  it's loading only the data in the current tab, but when I click on another tab (after the current tab finish to run) error is written in all charts: " Search was not dispatched. To adjust search dispatch settings, edit the dashboard XML"

    Do you know why? 

    thanks,
    Maayan

    0 Karma

    gcusello
    SplunkTrust
    SplunkTrust

    Hi @maayan,

    good for you, see next time!

    Ciao and happy splunking

    Giuseppe

    P.S.: Karma Points are appreciated by all the contributors 😉

    0 Karma

    maayan
    Path Finder

    thanks but you didn't answer 🙂
    what should I do if  I switch between tabs I get the error: "Search was not dispatched. To adjust search dispatch settings, edit the dashboard XML"? 

    0 Karma
    Get Updates on the Splunk Community!

    Take Your Breath Away with Splunk Risk-Based Alerting (RBA)

    WATCH NOW!The Splunk Guide to Risk-Based Alerting is here to empower your SOC like never before. Join Haylee ...

    Industry Solutions for Supply Chain and OT, Amazon Use Cases, Plus More New Articles ...

    Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

    Enterprise Security Content Update (ESCU) | New Releases

    In November, the Splunk Threat Research Team had one release of new security content via the Enterprise ...