topic Re: Visualization panels should appear on dropdown input and time input in Dashboards & Visualizations

Visualization panels should appear on dropdown input and time input

Shashwat — Fri, 06 Dec 2024 19:41:20 GMT

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

Re: Visualization panels should appear on dropdown input and time input

meetmshah — Sun, 08 Dec 2024 13:07:39 GMT

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!

Re: Visualization panels should appear on dropdown input and time input

Shashwat — Sun, 08 Dec 2024 14:56:10 GMT

Hi meetmshah,

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

Re: Visualization panels should appear on dropdown input and time input

bowesmana — Sun, 08 Dec 2024 21:36:19 GMT

@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.

Re: Visualization panels should appear on dropdown input and time input

Shashwat — Mon, 09 Dec 2024 09:52:59 GMT

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