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

[garinapavan]

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>

[somesoni2 · Accepted solution]

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]

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>

[somesoni2]

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.

[garinapavan]

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 !