Dashboards & Visualizations

How do I update a dropdown token (and all associated nested tokens) upon pressing the submit button?

sunnyB
Explorer

Hi,

I am trying to perform a search in 3 different ways using a dropdown.
Depending on which search criteria is selected, tokens from the relevant search inputs are all passed into the dropdown token ($multisearch$) which is then passed into the relevant panels to display the search result in table and raw event format.

When I click the submit button after entering new text into a relevant search text field, the search does not update.
I have narrowed this problem down to one of my tokens not updating (the $multisearch$ token from the "Search Criteria" dropdown).

There is one quirk I found that makes the search update in the panels (for the default option only) but it is not a solution to my problem. After changing my search, when I click submit and then click on the clear button (x) in the dropdown, the search updates in all the panels.

I think the reason for this is that the token is re-evaluated once the value is reset.

Is there a way to force the dropdown token to re-evaluate every time one of the associated inputs is changed?

Setting "Search on Change" to true for relevant inputs has no effect.

I have trimmed my dashboard Source code as follows:

<form>
  <search id="base_name">
    <query>
<![CDATA[
| rest /services/authentication/current-context splunk_server=local | eval firstname="" | eval lastname="" | rex field=realname "^(?<lastname>[^,]+),(?<firstname>.+)?$" | eval firstname=if(firstname=="",realname,firstname) | eval name= firstname . " " . lastname | fields name
]]>
</query>
    <done>
      <set token="username">$result.name$</set>
    </done>
  </search>
  <label>Foo</label>
  <description>Dashboard</description>
  <fieldset submitButton="true" autoRun="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html/>
    </panel>
  </row>
  <row>
    <panel>
      <title>Welcome, $username$!</title>
      <html>
<!-- Home Menu Button -->
<a href="Enter Your Own" class="home_btn">Home</a>
<!-- Reset Button -->
<a href="Link to page" class="reset_btn">Reset Dashboard</a>
<style>
.reset_btn{
border-radius: 5px;
font-size: 12px;
color: black;
font-weight: bold;
padding: 6px 8px 6px 8px;
margin: 5px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
display:inline-block;
}
.home_btn{
border-radius: 5px;
font-size: 12px;
color: black;
font-weight: bold;
padding: 6px 8px 6px 8px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
display:inline-block;
}
.reset_btn:hover {
background-color: #000;
}
.home_btn:hover {
background-color: #000;
}

/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 5px;
text-align: center;
background-color:green;
}

.dashboard-title{ color:#FFFFFF }
.icon-inline{text-align:center!important;}
.system-icon{width: 55px;}
.panel-title{font-size: 30px!important;}



</style>
</html>
      <html>
</html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="dropdown" token="Env" searchWhenChanged="false">
        <label>Environment</label>
        <choice value="*">All</choice>
        <choice value="1">1</choice>
        <choice value="2">2</choice>
        <choice value="3">3</choice>
        <default>*</default>
        <initialValue>*</initialValue>
      </input>
      <input type="time" token="field1" searchWhenChanged="false">
        <label>TimePicker</label>
        <default>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="multisearch" searchWhenChanged="false">
        <label>Search Criteria</label>
        <choice value="simple">Simple Search</choice>
        <choice value="specific">Specific Search</choice>
        <choice value="multiple">Multiple Search</choice>
        <default>simple</default>
        <change>
          <condition value="simple">
            <set token="multisearch">$searchString0$</set>
            <set token="showSearch0">1</set>
            <unset token="showSearch1"></unset>
            <unset token="showSearch2"></unset>
          </condition>
          <condition value="specific">
            <set token="multisearch">$searchString1$</set>
            <set token="showSearch1">1</set>
            <unset token="showSearch2"></unset>
            <unset token="showSearch0"></unset>
          </condition>
          <condition value="multiple">
            <set token="multisearch">$searchString1$ $logic1$ $searchString2$</set>
            <unset token="showSearch0"></unset>
            <set token="showSearch1">1</set>
            <set token="showSearch2">1</set>
          </condition>
        </change>
        <initialValue>simple</initialValue>
      </input>
      <input type="text" token="searchString0" searchWhenChanged="false" depends="$showSearch0$">
        <label>Simple Search</label>
        <default>*</default>
        <prefix>"*</prefix>
        <suffix>*"</suffix>
      </input>
      <input type="radio" token="radioSearchFilter1" searchWhenChanged="false" depends="$showSearch1$">
        <label>Select Keyword 1</label>
        <choice value="BAN=">BAN</choice>
        <choice value="CAC=">CAC</choice>
        <choice value="serviceID=">serviceID</choice>
        <choice value="username=">username</choice>
      </input>
      <input type="text" token="searchString1" searchWhenChanged="false" depends="$showSearch1$">
        <label>Search 1</label>
        <default>*</default>
        <prefix>$radioSearchFilter1$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <input type="dropdown" token="logic1" searchWhenChanged="false" depends="$showSearch2$">
        <label>Filter Logic</label>
        <choice value="OR">OR</choice>
        <choice value="AND">AND</choice>
        <default>OR</default>
        <initialValue>OR</initialValue>
      </input>
      <input type="radio" token="radioSearchFilter2" searchWhenChanged="false" depends="$showSearch2$">
        <label>Select Keyword 2</label>
        <choice value="BAN=">BAN</choice>
        <choice value="CAC=">CAC</choice>
        <choice value="serviceID=">serviceID</choice>
        <choice value="username=">username</choice>
        <default>BAN=</default>
        <initialValue>BAN=</initialValue>
      </input>
      <input type="text" token="searchString2" searchWhenChanged="false" depends="$showSearch2$">
        <label>Search 2</label>
        <default>*</default>
        <prefix>$radioSearchFilter2$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <html>
<div>
<style>
#submit {
position: relative;
top: 275px;
z-index: 1;
float: right;
margin: 5px;
}
</style>
</div>
</html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Table</title>
        <search>
          <query>index="" source=""
| eval RawTime=_time
| convert ctime(_time) AS TimeStamp
| search Environment="$Env$" $multisearch$

| sort _time desc</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="SF_BAN">$row.BAN$</set>
          <set token="SF_CAC">$row.CAC$</set>
          <set token="SF_TimeStamp">$row.TimeStamp$</set>
          <set token="SF_Source">$row.source$</set>
          <set token="SF_Environment">$row.Environment$</set>
          <set token="SF_time">$row._time$</set>
          <set token="SF_RawTime">$row.RawTime$</set>
        </drilldown>
      </table>
    </panel>
    <panel>
      <event>
        <title>Drilldown</title>
        <search>
          <query>index="" source=""
| eval RawTime=_time

| search Environment="$Env$" $multisearch$

| sort TimeStamp desc</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="list.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </event>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <title>Raw Events</title>
        <search>
          <query>index="" source=""
| eval RawTime=_time
| search Environment="$Env$" $multisearch$
| sort _time desc</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="list.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </event>
    </panel>
  </row>
</form>

Thank you for your time.

0 Karma
1 Solution

niketnilay
Legend

@sunnyB besides changing all input searchWhenChanged to true you should also get rid of Submit button.

<fieldset submitButton="false" autoRun="true"></fieldset>

If you want to understand the Token Model behavior and Submit button functionality, check out the following answer: https://answers.splunk.com/answers/679596/what-is-the-expected-behavior-for-submit-button-wh.html

Developer Gadgets app by @rjthibod is a great tool to debug such token related issues.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@sunnyB besides changing all input searchWhenChanged to true you should also get rid of Submit button.

<fieldset submitButton="false" autoRun="true"></fieldset>

If you want to understand the Token Model behavior and Submit button functionality, check out the following answer: https://answers.splunk.com/answers/679596/what-is-the-expected-behavior-for-submit-button-wh.html

Developer Gadgets app by @rjthibod is a great tool to debug such token related issues.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

sunnyB
Explorer

@niketnilay thank you for your time, I have tried disabling the submit button as you have suggested and setting autorun to true. I have also set all instances of searchWhenChanged to true within my inputs.

Unfortunately, I still have the same problem where the token in the dropdown ($multisearch$) is not updated unless I change the state of the dropdown which forces the token to be re-evaluated.

The token for the dropdown ($multisearch$) stores the entire search string from the radio and text inputs, $multisearch$ token is passed to the "| search" command in the relevant event/table panels.

I couldn't find a way to put an entire "| search" in a condition within the event/table panels, hence my attempt at the current work around.

I couldn't find a way to refresh/force a re-evaluation of the dropdown without resorting to java script.
I do not have permission/privileges to use java script since my access to the server(s) as a user is limited.
Furthermore, embedding java script into the source itself without importing does not seem to be allowed in Splunk 7.x.

My main problem with this workaround is that updating inputs/tokens that get passed to $multisearch$, do not trigger a re-evaluation of the dropdown/$multisearch$ token condition statements.

Hence the dropdown token $multisearch$ is unchanged so it essentially passes the same value it had prior to the search despite changing the inputs related to the $multisearch$ parent token.

This is likely why the panels do not update when I press submit.
That is my understanding of the problem so far.
Any help would be greatly appreciated.

0 Karma

niketnilay
Legend

Set searchWhenChanged="true" where ever required.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jithinmathew
Explorer

@niketnilay By any chance, is there anyway I can use the inbuilt Splunk functionality of the "ClearButton" and create my own button to reference this?

For example, I want to be able to use the function of the Clear Button that is displayed on dropdowns (the little cross icon) and place it into my own inbuilt button.

Reasoning behind this is that even though I set the dashboard to autorun and set the searches to search on change, it changes for the first time only. Any other text input after the first search does not update until I press on that "Clear Button". Hence, I want to grab that same functionality and place it into a custom button that is called submit.

Thanks!

0 Karma

niketnilay
Legend

@jithinmathew instead of using Submit button, you can enable Search When Changed to true and code your own Buttons to Submit or Reset tokens using Simple XML JS Extension and Splunk JS Stack for controlling default/submitted Token Model. You can refer to Splunk Answers for examples or else raise a question with the details around your current dashboard and your requirement.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.