Dashboards & Visualizations

Why am I unable to show/hide a panel based on drop-down selection with my current Simple XML?

garinapavan
Explorer

Hi

I'm trying to show the panel based on the choice and it is not working. Any help is appreciated .

    <form>
      <label>based on choice </label>
      <fieldset submitButton="false">
        <input type="time" token="field1">
          <label></label>
          <default>
            <earliest>-60m@m</earliest>
            <latest>now</latest>
          </default>
        </input>
        <input type="dropdown" token="prod" searchWhenChanged="true">
          <label>Select a System</label>
          <choice value="*">All</choice>
          <choice value="SOA">SOA</choice>
          <choice value="OSB">OSB</choice>
        </input>
      </fieldset>
      <row>
        <panel depends="$panel_show$">
          <chart>
            <title>SOA Request Count</title>
            <search>
              <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
              <earliest>-4h@m</earliest>
              <latest>now</latest>
            <change>
                  <condition match="match(value,&quot;SOA&quot;)">
                   <set token="panel_show">true</set>
                 </condition>
                 <condition>
                   <unset token="panel_show"></unset>
                 </condition>
              </change>
            </search>
            <option name="charting.legend.placement">right</option>
            <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
            <option name="charting.layout.splitSeries">0</option>
            <option name="charting.drilldown">all</option>
            <option name="charting.chart.style">shiny</option>
            <option name="charting.chart.stackMode">default</option>
            <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
            <option name="charting.chart.nullValueMode">gaps</option>
            <option name="charting.chart.bubbleSizeBy">area</option>
            <option name="charting.chart.bubbleMinimumSize">10</option>
            <option name="charting.chart.bubbleMaximumSize">50</option>
            <option name="charting.chart">column</option>
            <option name="charting.axisY2.scale">inherit</option>
            <option name="charting.axisY2.enabled">false</option>
            <option name="charting.axisY.scale">linear</option>
            <option name="charting.axisX.scale">linear</option>
            <option name="charting.axisTitleY2.visibility">visible</option>
            <option name="charting.axisTitleY.visibility">visible</option>
            <option name="charting.axisTitleX.visibility">visible</option>
            <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
            <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
          </chart>
        </panel>
      </row>
     <row>
    <panel depends="$panel_show$">
      <chart>
        <title>OSB Request Count</title>
        <search>
          <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <change>
              <condition match="match(value,&quot;OSB&quot;)">
               <set token="panel_show">true</set>
             </condition>
             <condition>
               <unset token="panel_show"></unset>
             </condition>
          </change>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">false</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">bar</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
      </chart>
    </panel>
  </row>
    </form>
1 Solution

somesoni2
SplunkTrust
SplunkTrust

The location of change tag is wrong here. It should be under fieldset-dropdown. Try this

<form>
       <label>based on choice </label>
       <fieldset submitButton="false">
         <input type="time" token="field1">
           <label></label>
           <default>
             <earliest>-60m@m</earliest>
             <latest>now</latest>
           </default>
         </input>
         <input type="dropdown" token="prod" searchWhenChanged="true">
           <label>Select a System</label>
           <choice value="*">All</choice>
           <choice value="SOA">SOA</choice>
           <choice value="OSB">OSB</choice>
            <change>
           <condition label="SOA">
            <set token="show_soa">y</set>
            <unset token="show_osb"></unset>
          </condition>
          <condition label="OSB">
            <set token="show_osb">y</set>
            <unset token="show_soa"></unset>
           </condition>      
          <condition label="All">
            <set token="show_soa">y</set>
            <set token="show_osb">y</set>
           </condition> 
          </change>
         </input>
       </fieldset>
       <row>
         <panel depends="$show_soa$">
           <chart>
             <title>SOA Request Count</title>
             <search>
               <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
               <earliest>-4h@m</earliest>
               <latest>now</latest>            
             </search>
             <option name="charting.legend.placement">right</option>
             <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
             <option name="charting.layout.splitSeries">0</option>
             <option name="charting.drilldown">all</option>
             <option name="charting.chart.style">shiny</option>
             <option name="charting.chart.stackMode">default</option>
             <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
             <option name="charting.chart.nullValueMode">gaps</option>
             <option name="charting.chart.bubbleSizeBy">area</option>
             <option name="charting.chart.bubbleMinimumSize">10</option>
             <option name="charting.chart.bubbleMaximumSize">50</option>
             <option name="charting.chart">column</option>
             <option name="charting.axisY2.scale">inherit</option>
             <option name="charting.axisY2.enabled">false</option>
             <option name="charting.axisY.scale">linear</option>
             <option name="charting.axisX.scale">linear</option>
             <option name="charting.axisTitleY2.visibility">visible</option>
             <option name="charting.axisTitleY.visibility">visible</option>
             <option name="charting.axisTitleX.visibility">visible</option>
             <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
             <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
           </chart>
         </panel>
       </row>
      <row>
     <panel depends="$show_osb$">
       <chart>
         <title>OSB Request Count</title>
         <search>
           <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>          
         </search>
         <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
         <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
         <option name="charting.axisTitleX.visibility">visible</option>
         <option name="charting.axisTitleY.visibility">visible</option>
         <option name="charting.axisTitleY2.visibility">visible</option>
         <option name="charting.axisX.scale">linear</option>
         <option name="charting.axisY.scale">linear</option>
         <option name="charting.axisY2.enabled">false</option>
         <option name="charting.axisY2.scale">inherit</option>
         <option name="charting.chart">bar</option>
         <option name="charting.chart.bubbleMaximumSize">50</option>
         <option name="charting.chart.bubbleMinimumSize">10</option>
         <option name="charting.chart.bubbleSizeBy">area</option>
         <option name="charting.chart.nullValueMode">gaps</option>
         <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
         <option name="charting.chart.stackMode">default</option>
         <option name="charting.chart.style">shiny</option>
         <option name="charting.drilldown">all</option>
         <option name="charting.layout.splitSeries">0</option>
         <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
         <option name="charting.legend.placement">right</option>
       </chart>
     </panel>
   </row>
     </form>

View solution in original post

somesoni2
SplunkTrust
SplunkTrust

The location of change tag is wrong here. It should be under fieldset-dropdown. Try this

<form>
       <label>based on choice </label>
       <fieldset submitButton="false">
         <input type="time" token="field1">
           <label></label>
           <default>
             <earliest>-60m@m</earliest>
             <latest>now</latest>
           </default>
         </input>
         <input type="dropdown" token="prod" searchWhenChanged="true">
           <label>Select a System</label>
           <choice value="*">All</choice>
           <choice value="SOA">SOA</choice>
           <choice value="OSB">OSB</choice>
            <change>
           <condition label="SOA">
            <set token="show_soa">y</set>
            <unset token="show_osb"></unset>
          </condition>
          <condition label="OSB">
            <set token="show_osb">y</set>
            <unset token="show_soa"></unset>
           </condition>      
          <condition label="All">
            <set token="show_soa">y</set>
            <set token="show_osb">y</set>
           </condition> 
          </change>
         </input>
       </fieldset>
       <row>
         <panel depends="$show_soa$">
           <chart>
             <title>SOA Request Count</title>
             <search>
               <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
               <earliest>-4h@m</earliest>
               <latest>now</latest>            
             </search>
             <option name="charting.legend.placement">right</option>
             <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
             <option name="charting.layout.splitSeries">0</option>
             <option name="charting.drilldown">all</option>
             <option name="charting.chart.style">shiny</option>
             <option name="charting.chart.stackMode">default</option>
             <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
             <option name="charting.chart.nullValueMode">gaps</option>
             <option name="charting.chart.bubbleSizeBy">area</option>
             <option name="charting.chart.bubbleMinimumSize">10</option>
             <option name="charting.chart.bubbleMaximumSize">50</option>
             <option name="charting.chart">column</option>
             <option name="charting.axisY2.scale">inherit</option>
             <option name="charting.axisY2.enabled">false</option>
             <option name="charting.axisY.scale">linear</option>
             <option name="charting.axisX.scale">linear</option>
             <option name="charting.axisTitleY2.visibility">visible</option>
             <option name="charting.axisTitleY.visibility">visible</option>
             <option name="charting.axisTitleX.visibility">visible</option>
             <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
             <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
           </chart>
         </panel>
       </row>
      <row>
     <panel depends="$show_osb$">
       <chart>
         <title>OSB Request Count</title>
         <search>
           <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>          
         </search>
         <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
         <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
         <option name="charting.axisTitleX.visibility">visible</option>
         <option name="charting.axisTitleY.visibility">visible</option>
         <option name="charting.axisTitleY2.visibility">visible</option>
         <option name="charting.axisX.scale">linear</option>
         <option name="charting.axisY.scale">linear</option>
         <option name="charting.axisY2.enabled">false</option>
         <option name="charting.axisY2.scale">inherit</option>
         <option name="charting.chart">bar</option>
         <option name="charting.chart.bubbleMaximumSize">50</option>
         <option name="charting.chart.bubbleMinimumSize">10</option>
         <option name="charting.chart.bubbleSizeBy">area</option>
         <option name="charting.chart.nullValueMode">gaps</option>
         <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
         <option name="charting.chart.stackMode">default</option>
         <option name="charting.chart.style">shiny</option>
         <option name="charting.drilldown">all</option>
         <option name="charting.layout.splitSeries">0</option>
         <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
         <option name="charting.legend.placement">right</option>
       </chart>
     </panel>
   </row>
     </form>

garinapavan
Explorer

Thank You for response !! That worked only when there is only one panel for one choice . But lets say i have 2 panels which fall under same category , it is not working

    <label>based on choice </label>
    <fieldset submitButton="false">
      <input type="time" token="field1">
        <label></label>
        <default>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="prod" searchWhenChanged="true">
        <label>Select a System</label>
        <choice value="*">All</choice>
        <choice value="SOA">SOA</choice>
        <choice value="OSB">OSB</choice>
         <change>
        <condition label="SOA">
         <set token="show_soa">y</set>
         <unset token="show_osb"></unset>
       </condition>
       <condition label="OSB">
         <set token="show_osb">y</set>
         <unset token="show_soa"></unset>
        </condition>      
       <condition label="All">
         <set token="show_soa">y</set>
         <set token="show_osb">y</set>
        </condition> 
       </change>
      </input>
    </fieldset>
    <row>
      <panel depends="$show_soa$">
        <chart>
          <title>SOA </title>
          <search>
            <query>host=ghifsource="/access.log*"  | timechart span=1hr count by host</query>
            <earliest>-4h@m</earliest>
            <latest>now</latest>            
          </search>
          <option name="charting.legend.placement">right</option>
          <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
          <option name="charting.layout.splitSeries">0</option>
          <option name="charting.drilldown">all</option>
          <option name="charting.chart.style">shiny</option>
          <option name="charting.chart.stackMode">default</option>
          <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
          <option name="charting.chart.nullValueMode">gaps</option>
          <option name="charting.chart.bubbleSizeBy">area</option>
          <option name="charting.chart.bubbleMinimumSize">10</option>
          <option name="charting.chart.bubbleMaximumSize">50</option>
          <option name="charting.chart">column</option>
          <option name="charting.axisY2.scale">inherit</option>
          <option name="charting.axisY2.enabled">false</option>
          <option name="charting.axisY.scale">linear</option>
          <option name="charting.axisX.scale">linear</option>
          <option name="charting.axisTitleY2.visibility">visible</option>
          <option name="charting.axisTitleY.visibility">visible</option>
          <option name="charting.axisTitleX.visibility">visible</option>
          <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
          <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        </chart>
      </panel>
    </row>
   <row>
    <row>
      <panel depends="$show_soa$">
        <chart>
          <title>SOA Request Count</title>
          <search>
            <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
            <earliest>-4h@m</earliest>
            <latest>now</latest>            
          </search>
          <option name="charting.legend.placement">right</option>
          <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
          <option name="charting.layout.splitSeries">0</option>
          <option name="charting.drilldown">all</option>
          <option name="charting.chart.style">shiny</option>
          <option name="charting.chart.stackMode">default</option>
          <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
          <option name="charting.chart.nullValueMode">gaps</option>
          <option name="charting.chart.bubbleSizeBy">area</option>
          <option name="charting.chart.bubbleMinimumSize">10</option>
          <option name="charting.chart.bubbleMaximumSize">50</option>
          <option name="charting.chart">column</option>
          <option name="charting.axisY2.scale">inherit</option>
          <option name="charting.axisY2.enabled">false</option>
          <option name="charting.axisY.scale">linear</option>
          <option name="charting.axisX.scale">linear</option>
          <option name="charting.axisTitleY2.visibility">visible</option>
          <option name="charting.axisTitleY.visibility">visible</option>
          <option name="charting.axisTitleX.visibility">visible</option>
          <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
          <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        </chart>
      </panel>
    </row>
   <row>
  <panel depends="$show_osb$">
    <chart>
      <title>OSB Request Count</title>
      <search>
        <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
        <earliest>-4h@m</earliest>
        <latest>now</latest>          
      </search>
      <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
      <option name="charting.axisTitleX.visibility">visible</option>
      <option name="charting.axisTitleY.visibility">visible</option>
      <option name="charting.axisTitleY2.visibility">visible</option>
      <option name="charting.axisX.scale">linear</option>
      <option name="charting.axisY.scale">linear</option>
      <option name="charting.axisY2.enabled">false</option>
      <option name="charting.axisY2.scale">inherit</option>
      <option name="charting.chart">bar</option>
      <option name="charting.chart.bubbleMaximumSize">50</option>
      <option name="charting.chart.bubbleMinimumSize">10</option>
      <option name="charting.chart.bubbleSizeBy">area</option>
      <option name="charting.chart.nullValueMode">gaps</option>
      <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
      <option name="charting.chart.stackMode">default</option>
      <option name="charting.chart.style">shiny</option>
      <option name="charting.drilldown">all</option>
      <option name="charting.layout.splitSeries">0</option>
      <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
      <option name="charting.legend.placement">right</option>
    </chart>
  </panel>
</row>
  </form>
0 Karma

somesoni2
SplunkTrust
SplunkTrust

It should work the same for any number of panels which is using 'depends=$tokenname$'. Check your panel formation, it seems like you've defined row inside row, which may be causing error.

0 Karma

garinapavan
Explorer

Sorry , extra row is a copy paste error . but the actual code is not having that tag . will see what else is causing the problem . Thank you for responding !

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 ...