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
Revered Legend

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
Revered Legend

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
Revered Legend

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 | Divide 100 by half. What do you get?

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

Stay Connected: Your Guide to December Tech Talks, Office Hours, and Webinars!

❄️ Celebrate the season with our December lineup of Community Office Hours, Tech Talks, and Webinars! ...

Splunk and Fraud

Watch Now!Watch an insightful webinar where we delve into the innovative approaches to solving fraud using the ...