Solved: Re: How can I implement a pseudo-searchWhenChanged...

nick405060 · ‎07-16-2019

Hi guys,

I am looking to create and use a working JS button. I am able to put it in line with my other inputs (https://answers.splunk.com/answers/758599/is-it-possible-to-add-a-button-in-line-with-inputs.html) and am able to have it resubmit searches when tokens are not changed (https://answers.splunk.com/answers/758332/is-it-impossible-to-resubmit-a-dashboard-search-in.html )

However, I'd like a searchWhenChanged="false" functionality for inputs used in conjunction with this button. With my current code, the search still re-runs when the timepicker is updated without the button ever being clicked. I'd like the search to run only on button click.

searchWhenChanged="false" for the inputs is NOT not honored like the bug with the fieldset SubmitButton ( https://answers.splunk.com/answers/742451/searchwhenchangedfalse-not-honored-1.html ), since searchWhenChanged was only meant to be compatible with the fieldset SubmitButton, not a JS button.

<dashboard theme="light" script="button_submit.js">
  <label>Lockout Lookup Clone</label>
  <description></description>

  <row>
    <panel>
      <html depends="$hide$">
        <style>
        #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
        {
          width:35% !important;
        }
        #submit_button  button  {
          padding: 6px 15px !important;
          border-radius: 3px !important;
          font-weight: 500 !important;
          background-color: #5cc05c !important;
          border: transparent !important;
          color: #fff !important;
        }
        #submit_button  button:hover{
          background-color: #40a540 !important;
          border-color: transparent !important;
        }
        </style>
      </html>
      <input type="time" token="TIMERANGE" id="timepicker" searchWhenChanged="false">
        <label>Time range:</label>
        <default>
          <earliest>@d</earliest>
          <latest>now</latest>
        </default>
        <change>
          <eval token="earliest_epoch_onChange">case(isnum($earliest$), $earliest$, $earliest$=="now", time(), $earliest$="", 0, true(), relative_time(time(), $earliest$))</eval>
          <eval token="latest_epoch_onChange">case(isnum($latest$), $latest$, $latest$=="now", time(), true(), relative_time(time(), $latest$))</eval>
        </change>
      </input>
      <input type="text" token="earliest_epoch" depends="$justHideMe$">
        <default>$earliest_epoch_onChange$</default>
      </input>
      <input type="text" token="latest_epoch" depends="$justHideMe$">
        <default>$latest_epoch_onChange$</default>
      </input>
      <input type="link" id="submit_button" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>

  <row>
    <panel>
      <title></title>
      <table>
        <search>
          <query>
index=wineventlog EventCode=4740 OR EventCode=4767 user="myuser" earliest=$earliest_epoch$ latest=$latest_epoch$ | sort 0 - _time | rename Caller_Computer_Name AS device | rename ComputerName as domain_controller | eval unlocker=if(EventCode=4767,src_user,"") | eval null="$submit_trigger$" | table _time user unlocker EventCode EventCodeDescription device domain_controller 
          </query>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">none</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">20</option>
      </table>
    </panel>
  </row>

</dashboard>

submit.js:

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var defaultTokens = mvc.Components.get("default");
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         defaultTokens.set("submit_trigger", ""+Math.random());
     });
 });

tomawest · ‎07-16-2019

Try the following
- store the inputs in their tokens as I assume you are already.
- create hidden text fields for each input but do not change them when you change the value of your inputs
- on selection of the button, assign a hidden text field to now()
- on change of the hidden text field, assign the mapped hidden text fields to the values of your inputs

View solution in original post

nick405060 · ‎07-16-2019

@tomawest helped me a bunch with this and gave me the idea for my final solution. Basically just use your js to create a "final" token for each "initial" token submitted for each of your inputs.

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         submittedTokens.set("my_final_token",submittedTokens.get("my_initial_token"));
     });
 });

tomawest · ‎07-16-2019

Try the following
- store the inputs in their tokens as I assume you are already.
- create hidden text fields for each input but do not change them when you change the value of your inputs
- on selection of the button, assign a hidden text field to now()
- on change of the hidden text field, assign the mapped hidden text fields to the values of your inputs

nick405060 · ‎07-16-2019

This solution is probably better since you don't have to create and edit a separate js file for each of your dashboards like with my answer.

How can I implement a pseudo-searchWhenChanged functionality for inputs using a JS button?

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation

Explore the Latest Educational Offerings from Splunk (November Releases)

New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...