Re: Why my button submit does not work ?

mah · ‎12-27-2020

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>

#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 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="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="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="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="link" id="submit_button">
<label></label>
<choice value="submit">Submit</choice>
</input>
<table>

<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.

s2_splunk · ‎12-28-2020

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

mah · ‎12-29-2020

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...

Why my button submit does not work ?

panel

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

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

Laser Bananas and Edge Hubs: Exploring Operational Technology (OT) Data Through a ...

Event Series: Mastering AI Tokenomics and Splunk Agent Observability

span_metrics: The OpenTelemetry-Idiomatic Way to See Inside Your Services

Join the Conversation