Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Dashboards & Visualizations
×
Are you a member of the Splunk Community?
Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Why my button submit does not work ?
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
<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\]\:(?<env>\S+)|\[app\]\:(?<app>\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$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<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\]\:(?<env>\S+)|\[app\]\:(?<app>\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$!=""">
<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\]\:(?<env>\S+)|\[app\]\:(?<app>\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$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<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\]\:(?<env>\S+)|\[app\]\:(?<app>\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$!=""">
<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$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<input type="text" token="start" searchWhenChanged="false">
<label>Start Time (yyyy-mm-dd HH:MM)</label>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<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$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<input type="text" token="end" searchWhenChanged="false">
<label>End Time (yyyy-mm-dd HH:MM)</label>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<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>
<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>
<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"));
});
});
'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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
s2_splunk
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?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
mah
Builder
12-29-2020
02:09 AM
That is not what I understand in the explanation in this link :
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...
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!
Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain
Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...
Splunk Lantern’s Guide to The Most Popular .conf25 Sessions
Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...
Unlock What’s Next: The Splunk Cloud Platform at .conf25
In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...
