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!

Best Practices: Splunk auto adjust pipeline queue

When you enable autoAdjustQueue in Splunk, maxSize should be understood as the queue size Splunk starts with ...

Request for Professional Development: Attending .conf26

Winning Over the Boss: Your Pass to .conf26 conf26 is going to be here before you know it. If don't already ...

Casting Call: Compete in Cyber Games

Lights, Camera, SecOps: Apply to Compete in Cyber Games     Think you have what it takes to beat the clock? ...