Visualization panels should appear on dropdown input and time input

[Shashwat]

Hi,

My dashboard has 2 inputs, i.e dropdown , time picker. I have a requirement where I need to provide both inputs  then only my panels should appear. I tried the same ( below dashboard code) , when first time dashboard loads , I choose both inputs and panel appears.After that when I choose another item from dropdown ( keeping the same time) nothing happens. I have to change a different time and then the respective panel appears.

What should I change in the code so that even if I change only dropdown item , panel should appear for the same chosen timeframe. 

Dashboard Code:

<form version="1.1" theme="light">
    <label>Time Picker Input</label>
    <description>Replicate time picker issue</description>
    <fieldset submitButton="false">
        <input type="dropdown" token="item" searchWhenChanged="true">
        <label>Select Item</label>
        <choice value="table1">TABLE-1</choice>
        <choice value="table2">TABLE-2</choice>
        <choice value="table3">TABLE-3</choice>
        <change>
            <condition value="table1">
                <set token="tab1">"Table1"</set>
                <unset token="tab2"></unset>
                <unset token="tab3"></unset>
                <unset token="time"></unset>
                <unset token="form.time"></unset>
                <unset token="is_time_selected"></unset>
            </condition>
            <condition value="table2">
                <set token="tab2">"Table2"</set>
                <unset token="tab1"></unset>
                <unset token="tab3"></unset>
                <unset token="time"></unset>
                <unset token="form.time"></unset>
                <unset token="is_time_selected"></unset>
            </condition>
            <condition value="table3">
                <set token="tab3">"Table3"</set>
                <unset token="tab1"></unset>
                <unset token="tab2"></unset>
                <unset token="time"></unset>
                <unset token="form.time"></unset>
                <unset token="is_time_selected"></unset>
            </condition>
            <condition>
                <unset token="tab1"></unset>
                <unset token="tab2"></unset>
                <unset token="tab3"></unset>
                <unset token="time"></unset>
                <unset token="form.time"></unset>
                <unset token="is_time_selected"></unset>
            </condition>
        </change>
        </input>
        <input type="time" token="time" searchWhenChanged="true">
            <label>Select Time</label>
            <change>
                <set token="is_time_selected">true</set>
            </change>
         </input>
    </fieldset>
    <row depends="$tab1$$is_time_selected$">
        <panel>
            <table>
                <title>Table1</title>
                <search>
                    <query>
| makeresults
| eval Table = "Table1"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
                    </query>
                </search>
                <option name="drilldown">none</option>
                <option name="refresh.display">progressbar</option>
            </table>
        </panel>
    </row>
    <row depends="$tab2$$is_time_selected$">
        <panel>
            <table>
                <title>Table2</title>
                <search>
                    <query>
| makeresults
| eval Table = "Table2"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
                     </query>
                 </search>
                 <option name="drilldown">none</option>
                 <option name="refresh.display">progressbar</option>
             </table>
        </panel>
    </row>
    <row depends="$tab3$$is_time_selected$">
        <panel>
            <table>
                <title>Table3</title>
                <search>
                    <query>
| makeresults
| eval Table = "Table3"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
                    </query>
                </search>
                <option name="drilldown">none</option>
                <option name="refresh.display">progressbar</option>
            </table>
        </panel>
    </row>
</form>

Thanks & Regards,
Shashwat

[bowesmana · Accepted solution]

@Shashwat 

You can't have an 'empty' time picker, so as soon as you enter the dashboard, the time picker will fire a change event, so you will get is_time_picker=true and it will set 'All time' as the default

So it works the first time round because when you select a table, it unsets is_time_picker.

You need to use an <eval> in the time picker change element, so that it only sets your token when time.earliest is given a value - also remove all the unset tokens.

<form version="1.1" theme="light">
  <label>Time Picker Input</label>
  <description>Replicate time picker issue</description>
  <fieldset submitButton="false">
    <input type="dropdown" token="item" searchWhenChanged="true">
      <label>Select Item</label>
      <choice value="table1">TABLE-1</choice>
      <choice value="table2">TABLE-2</choice>
      <choice value="table3">TABLE-3</choice>
      <change>
        <condition value="table1">
          <set token="tab1">"Table1"</set>
          <unset token="tab2"></unset>
          <unset token="tab3"></unset>
        </condition>
        <condition value="table2">
          <set token="tab2">"Table2"</set>
          <unset token="tab1"></unset>
          <unset token="tab3"></unset>
        </condition>
        <condition value="table3">
          <set token="tab3">"Table3"</set>
          <unset token="tab1"></unset>
          <unset token="tab2"></unset>
        </condition>
        <condition>
          <unset token="tab1"></unset>
          <unset token="tab2"></unset>
          <unset token="tab3"></unset>
        </condition>
      </change>
    </input>
    <input type="time" token="time" searchWhenChanged="true">
      <label>Select Time</label>
      <change>
        <eval token="is_time_selected">if(isnull($time.earliest$), null(), "true")</eval>
      </change>
      <default>
        <earliest>0</earliest>
        <latest></latest>
      </default>
    </input>
  </fieldset>
  <row depends="$tab1$,$is_time_selected$">
    <panel>
      <table>
        <title>Table1</title>
        <search>
          <query>
| makeresults
| eval Table = "Table1"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
          </query>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row depends="$tab2$,$is_time_selected$">
    <panel>
      <table>
        <title>Table2</title>
        <search>
          <query>
| makeresults
| eval Table = "Table2"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
           </query>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row depends="$tab3$,$is_time_selected$">
    <panel>
      <table>
        <title>Table3</title>
        <search>
          <query>
| makeresults
| eval Table = "Table3"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
          </query>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

BTW, have you tried using link list inputs - they are quite handy for doing tab based inputs like you appear to be doing. You can achieve some near visuals using a simple bit of CSS for styling, e.g.

[Shashwat]

@bowesmana Thank you soooo much, it worked like a charm 🙂
I will sure try it out. (linked list option)

[meetmshah]

Can you check if below works - 

<form version="1.1" theme="light">
    <label>Time Picker Input</label>
    <description>Replicate time picker issue</description>
    <fieldset submitButton="false">
        <input type="dropdown" token="item" searchWhenChanged="true">
            <label>Select Item</label>
            <choice value="table1">TABLE-1</choice>
            <choice value="table2">TABLE-2</choice>
            <choice value="table3">TABLE-3</choice>
            <change>
                <condition value="table1">
                    <set token="tab1">"Table1"</set>
                    <unset token="tab2"></unset>
                    <unset token="tab3"></unset>
                </condition>
                <condition value="table2">
                    <set token="tab2">"Table2"</set>
                    <unset token="tab1"></unset>
                    <unset token="tab3"></unset>
                </condition>
                <condition value="table3">
                    <set token="tab3">"Table3"</set>
                    <unset token="tab1"></unset>
                    <unset token="tab2"></unset>
                </condition>
                <condition>
                    <unset token="tab1"></unset>
                    <unset token="tab2"></unset>
                    <unset token="tab3"></unset>
                </condition>
            </change>
        </input>
        <input type="time" token="time" searchWhenChanged="true">
            <label>Select Time</label>
            <change>
                <set token="is_time_selected">true</set>
            </change>
        </input>
    </fieldset>
    <row depends="$tab1$ $is_time_selected$">
        <panel>
            <table>
                <title>Table1</title>
                <search>
                    <query>
| makeresults
| eval Table = "Table1"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
                    </query>
                </search>
                <option name="drilldown">none</option>
                <option name="refresh.display">progressbar</option>
            </table>
        </panel>
    </row>
    <row depends="$tab2$ $is_time_selected$">
        <panel>
            <table>
                <title>Table2</title>
                <search>
                    <query>
| makeresults
| eval Table = "Table2"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
                     </query>
                 </search>
                 <option name="drilldown">none</option>
                 <option name="refresh.display">progressbar</option>
             </table>
        </panel>
    </row>
    <row depends="$tab3$ $is_time_selected$">
        <panel>
            <table>
                <title>Table3</title>
                <search>
                    <query>
| makeresults
| eval Table = "Table3"
| eval e_time = "$time.earliest$", l_time = "$time.latest$"
| table Table e_time l_time
                    </query>
                </search>
                <option name="drilldown">none</option>
                <option name="refresh.display">progressbar</option>
            </table>
        </panel>
    </row>
</form>

Please hit Karma, if this helps!

[Shashwat]

Hi meetmshah,

Thank you for the response. But unfortunately, even after change issue persists.