Solved: Is it possible to add dropdown inside a panel with...

Jhanzkie · ‎02-17-2022

Hello.

For once again a noob question.

Is it possible to add dropdown inside a panel with a table using javascript ?

kamlesh_vaghela · ‎02-17-2022

Please check below code.

XML:

<dashboard script="a.js">
<label>Single View in HTML Example</label>
<row>
  <panel>
    <html>
      <div>Hello World</div>
      <table border="1" style="width:800px" >
        <thead>
          <td>
            DropDown 1
          </td>
          <td>
            DropDown 2
          </td>
        </thead>
        <tr>
          <td>
            <div id="divDropDown1"></div>
          </td>
          <td>
            <div id="divDropDown2"></div>
          </td>
        </tr>
      </table>
    </html>
  </panel>
</row>
</dashboard>

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    var DropdownView = require("splunkjs/mvc/dropdownview");
    var SearchManager = require("splunkjs/mvc/searchmanager");

    var sampleSearch = new SearchManager({
        id: "sampleSearch",
        earliest_time: "-1d@d",
        latest_time: "",
        preview: true,
        autostart: false,
        cache: false,
        search: 'index=_internal | stats count by sourcetype'
    });
    $(document).ready(function() {
        var myDropDown1 = new DropdownView({
            id: "example-single" + Date.now(),
            managerid: "sampleSearch",
            default: "splunkd",
            labelField: "sourcetype",
            valueField: "sourcetype",
            el: $("#divDropDown1")
        }).render();
        var myDropDown2 = new DropdownView({
            id: "example-single" + Date.now(),
            default: "splunkd_access",
            managerid: "sampleSearch",
            labelField: "sourcetype",
            valueField: "sourcetype",
            el: $("#divDropDown2")
        }).render();
        sampleSearch.startSearch();
    })
});

KV

View solution in original post

kamlesh_vaghela · ‎02-17-2022

Yes @Jhanzkie

Please check below code.

XML:

<dashboard script="a.js">
<label>Single View in HTML Example</label>
<row>
  <panel>
    <html>
      <div>Hello World</div>
      <table border="1" style="width:800px" >
        <thead>
          <td>
            DropDown 1
          </td>
          <td>
            DropDown 2
          </td>
        </thead>
        <tr>
          <td>
            <div id="divDropDown1"></div>
          </td>
          <td>
            <div id="divDropDown2"></div>
          </td>
        </tr>
      </table>
    </html>
  </panel>
</row>
</dashboard>

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    var DropdownView = require("splunkjs/mvc/dropdownview");
    var SearchManager = require("splunkjs/mvc/searchmanager");

    var sampleSearch = new SearchManager({
        id: "sampleSearch",
        earliest_time: "-1d@d",
        latest_time: "",
        preview: true,
        autostart: false,
        cache: false,
        search: 'index=_internal | stats count by sourcetype'
    });
    $(document).ready(function() {
        var myDropDown1 = new DropdownView({
            id: "example-single" + Date.now(),
            managerid: "sampleSearch",
            default: "splunkd",
            labelField: "sourcetype",
            valueField: "sourcetype",
            el: $("#divDropDown1")
        }).render();
        var myDropDown2 = new DropdownView({
            id: "example-single" + Date.now(),
            default: "splunkd_access",
            managerid: "sampleSearch",
            labelField: "sourcetype",
            valueField: "sourcetype",
            el: $("#divDropDown2")
        }).render();
        sampleSearch.startSearch();
    })
});

KV

Jhanzkie · ‎02-17-2022

thank you , it really helps

Is it possible to add dropdown inside a panel with a table using javascript?

javascript

panel

table

Introducing the Splunk Community Dashboard Challenge!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

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