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

});
Get Updates on the Splunk Community!

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer at Splunk .conf24 ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...

Share Your Ideas & Meet the Lantern team at .Conf! Plus All of This Month’s New ...

Splunk Lantern is Splunk’s customer success center that provides advice from Splunk experts on valuable data ...

Combine Multiline Logs into a Single Event with SOCK: a Step-by-Step Guide for ...

Combine multiline logs into a single event with SOCK - a step-by-step guide for newbies Olga Malita The ...