Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
Dashboards & Visualizations
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
- Splunk 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...
Get Updates on the Splunk Community!
Adoption of RUM and APM at Splunk
Unleash the power of Splunk Observability
Watch Now
In this can't miss Tech Talk! The Splunk Growth ...
Routing logs with Splunk OTel Collector for Kubernetes
The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...
Welcome to the Splunk Community!
(view in My Videos)
We're so glad you're here!
The Splunk Community is place to connect, learn, give back, and ...
