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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...