Dashboards & Visualizations

Does anyone have a JavaScript sample to show/hide a drop-down upon selecting a value from another drop-down?

kkarthik2
New Member

Anyone have Javascript to show/hide a drop-down while selecting a value from another drop-down?

0 Karma

kevshah
Explorer

You can set and unset tokens to show/hide dropdowns. Here is an example.

<form>
<panel>
  <title>Set sourcetype token</title>

  <input type="dropdown" token="field1">
    <label>Select Sourcetype</label>
    <choice value="1">eml</choice>
    <choice value="2">http_access_log</choice>
    <choice value="3">jvm</choice>
    <choice value="4">layer7</choice>
    <choice value="5">waspmi</choice>
    <change>
      <!-- For the sourcetype field clicked: -->
      <!-- Set token to display a chart -->
      <!-- Unset token to display a table -->
      <condition value="1">
        <set token="sourcetype"></set>
        <set token="show1">foo</set>
        <unset token="show2"></unset>
        <unset token="show3"></unset>
      </condition>
      <!-- For any other field clicked: -->
      <!-- Set token to display a table -->
      <!-- Unset token to display a chart -->
      <condition value="2">
        <set token="sourcetype"></set>
        <set token="show2">foo</set>
        <unset token="show1"></unset>
        <unset token="show3"></unset>
      </condition>
      <condition value="3">
        <set token="sourcetype"></set>
        <set token="show3">foo</set>
        <unset token="show2">foo</unset>
        <unset token="show1"></unset>
      </condition>
    </change>
  </input>
</panel>
<panel>
  <input type="dropdown" token="field2" searchWhenChanged="true" depends="$show1$">
    <label>Index</label>
    <choice value="eml">eeml</choice>
    <choice value="http">http</choice>
    <choice value="layer7">layer7</choice>
  </input>

  <input type="dropdown" token="field4" searchWhenChanged="true" depends="$show2$">
    <label>JVM Name</label>
    <choice value="eml">eeml</choice>
    <choice value="http">http</choice>
    <choice value="layer7">layer7</choice>
  </input>

  <input type="dropdown" token="field4" searchWhenChanged="true" depends="$show3$">
    <label>Host Name</label>
    <choice value="eml">eeml</choice>
    <choice value="http">http</choice>
    <choice value="layer7">layer7</choice>
  </input>


  <html rejects="$show1$, $show2$, $show3$">
    <h2>Details</h2>
      <div style="padding: 50px; margin: 0 auto; width: 350px;">
      <div class="alert alert-warning">
      <i class="icon-alert"/>
        Click on a row in the table on the left to show details.
      </div>
    </div>
  </html>
</panel>
0 Karma

vganjare
Builder

Are you using simple xml dashboard?

0 Karma

kkarthik2
New Member

yes we are using XML

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!