Dashboards & Visualizations

Why my button submit does not work ?

mah
Contributor

Hi, 

I was trying to create a submit button in a panel based on that link :

https://community.splunk.com/t5/Dashboards-Visualizations/Comprehensive-implementation-of-a-WORKING-submit-button/m-p/404125

BUT it is not working at all...

Here is my xlm code :

<form script="submit_button.js">
  <label>Button in panel</label>
  <row depends="$alwaysHideHTMLStyle$">
    <panel>
      <html>
         <style>
          <!-- button style -->   
          #submit_button{
            width:80px !important;
          }
          #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            width:80px !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>
    </panel>
  </row>
  <row depends="$tokTextFilter$">
    <panel id="test">
      <title>Create Maintenance Windows</title>
<!-- input app -->   
      <input type="dropdown" token="application_tok" searchWhenChanged="true">
        <label>Application</label>
        <fieldForLabel>app</fieldForLabel>
        <fieldForValue>app</fieldForValue>
        <search>
          <query>index=A sourcetype="B"
| table tags{}.key
| rex field=tags{}.key "\[env\]\:(?&lt;env&gt;\S+)|\[app\]\:(?&lt;app&gt;\S+)"
| search app!=""
| fields app
| dedup app
| sort app</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <change>
          <condition match="isnotnull($value$) AND $value$!=&quot;&quot;">
            <set token="tokTextFilter">$value$</set>
          </condition>
        </change>
      </input>
<!-- input env-->     
      <input type="dropdown" token="environment_tok" searchWhenChanged="true">
        <label>Environment</label>
        <fieldForLabel>env</fieldForLabel>
        <fieldForValue>env</fieldForValue>
        <search>
          <query>index=A sourcetype="B"
| table tags{}.key
| rex field=tags{}.key "\[env\]\:(?&lt;env&gt;\S+)|\[app\]\:(?&lt;app&gt;\S+)"
| search app=$application_tok$
| fields env
| dedup env
| sort env</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <change>
          <condition match="isnotnull($value$) AND $value$!=&quot;&quot;">
            <set token="tokTextFilter">$value$</set>
          </condition>
        </change>
      </input>
<!-- input text 1-->     
      <input type="text" token="start" searchWhenChanged="false">
        <label>Start Time (yyyy-mm-dd HH:MM)</label>
        <change>
          <condition match="isnotnull($value$) AND $value$!=&quot;&quot;">
            <set token="tokTextFilter">$value$</set>
          </condition>
        </change>
      </input>
<!-- input text 2-->       
      <input type="text" token="end" searchWhenChanged="false">
        <label>End Time (yyyy-mm-dd HH:MM)</label>
        <change>
          <condition match="isnotnull($value$) AND $value$!=&quot;&quot;">
            <set token="tokTextFilter">$value$</set>
          </condition>
        </change>
      </input>
<!-- input button -->       
      <input type="link" id="submit_button">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>

      <table>
        <search>
<!-- my search with both js token -->       
          <query>| inputlookup my_lookup.csv
| head 5 | append [| makeresults
| eval Application="$application_tok$", Environment="$environment_tok$", Start="$start_id$", End="$end_id$"]
| fields - _time
| table Application Environment Start End
| outputlookup append=true my_lookup.csv
| sort Start</query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <unset token="form.start"></unset>
            <unset token="form.end"></unset>
            <unset token="form.application_tok"></unset>
            <unset token="form.environment_tok"></unset>
          </done>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>
 
 
Here is my js code : 
 
require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $("#submit_button").click(function(){
         submittedTokens.set("start_id",submittedTokens.get("start"));
         submittedTokens.set("end_id",submittedTokens.get("end"));

     });
 });
 
Can you help me to see what is wrong ? 
 
Thanks a lot.
Labels (1)
Tags (1)
0 Karma

s2_splunk
Splunk Employee
Splunk Employee

Does it matter that your case does not match for the token names? Start vs start, End vs end in JS?

0 Karma

mah
Contributor

That is not what I understand in the explanation in this link : 

https://community.splunk.com/t5/Dashboards-Visualizations/Comprehensive-implementation-of-a-WORKING-...

require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($,mvc){
var submittedTokens = mvc.Components.get("submitted");
$("#submit_button").click(function(){
submittedTokens.set("start_id",submittedTokens.get("start"));
submittedTokens.set("end_id",submittedTokens.get("end"));
});
});

In yellow, it is token I apply in my search.

In green, it is token I apply in my text input. 

That is what I understand in the demonstration in the link below...

But It actually does not wok at all...

0 Karma
.conf21 CFS Extended through 5/20!

Don't miss your chance
to share your Splunk
wisdom in-person or
virtually at .conf21!

Call for Speakers has
been extended through
Thursday, 5/20!