Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

Why my button submit does not work ?

mah
Builder
‎12-27-2020 03:00 AM

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)
Labels
Tags (1)
0 Karma
Reply

s2_splunk
Splunk Employee
Splunk Employee
‎12-28-2020 01:12 PM

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

0 Karma
Reply

mah
Builder
‎12-29-2020 02:09 AM

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
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Index This | What travels the world but is also stuck in place?

April 2026 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data

Realizing the full potential of your Splunk investment requires more than just understanding current usage; it ...

Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...

As data volumes continue to grow and environments become more distributed, managing and optimizing data ...