Dashboards & Visualizations

How to link multiple panels of dashboard with checkbox

sagar1992
Explorer

HI Team,

I have multiple panels on my dashboard. Need to have checkbox provision so after clicking on the checkbox that particular panel should appear.

Screenshot attachedalt text

How to link checkbox with the panel.

Regards,
Sagar

0 Karma
1 Solution

niketn
Legend

@sagar1992, one of easier option would be to use individual checkboxes with single option for each panel as multiselect option for Checkboxes (and even Multiselect does not work as expected which is a known issue.)

Please try the following workaround with independent search that I had proposed for using Single Checkbox with multiple options.
https://answers.splunk.com/answers/681330/can-i-hideunhide-specific-text-boxes-using-a-singl.html

This example displays textbox/es depending on corresponding checkbox/es checked. Kindly adjust as per your use case.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

vnravikumar
Champion

Hi

Try this, I had created a sample with javascript.

<form script="panel.js">
  <label>showhidepanel</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="field1" id="panel">
      <label>Panel list</label>
      <choice value="panel1">Show Panel1</choice>
      <choice value="panel2">Show Panel2</choice>
      <choice value="panel3">Show Panel3</choice>
      <delimiter> </delimiter>
    </input>
    <input type="text" token="showpanel1" depends="$hide$"></input>
    <input type="text" token="showpanel2" depends="$hide$"></input>
    <input type="text" token="showpanel3" depends="$hide$"></input>
  </fieldset>
  <row>
    <panel depends="$showpanel1$">
      <table>
        <title>Panel1</title>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel depends="$showpanel2$">
      <table>
        <title>Panel2</title>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel depends="$showpanel3$">
      <table>
        <title>Panel3</title>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

Javascript:

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
 ], function ($, mvc,) {
        var panellist= splunkjs.mvc.Components.getInstance("panel");
        var tokens = mvc.Components.get("default");
        if(panellist ==undefined){
            return;
        }
        panellist.on("change",function(){
            var selection = panellist.val();
            var len = selection.length;
            tokens.unset("form.showpanel1");
            tokens.unset("form.showpanel2");
            tokens.unset("form.showpanel3");
            for (var i = 0; i < len; i++) { 
                switch(selection[i]){
                    case  "panel1":
                        tokens.set("form.showpanel1", true);
                        break;
                    case  "panel2":
                        tokens.set("form.showpanel2", true);
                        break;
                    case  "panel3":
                        tokens.set("form.showpanel3", true);
                     break;
                    default:
                        tokens.unset("form.showpanel1");
                        tokens.unset("form.showpanel2");
                        tokens.unset("form.showpanel3");

                }

            }

        });
});

sagar1992
Explorer

Thanks for the reply. I dont really have access to place this js/css. Simple xml configuration worked.

0 Karma

niketn
Legend

@sagar1992, one of easier option would be to use individual checkboxes with single option for each panel as multiselect option for Checkboxes (and even Multiselect does not work as expected which is a known issue.)

Please try the following workaround with independent search that I had proposed for using Single Checkbox with multiple options.
https://answers.splunk.com/answers/681330/can-i-hideunhide-specific-text-boxes-using-a-singl.html

This example displays textbox/es depending on corresponding checkbox/es checked. Kindly adjust as per your use case.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

sagar1992
Explorer

sagar1992
Explorer

Hello @niketnilay , is it possible to keep one checkbox with all option, as soon as i click on all, all panels should be visible.

I tried "$panel1,$all" but this wont work, individual panels gets affected.

0 Karma

niketn
Legend

Great. Yeah that is the original thread where we have documented the issue and provided a temporary Simple XML fix as workaround until original issue is fixed by Splunk 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...