Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | 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!

Observability Unlocked: Kubernetes Monitoring with Splunk Observability Cloud

  Ready to master Kubernetes and cloud monitoring like the pros?Join Splunk’s Growth Engineering team for an ...

Wrapping Up Cybersecurity Awareness Month

October might be wrapping up, but for Splunk Education, cybersecurity awareness never goes out of season. ...

🌟 From Audit Chaos to Clarity: Welcoming Audit Trail v2

&#x1f5e3; You Spoke, We Listened  Audit Trail v2 wasn’t written in isolation—it was shaped by your voices.  In ...