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!

Updated Team Landing Page in Splunk Observability

We’re making some changes to the team landing page in Splunk Observability, based on your feedback. The ...

New! Splunk Observability Search Enhancements for Splunk APM Services/Traces and ...

Regardless of where you are in Splunk Observability, you can search for relevant APM targets including service ...

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 ...