Dashboards & Visualizations

How can I show/hide panels dynamically with tokens?

surekhasplunk
Communicator

Hi,

I have 3 options to choose from and 3 panels to show/hide depending on the option chosen.
I should be able to choose 1 panel at a time or 2 panels or all the 3 panels
If i use three dropdowns i am able to show or hide as per the above requirement since i have unique token names there its easy to reference in table depends = token.
But how do i achieve this with single checkbox where i get all the 3 options to choose from or radio button or multiselect. As in these cases i have a single token name is there any option i can refer the value of the token something like table depends=token name=A

Thanks

0 Karma
1 Solution

thiagodede
Explorer

You can use the "change" and "condition" on your checkbox XML code to choose with panels to show, but this have a problem for checkbox and multiselect, that is the order the user select the options will change the value of your token.

Using a Radio button is easier, but you will have to write all the options, that in your case are 7 options ( panel1, panel2, panel3, panel 1 and 2, panel1 and 3, panel2 and 3, all panels)

Considering 3 panels with depends on tokens $p1$, $p2$, $p3$, you can create the radio button and for each one use the code to set\unset the token or create the checkbox\multiselect and map all the possible combinations of values.

For 3 panels is easy, but if the number os panels increase, this can be problematic.

Code for the Radio buttons :

    <input type="radio" token="radio">
      <label>Radio</label>
      <choice value="p1">p1</choice>
      <choice value="p2">p2</choice>
      <choice value="p3">p3</choice>
      <choice value="p1 p2">p1 and p2</choice>
      <choice value="p1 p3">p1 and p3</choice>
      <choice value="p2 p3">p2 and p3</choice>
      <choice value="p1 p2 p3">All</choice>

Code for the Checkbox :

    <input type="checkbox" token="checkbox">
      <label>Painel:</label>
      <choice value="p1">Panel1</choice>
      <choice value="p2">Panel2</choice>
      <choice value="p3">Panel3</choice>
      <prefix/>
      <suffix/>
      <valueSuffix></valueSuffix>

Code for the change and set\unset :

      <change>
        <condition match="$checkbox$==&quot;&quot;">
          <unset token="p1"></unset>
          <unset token="p2"></unset>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1&quot;">
          <set token="p1">1</set>
          <unset token="p2"></unset>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p2&quot;">
          <set token="p2">1</set>
          <unset token="p1"></unset>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p3&quot;">
          <set token="p3">1</set>
          <unset token="p1"></unset>
          <unset token="p2"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1 p2&quot; OR $checkbox$==&quot;p2 p1&quot;">
          <set token="p1">1</set>
          <set token="p2">1</set>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1 p3&quot; OR $checkbox$==&quot;p3 p1&quot;">
          <set token="p1">1</set>
          <set token="p3">1</set>
          <unset token="p2"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p2 p3&quot; OR $checkbox$==&quot;p3 p2&quot;">
          <set token="p2">1</set>
          <set token="p3">1</set>
          <unset token="p1"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1 p2 p3&quot; OR $checkbox$==&quot;p1 p3 p2&quot; OR $checkbox$==&quot;p2 p1 p3&quot; OR $checkbox$==&quot;p2 p3 p1&quot; OR $checkbox$==&quot;p3 p1 p2&quot; OR $checkbox$==&quot;p3 p2 p1&quot;">
          <set token="p1">1</set>
          <set token="p2">1</set>
          <set token="p3">1</set>
        </condition>
      </change>

View solution in original post

thiagodede
Explorer

You can use the "change" and "condition" on your checkbox XML code to choose with panels to show, but this have a problem for checkbox and multiselect, that is the order the user select the options will change the value of your token.

Using a Radio button is easier, but you will have to write all the options, that in your case are 7 options ( panel1, panel2, panel3, panel 1 and 2, panel1 and 3, panel2 and 3, all panels)

Considering 3 panels with depends on tokens $p1$, $p2$, $p3$, you can create the radio button and for each one use the code to set\unset the token or create the checkbox\multiselect and map all the possible combinations of values.

For 3 panels is easy, but if the number os panels increase, this can be problematic.

Code for the Radio buttons :

    <input type="radio" token="radio">
      <label>Radio</label>
      <choice value="p1">p1</choice>
      <choice value="p2">p2</choice>
      <choice value="p3">p3</choice>
      <choice value="p1 p2">p1 and p2</choice>
      <choice value="p1 p3">p1 and p3</choice>
      <choice value="p2 p3">p2 and p3</choice>
      <choice value="p1 p2 p3">All</choice>

Code for the Checkbox :

    <input type="checkbox" token="checkbox">
      <label>Painel:</label>
      <choice value="p1">Panel1</choice>
      <choice value="p2">Panel2</choice>
      <choice value="p3">Panel3</choice>
      <prefix/>
      <suffix/>
      <valueSuffix></valueSuffix>

Code for the change and set\unset :

      <change>
        <condition match="$checkbox$==&quot;&quot;">
          <unset token="p1"></unset>
          <unset token="p2"></unset>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1&quot;">
          <set token="p1">1</set>
          <unset token="p2"></unset>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p2&quot;">
          <set token="p2">1</set>
          <unset token="p1"></unset>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p3&quot;">
          <set token="p3">1</set>
          <unset token="p1"></unset>
          <unset token="p2"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1 p2&quot; OR $checkbox$==&quot;p2 p1&quot;">
          <set token="p1">1</set>
          <set token="p2">1</set>
          <unset token="p3"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1 p3&quot; OR $checkbox$==&quot;p3 p1&quot;">
          <set token="p1">1</set>
          <set token="p3">1</set>
          <unset token="p2"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p2 p3&quot; OR $checkbox$==&quot;p3 p2&quot;">
          <set token="p2">1</set>
          <set token="p3">1</set>
          <unset token="p1"></unset>
        </condition>
        <condition match="$checkbox$==&quot;p1 p2 p3&quot; OR $checkbox$==&quot;p1 p3 p2&quot; OR $checkbox$==&quot;p2 p1 p3&quot; OR $checkbox$==&quot;p2 p3 p1&quot; OR $checkbox$==&quot;p3 p1 p2&quot; OR $checkbox$==&quot;p3 p2 p1&quot;">
          <set token="p1">1</set>
          <set token="p2">1</set>
          <set token="p3">1</set>
        </condition>
      </change>

venu_s
New Member

I have below sample app. This is to hide or show a pane. This is not working. Can anyone help to find the problem?
I used sample code from here to test my usecase.
http://docs.splunk.com/Documentation/Splunk/6.3.3/Viz/PanelreferenceforSimplifiedXML#condition_.28in...

Use tokens with conditional input choices

<input type="dropdown" token="period_tok">
  <label>Select a time range</label>
  <choice value="-24h@h">Last 24 Hours</choice>
  <choice value="-7d@h">Last 7 Days</choice>
  <choice value="-30d@h">Last 30 Days</choice>
  <default>-24h@h</default>
  <!-- set condition based on the label defined by <choice> -->
  <!-- Within each condition, specify a custom label for display -->
  <!-- Capture the selected value in the token, earliest_tok -->
  <change>
    <condition>
      <unset token="show_panel_prg_select"></unset>
    </condition>
    <condition label="Last 24 Hours">
      <set token="date_label">Yesterday</set>
      <set token="earliest_tok">$value$</set>
      <set token="show_panel_prg_select">1</set>
    </condition>
    <condition label="Last 7 Days">
      <set token="date_label">Last week</set>
      <set token="earliest_tok">$value$</set>
    </condition>
    <condition label="Last 30 Days">
      <set token="date_label">Last month</set>
      <set token="earliest_tok">$value$</set>
    </condition>
  </change>
</input>



  <title>Conditional Inputs</title>
  <chart>
    <!-- Display selected label in the title -->
    <title>$date_label$</title>
    <search>
      <query>index = _internal | timechart count by sourcetype</query>
      <!-- use the value of earliest_tok -->
      <!-- to set the time range         -->
      <earliest>$earliest_tok$</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.axisY.scale">log</option>
    <option name="charting.axisTitleX.text">Time periods</option>
    <option name="charting.axisTitleY.text">Events</option>
  </chart>
</panel>


 <panel depends="$show_panel_prg_select$">
  <table>
    <search>
     <query>index = _internal | timechart count by sourcetype</query>
      <earliest>$earliest_tok$</earliest>
      <latest>now</latest>
    </search>
    <option name="count">100</option>
    <option name="dataOverlayMode">none</option>
    <option name="drilldown">none</option>
    <option name="percentagesRow">false</option>
    <option name="rowNumbers">false</option>
    <option name="totalsRow">false</option>
    <option name="wrap">true</option>
  </table>
</panel>
0 Karma

surekhasplunk
Communicator

Thanks a lot @thiagodede,

You are the best .

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...