Dashboards & Visualizations

Why my button submit does not work ?

mah
Builder

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
Builder

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
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...