Dashboards & Visualizations

Use a CSS button to hide splunk panels

architkhanna
Path Finder

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.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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;
    });

});
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

Rounding off the Splunk Dashboard Contest

What does a contest-winning Splunk dashboard look like? In this case, it isn't in a browser tab at all. It ...

A Four Part Event Series: AI + Observability: AI Agents, LLMs, Apps, & Infrastructure

AI &#43; Observability: AI Agents, LLMs, Apps, & Infrastructure The rapid evolution of artificial intelligence ...

Splunk Technical Support Is Moving to Cisco Support Tools

Introduction Splunk technical support is transitioning to Cisco’s support environment. This change brings ...