Dashboards & Visualizations

How to display text boxes upon clicking button

DarkSky_18
Loves-to-Learn

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>

                <!-- Centered button container -->
                <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

 

0 Karma

dural_yyz
Motivator

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>
        <!-- Centered button container -->
        <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>

 

 

 

0 Karma
Get Updates on the Splunk Community!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...