How can we enforce a dependency between 2 dropdown...

dbykat · ‎01-17-2018

How can we enforce a dependency between 2 dropdowns such that when i change the first, the second one is notified of the change automatically?

I tried setting "searchWhenChanged="true" , but it did not have the desired effect. Below is an example dashboard that displays this behavior. Each dropdown prints the other's token. Expectation is that when i change the dropdown named "upper", the other dropdown ("lower") should have immediate access to the new "upper" token value. However, this is not the case (it requires a manual change to the "lower" dropdown for "lower" to acknowledge the change in value to "upper").

Using Splunk 6.5.3

Thank you!

<form>
  <label>Testing Dropdowns</label>
  <description>Expectation is that the upper dropdown sets the "view" token and the lower dropdown displays it</description>
  <fieldset submitButton="false">
    <input type="dropdown" token="upper" searchWhenChanged="true">
      <label>Upper</label>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
      <default>A</default>
      <change>
        <condition value="A">
          <eval token="UpperShowLowerValue">$lower$</eval>
        </condition>
        <condition value="B">
          <eval token="UpperShowLowerValue">$lower$</eval>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="lower" searchWhenChanged="true">
      <label>Lower</label>
      <choice value="X">X</choice>
      <choice value="Y">Y</choice>
      <change>
        <condition value="X">
          <set token="LowerShowUpperValue">$upper$</set>
        </condition>
        <condition value="Y">
          <set token="LowerShowUpperValue">$upper$</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
         <b>Token Values</b>
        &lt;br/&gt;
         <div>
           upper: $upper$&lt;br/&gt;
           UpperShowLowerValue: $UpperShowLowerValue$&lt;br/&gt;
           lower: $lower$&lt;br/&gt;
           LowerShowUpperValue: $LowerShowUpperValue$&lt;br/&gt;
         </div>  
       </html>
    </panel>
  </row>
</form>

micahkemp · ‎01-19-2018

I can't seem to get the dependent dropdown to clear its value, but this does show the dependent search having a cleared value from the dependent dropdown until a new value is selected:

<form>
  <label>States</label>
  <search id="states">
    <query>| makeresults | eval state="Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,NewHampshire,NewJersey,NewMexico,NewYork,NorthCarolina,NorthDakota,Ohio,Oklahoma,Oregon,Pennsylvania,RhodeIsland,SouthCarolina,SouthDakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,WestVirginia,Wisconsin,Wyoming" | makemv delim="," state | table state | mvexpand state</query>
  </search>
  <fieldset submitButton="false">
    <input type="dropdown" token="letter" searchWhenChanged="true">
      <label>Letter</label>
      <fieldForLabel>letter</fieldForLabel>
      <fieldForValue>letter</fieldForValue>
      <search base="states">
        <query>
          <![CDATA[rex field=state "^(?<letter>.)" | stats count BY letter]]>
        </query>
      </search>
      <change>
        <unset token="state" />
      </change>
    </input>
    <input type="dropdown" token="state" searchWhenChanged="true">
      <label>State</label>
      <fieldForLabel>state</fieldForLabel>
      <fieldForValue>state</fieldForValue>
      <search base="states">
        <query>
          <![CDATA[rex field=state "^(?<letter>.)" | search letter=$letter$]]>
        </query>
      </search>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>You picked</title>
      <single>
        <search base="states">
          <query>search state=$state$ | table state</query>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>

HiroshiSatoh · ‎01-17-2018

Specifically, what do you want to do?
I think that setting should be set to both.
ex.

<condition value="X">
           <eval token="UpperShowLowerValue">$lower$</eval>
           <set token="LowerShowUpperValue">$upper$</set>
</condition>
<condition value="Y">
           <eval token="UpperShowLowerValue">$lower$</eval>
           <set token="LowerShowUpperValue">$upper$</set>
</condition>

dbykat · ‎01-18-2018

To clarify what I’m trying to achieve: I want to go to the first dropdown and manually choose a drop down option, which will reset it's token. I expect the second drop down to re-evaluate automatically since it references the first dropdown's token. I tested your recommendation and your XML doesn't solve this.

Without this functionality, we can end up inconsistent like this Screenshot below. Notice how the "Lower" droppdown's value is "Y" in the dropdown itself, but Upper thinks it's "X" and thus prints the wrong value in the dashboard. The only way to avoid this is: everytime i touch dropdown "Lower", i need to subsequently touch dropdown "Upper", which defeats the purpose of having them as separate widgets.

IMAGE:

here's the updated XML that matches the image:

<form>
  <label>Testing Dropdowns</label>
  <description>Expectation is that the upper dropdown sets a  token and the lower dropdown displays it in the dashboard... and vice versa</description>
  <fieldset submitButton="false">
    <input type="dropdown" token="upper" searchWhenChanged="true">
      <label>Upper</label>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
      <default>A</default>
      <change>
        <condition value="A">
          <eval token="UpperShowLowerValue">$lower$</eval>
        </condition>
        <condition value="B">
          <eval token="UpperShowLowerValue">$lower$</eval>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="lower" searchWhenChanged="true">
      <label>Lower</label>
      <choice value="X">X</choice>
      <choice value="Y">Y</choice>
      <change>
        <condition value="X">
          <set token="LowerShowUpperValue">$upper$</set>
        </condition>
        <condition value="Y">
          <set token="LowerShowUpperValue">$upper$</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
         <b>Token Values</b>
        &lt;br/&gt;
         <div>
           Upper thinks Upper Value is: $upper$&lt;br/&gt;
           Upper thinks Lower Value is: $UpperShowLowerValue$&lt;br/&gt;
           Lower thinks Lower Value is: :$lower$&lt;br/&gt;
           Lower thinks Upper Value is: $LowerShowUpperValue$&lt;br/&gt;
         </div>  
       </html>
    </panel>
  </row>
</form>

How can we enforce a dependency between 2 dropdowns such that when i change the first, the second one is notified of the first automatically?

Introducing the Splunk Community Dashboard Challenge!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...