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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...