Re: Use a CSS button to hide splunk panels

architkhanna · ‎05-14-2019

I have a button on a panel X of a dashboard which clears filters/tokens on all other panels (A,B,C) in same dashboard.
I want to use the same button to hide panels(A,B,C) all together and visible once I click on any value of the same panel(X)

Any help would be appreciated.

kamlesh_vaghela · ‎05-15-2019

@architkhanna

Can you please try this?

<dashboard script="myJS.js">
  <label>Click Button</label>
  <row>
    <panel>
      <title>X</title>
      <html>
        <input id="btn" type="button" value="Hide"/>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$tknA$">
      <table>
        <title>A</title>
        <search>
          <query>| stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel depends="$tknB$">
      <table>
        <title>B</title>
        <search>
          <query>| stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel depends="$tknC$">
      <table>
        <title>C</title>
        <search>
          <query>| stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

myJS.js

require([
        "splunkjs/mvc",
        "splunkjs/mvc/simplexml/ready!"
    ], function (
        mvc) {
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    var flag=true;

    $("#btn").on("click", function () {
         console.log("lllllllll");
        if(flag)
        {
            defaultTokenModel.set("tknA", "Hi");
            defaultTokenModel.set("tknB", "Hi");
            defaultTokenModel.set("tknC", "Hi");
            submittedTokenModel.set("tknA", "Hi");
            submittedTokenModel.set("tknB", "Hi");
            submittedTokenModel.set("tknC", "Hi");
            flag = false;
        }
        else {
            defaultTokenModel.unset("tknA");
            defaultTokenModel.unset("tknB");
            defaultTokenModel.unset("tknC");
            submittedTokenModel.unset("tknA");
            submittedTokenModel.unset("tknB");
            submittedTokenModel.unset("tknC");

            flag = true;
        }
        submittedTokenModel.set(defaultTokenModel.toJSON());
        return false;
    });

});

Use a CSS button to hide splunk panels

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.

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)

Automating Threat Operations and Threat Hunting with Recorded Future

Join the Conversation