How to display text boxes upon clicking button

DarkSky_18 — Sat, 02 Nov 2024 12:47:31 GMT

Hi All,

I just wanted to know if there is any way to display text boxes upon clicking any of the buttons in my dashboard. I uploaded pic for your reference.

Upon clicking any of the button, i want to display 2 text boxes. And later i would like to provide input in those text boxes and search for the logs.

<dashboard version="1.1" script="customview.js" theme="dark"> <label>Search Dashboard</label> <row> <panel> <html> <h1 style="text-align: center;">Choose from the below options to get started :)</h1>  <div style="display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px;"> <button id="proxySearch" onclick="showTextBoxes()" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;">Proxy Search</button> <button id="WAFsearch" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;">WAF Search</button> <button id="DNSsearch" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;">DNS Search</button> <button id="Emailsearch" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;">Email Search</button> </div> <div id="mychart"></div> </html> </panel> </row> </dashboard>

I first wanted to know how to show text boxes upon clicking any of the button. I know we have to use js for this kind of activity, but can anyone suggest how it needs to be done?

DarkSky_18_0-1730551490330.png

Re: How to display text boxes upon clicking button

dural_yyz — Thu, 07 Nov 2024 19:53:23 GMT

Ok I had fun with this one. I've never embedded JavaScript before so this was brand new for me. I will tell you that if you change the js code you likely need to restart Splunk and I had to add a reset all button cause I did find some odd token behavior if you edit the xml on the fly.
JavaScript

require([ "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!" ], function(mvc) { // Get your div var var_proxysearch = $("#btn_proxysearch"); var var_wafsearch = $("#btn_wafsearch"); var var_dnssearch = $("#btn_dnssearch"); var var_emailsearch = $("#btn_emailsearch"); var var_resetall = $("#btn_resetall"); // lets play hide and seek var_proxysearch.on("click", function(f_proxysearch) { var tokens = mvc.Components.get("submitted"); tokens.set("tok_proxysearch","TRUE"); tokens.unset("tok_wafsearch"); tokens.unset("tok_dnssearch"); tokens.unset("tok_emailsearch"); }); var_wafsearch.on("click", function(f_wafsearch) { var tokens = mvc.Components.get("submitted"); tokens.unset("tok_proxysearch"); tokens.set("tok_wafsearch","TRUE"); tokens.unset("tok_dnssearch"); tokens.unset("tok_emailsearch"); }); var_dnssearch.on("click", function(f_dnssearch) { var tokens = mvc.Components.get("submitted"); tokens.unset("tok_proxysearch"); tokens.unset("tok_wafsearch"); tokens.set("tok_dnssearch","TRUE"); tokens.unset("tok_emailsearch"); }); var_emailsearch.on("click", function(f_emailsearch) { var tokens = mvc.Components.get("submitted"); tokens.unset("tok_proxysearch"); tokens.unset("tok_wafsearch"); tokens.unset("tok_dnssearch"); tokens.set("tok_emailsearch","TRUE"); }); var_resetall.on("click", function(f_resetall) { var tokens = mvc.Components.get("submitted"); tokens.unset("tok_proxysearch"); tokens.unset("tok_wafsearch"); tokens.unset("tok_dnssearch"); tokens.unset("tok_emailsearch"); });

Here is the XML

<form script="btn_hide_n_seek.js" version="1.1" theme="dark"> <label>Answers - Classic - Hide and Seek</label> <fieldset submitButton="false"> <input type="text" token="tok_field1" depends="$tok_proxysearch$"> <label>Proxy</label> </input> <input type="text" token="tok_field2" depends="$tok_wafsearch$"> <label>WAF</label> </input> <input type="text" token="tok_field3" depends="$tok_dnssearch$"> <label>DNS</label> </input> <input type="text" token="tok_field4" depends="$tok_emailsearch$"> <label>Email</label> </input> </fieldset> <row> <panel> <html> <h1 style="text-align: center;">Choose from the below options to get started :)</h1>  <div style="display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px;"> <button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_proxysearch">Proxy Search</button> <button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_wafsearch">WAF Search</button> <button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_dnssearch">DNS Search</button> <button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_emailsearch">Email Search</button> <button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_resetall">Reset All</button> </div> </html> </panel> </row> <row id="rows_proxy" depends="$tok_proxysearch$"> <panel> <html> <h1 style="text-align: center;">Proxy Row(s)</h1> </html> </panel> </row> <row id="rows_waf" depends="$tok_wafsearch$"> <panel> <html> <h1 style="text-align: center;">WAF Row(s)</h1> </html> </panel> </row> <row id="rows_dns" depends="$tok_dnssearch$"> <panel> <html> <h1 style="text-align: center;">DNS Row(s)</h1> </html> </panel> </row> <row id="rows_email" depends="$tok_emailsearch$"> <panel> <html> <h1 style="text-align: center;">Email Search</h1> </html> </panel> </row> </form>

topic How to display text boxes upon clicking button in Dashboards & Visualizations

How to display text boxes upon clicking button

Re: How to display text boxes upon clicking button