topic Re: hide panel after search is executed in Dashboards & Visualizations

hide panel after search is executed

Mike6960 — Thu, 07 Dec 2017 15:46:17 GMT

Hi, I've managed to add a 'Input' (T Text) in y dashboard. I also added a 'submit' button. When I search for something a panel dynamically appears on my dashboard with (or without) search results. I have two questions
1-I added the submit button so that the user 'sees' something happening when they enter a search word, without this button it seems not to do anything
2- Initially the dynamic panel (with the use of 'depends') is not visible (as expected), but after the first search has been exceuted the panel stays visible. Is there a way I can hide the panel when no other search has to been done?

Re: hide panel after search is executed

niketn — Thu, 07 Dec 2017 15:50:09 GMT

@Mike6960, would it be possible for you to add text box input and panel code?

Re: hide panel after search is executed

Mike6960 — Thu, 07 Dec 2017 16:02:53 GMT

@niketnilay

WlzServicesLog

<input type="time" token="field1">
  <label></label>
  <default>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
  </default>
</input>
<input type="text" token="field2" searchWhenChanged="true">
  <label>Zoeken</label>
  <prefix>field3</prefix>
</input>


<panel>
  <title>test</title>
  <event>
    <search>
      <query>index= xp* </query>
      <earliest>$field1.earliest$</earliest>
      <latest>$field1.latest$</latest>
      <sampleRatio>1</sampleRatio>
    </search>
    <option name="count">20</option>
    <option name="list.drilldown">none</option>
    <option name="list.wrap">1</option>
    <option name="maxLines">5</option>
    <option name="raw.drilldown">full</option>
    <option name="refresh.display">progressbar</option>
    <option name="rowNumbers">0</option>
    <option name="table.drilldown">all</option>
    <option name="table.sortDirection">asc</option>
    <option name="table.wrap">1</option>
    <option name="type">list</option>
  </event>
</panel>


<panel depends="$field2$">&gt;<title>test variabel</title>
  <table>
    <search>
      <query>index=XPO $field2$ |sort -Timestamp|table tijd severity message priority machine</query>
      <earliest>-24h@h</earliest>
      <latest>now</latest>
    </search>
    <option name="drilldown">cell</option>
    <drilldown>
      <link target="_blank">search?q=index=XPO $field2$* |sort -Timestamp|table tijd severity message priority machine&amp;earliest=-24h@h&amp;latest=now</link>
    </drilldown>
  </table>
</panel>

Re: hide panel after search is executed

niketn — Thu, 07 Dec 2017 17:38:33 GMT

[UPDATED]

Added screenshot to display desired output from run anywhere dashboard to show/hide HTML panel based on text box value change.

@Mike6960, please try the following:

I have set searchWhenChanged="true" for both text box and time input. On the change event handler for text box I am setting the token tokField2 to the value in the text box if it is provided, else token is unset.

I have used <html> panel for demo purpose. But you can use your own. The panel uses tokField2 as depends attribute set/unset during change event of the text box.

<form>
  <label>Hide Panel based on no value in Text box</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="field2" searchWhenChanged="true">
      <label>field2</label>
      <change>
        <condition match="isnull(value) OR value=&quot;&quot;">
          <unset token="tokField2"></unset>
        </condition>
        <condition>
          <set token="tokField2">$value$</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$tokField2$">
      <html>
        <div>$tokField2$</div>
      </html>
    </panel>
  </row>
</form>

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 09:13:24 GMT

@niketnilay, thanks but is a bit over my head. Where do I put this in the xml? Does this replace my own? I am not familiar with the HTML side of Splunk. What does the 'search when changed' actually do, I have tried true and false but don't notice the difference

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 10:43:12 GMT

tried to fit it in. put the 'submitButton' to True, otherwise there is no way to confirm the searchkeyword. Why is it that on one hand i use token 'field2' but you use 'tokField2' in the set/unset? I tried both but withe the same result actually

Re: hide panel after search is executed

niketn — Mon, 11 Dec 2017 10:56:24 GMT

You can create a new dashboard with this code. Do not replace your own as this is just run anywhere dashboard for you to test and then replace required code in your own.

The searchWhenChanged=true option posts respective input's changed value without you having to press the Submit button/posting the entire dashboard.

When searchWhenCHanged=false, it implies the changed value of the input will get posted only when you click the Submit button. This should ideally be done when you do not want any section of your dashboard to run Search unless all input values are changed. You would also need to enable submit button first<fieldset submitButton="true">

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 11:00:08 GMT

I tried this, but when there is no submitbutton, the value isn't passed unless I use the 'TAB'button

Re: hide panel after search is executed

niketn — Mon, 11 Dec 2017 11:10:12 GMT

I am using condition block within the text input to set or unset the token which will in turn show or or hide the depended panel.

The problem with directly using field2 or form.field2 (check the URL in your Splunk Dashboard once you key in some text in the textbox) would have been that while on first time dashboard load while the field2 token is null (or unset), once some text is entered the form variable is set and posted in the URL. Dor example: form.field2=foo. After making the textbox blank it sets the form token to empty string instead of null i.e. form.field2=. Hence, form token field2 can not be used for your scenario and I have used condition block which sets or unsets the desired token.

Please try out and confirm.

PS: In order to pick up Simple XML (and more ;)) you should definitely try out the following resources:
https://splunkbase.splunk.com/app/1603/
https://docs.splunk.com/Documentation/Splunk/latest/Viz/Buildandeditforms
http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Event_handler_element

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 11:33:43 GMT

strange...I don't see a difference in the URL or behaviour wether I use 'tokField2' or 'field2'
In both cases I see at the end of the URL: 'form.field1.earliest=0&form.field1.latest=&form.field2= '
And when I enter a text in the formvariable in both cases it shows:
'form.field1.earliest=0&form.field1.latest=&form.field2=searchword '

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 11:37:15 GMT

just to be complete, her is my XML at this moment:

labelname

<input type="time" token="field1">
  <label></label>
  <default>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
  </default>
</input>
<input type="text" token="field2" searchWhenChanged="true">
  <label>Zoeken</label>
  <change>
    <condition match="isnull(value) OR value=&quot;&quot;">
      <unset token="tokField2"></unset>
    </condition>
    <condition>
      <set token="tokField2">$value$</set>
    </condition>
  </change>
</input>


<panel>
  <title>test</title>
  <event>
    <search>
      <query>index= xp*</query>
      <earliest>$field1.earliest$</earliest>
      <latest>$field1.latest$</latest>
      <sampleRatio>1</sampleRatio>
    </search>
    <option name="count">20</option>
    <option name="list.drilldown">none</option>
    <option name="list.wrap">1</option>
    <option name="maxLines">5</option>
    <option name="raw.drilldown">full</option>
    <option name="refresh.display">progressbar</option>
    <option name="rowNumbers">0</option>
    <option name="table.drilldown">all</option>
    <option name="table.sortDirection">asc</option>
    <option name="table.wrap">1</option>
    <option name="type">list</option>
  </event>
</panel>


<panel depends="$tokField2$">&gt;<title>test variabel</title>
      <table>
    <search>
      <query>index=XPO $field2$ |sort -Timestamp|table tijd severity message priority machine</query>
      <earliest>0</earliest>
      <latest></latest>
    </search>
    <option name="count">10</option>
    <option name="drilldown">cell</option>
    <option name="refresh.display">progressbar</option>
    <drilldown>
      <link target="_blank">search?q=index=XPO $field2$* |sort -Timestamp|table tijd severity message priority machine&amp;earliest=-24h@h&amp;latest=now</link>
    </drilldown>
  </table>

</panel>


<panel>
  <title>Meldingen</title>
  <table>
    <search>
      <query>index= xp* source="WlzServices.log"

|sort -Timestamp|table tijd severity message priority machine
$field1.earliest$
$field1.latest$
1

100
none
cell
progressbar

Re: hide panel after search is executed

niketn — Mon, 11 Dec 2017 12:08:19 GMT

Check out Null Result Setter exmple in Splunk Dashboard Examples App to understand. Only form variables are displayed in the URL. If you want to see the value of custom token, you can use yout custom HTML panel, run anywhere search or panel/table title to display the same using $tokField2$ . For example:

<title>$tokField2$</title>

When the token is set it will show $tokField2$ value set, if it is unset $tokField2$ will be displayed.

Can you repost your complete dashboard with Code button? Seems like some of your code got escaped?

PS: I have added screenshot for the expected output of the run anywhere dashboard example that I have added. Please let me know if you are seeing something else or if the expected behavior is something else.

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 12:58:03 GMT

<form>
  <label>WlzServicesLog</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="field2" searchWhenChanged="true">
      <label>Zoeken</label>
      <change>
        <condition match="isnull(value) OR value=&quot;&quot;">
          <unset token="tokField2"></unset>
        </condition>
        <condition>
          <set token="tokField2">$value$</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Berichtenverwerking</title>
      <event>
        <search>
          <query>index= xp* </query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="list.drilldown">none</option>
        <option name="list.wrap">1</option>
        <option name="maxLines">5</option>
        <option name="raw.drilldown">full</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">0</option>
        <option name="table.drilldown">all</option>
        <option name="table.sortDirection">asc</option>
        <option name="table.wrap">1</option>
        <option name="type">list</option>
      </event>
    </panel>
  </row>
  <row>
    <panel depends="$tokField2$">&gt;<title>test variabel</title>
          <table>
        <search>
          <query>index=XPO $field2$ |sort -Timestamp|table tijd severity message priority machine</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <link target="_blank">search?q=index=XPO $field2$* |sort -Timestamp|table tijd severity message priority machine&amp;earliest=-24h@h&amp;latest=now</link>
        </drilldown>
      </table>

    </panel>
  </row>
  <row>
    <panel>
      <title>Meldingen</title>
      <table>
        <search>
          <query>index= xp* source="WlzServices.log" 
|sort -Timestamp|table tijd severity message priority machine</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

Re: hide panel after search is executed

niketn — Mon, 11 Dec 2017 13:00:37 GMT

Yes that is the idea of using this without Submit Button. Tabbing out triggers the input change event.

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 13:12:55 GMT

In your previous answer you replied: 'Hence, form token field2 can not be used for your scenario' But why is the behavour the same with field2 and tokField2 ?

Re: hide panel after search is executed

Mike6960 — Mon, 11 Dec 2017 14:16:09 GMT

@niketnilay, to prevent wasting your time. With the code I posted last it does what I need. I can search and the panel comes up after I 'TAB' . So lets leave it by that, I am afraid I am not gonna understand the difference between the field2 and tokfield2.
The example 'Null result setter' I cannot find in the example app by the way.

Re: hide panel after search is executed

niketn — Mon, 11 Dec 2017 15:05:40 GMT

Sorry my bad it is Null Search Swapper example.

If the code is working for you please accept the answer and up-vote any comment that helped.

I would request you to go through the Splunk Docs link I previously shared: http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Event_handler_element

The text box input change event handler is required for setting the token as per our need. The text box input's default token $value$ is used to access form.field2 value and whether it is unset i.e. null or empty i.e. "", it is used to unset the token tokField2. This results in hiding the required panel which depends or tokField2

However, if you use form token i.e. field2 as depends attribute it will be null until text box is selected and some value is entered. So if user clears out the complete text field2 will not be null it will be empty string i.e. form2.field=. This implies that depends attribute will not work and panel will not be hidden.

In simple Words the issue is due to empty value being different from no value.

Re: hide panel after search is executed

Mike6960 — Tue, 12 Dec 2017 07:48:54 GMT

@niketnilay I can't let it go 🙂 .
-"I would request you to go through the Splunk Docs link I previously shared: http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Event_handler_element" . I will do this.

How does Splunk know that 'field2' is the same as 'tokField2' ?
The thing I still don't understand is that wether I use field2 or tokField2 I don't see any difference in the behaviour.
This is also the case with 'searchWhenChanged' , it does not matter if the value is true or false, you always have to 'TAB' before its executes a search.

Re: hide panel after search is executed

niketn — Tue, 12 Dec 2017 08:56:08 GMT

How does Splunk know that 'field2' is the same as 'tokField2' ?
They are not

If field2 is NULL i.e. $field2$ if you try to display the same, then tokField2 is NULL
Even if field2 is EMPTY i.e. field2= then also tokField2 is NULL.

Which implies if you use field2 as depends for your panel to be hidden when no data in Text Box try the following 2 steps:
1) Refresh or freshly load the dashboard and key in some text like test and Tab out, you should see the HTML Panel
2) Empty the text box by clearing test and then tab out. Expected behavior is for the HTML Panel to be hidden since Text is not present but the same should be visible because field2 is EMPTY not NULL.

Yes for text box input to be registered you always need to tab out or interact with element other than text box (like click on Submit button implies you have focused out of Text box in order to click the Submit button.). If you want Text input to be registered on each letter being typed in the text box, you would need to create your own JavaScript. This also means that your Search query will also ru every type a letter is typed in the text box. For example Search will run 4 times when you type test in the text box, also 4 times when you try to delete 1 letter at a time. Do you really want this overhead just not to tab out of the text box?

Re: hide panel after search is executed

Mike6960 — Tue, 12 Dec 2017 09:25:58 GMT

Hi,

'Do you really want this overhead just not to tab out of the text box?'
No, but I thought that that was the purpose of the 'searchwhenchanged' . Now I understand that if the value is 'false' that there will be no new search executed of I enter a searchword for the second time.

Maybe I just keep misunderstanding you, but I have a panel (no HTML) that acts like the following:
- Opening the dashboard-enter a value in textblock -TAB. When there is a result , then the panel opens (with the results) . When there is no result (matching the searchvalue) the panel also opens, but the message 'No results found' is showing.

When I clear the textblock and TAB, then the panel does not open. This behaviour is the same when I use tokField2 or Field2. That is the main issue I don't understand. Because you explained that there is a difference between the two fields