Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

Jhanzkie
Path Finder
‎02-17-2022 06:49 AM

Hello.

For once again a noob question.


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

Labels (3)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust
‎02-17-2022 10:55 AM

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

View solution in original post

Reply
Solved! Jump to solution
Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust
‎02-17-2022 10:55 AM

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

Reply
Solved! Jump to solution

Jhanzkie
Path Finder
‎02-17-2022 03:27 PM

thank you , it really helps

0 Karma
Reply
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...