Splunk Search

How to create drop-down search inputs in HTML to filter my data?

pmardo
New Member

I want to have search inputs/drop downs that can filter out my data similar to this question:
https://answers.splunk.com/answers/148500/how-to-set-up-three-dynamic-dropdowns-on-dashboard-in-simp...

Is there a way to do this in HTML?

Tags (3)
0 Karma
1 Solution

renjith_nair
SplunkTrust
SplunkTrust

Yes it's possible in HTML. Easiest way is to create it in xml and convert it to html

Here is an example of adding a dropdown to existing html dashboard.

Add div tags for the element

<div class="fieldset">
        <div class="input input-dropdown" id="input1">
            <label>MyLabel</label>
        </div>
    </div>

Add a search to populate the drop down. You can skip it if you have only static values

            var search2 = new SearchManager({
            "id": "search2",
            "latest_time": "now",
            "earliest_time": "-24h@h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "search": "index=*|stats count by sourcetype",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true});

Create the element and add a function to handle dropdown change. Static values can be added in choices

         var input1 = new DropdownInput({
            "id": "input1",
            "choices": [
                {"value": "*", "label": "All"}
            ],
            "labelField": "sourcetype",
            "selectFirstChoice": false,
            "default": "*",
            "valueField": "sourcetype",
            "showClearButton": true,
            "searchWhenChanged": true,
            "value": "$form.srctype$",
            "managerid": "search2",
            "el": $('#input1')
        }, {tokens: true}).render();

        input1.on("change", function(newValue) {
            FormUtils.handleValueChange(input1);
        });

If you don't have dynamic values managerid can be removed which has a reference to the previously created search .

Please refer here for more details : http://dev.splunk.com/view/webframework-htmldashboards/SP-CAAAETK

Happy Splunking!

View solution in original post

renjith_nair
SplunkTrust
SplunkTrust

Yes it's possible in HTML. Easiest way is to create it in xml and convert it to html

Here is an example of adding a dropdown to existing html dashboard.

Add div tags for the element

<div class="fieldset">
        <div class="input input-dropdown" id="input1">
            <label>MyLabel</label>
        </div>
    </div>

Add a search to populate the drop down. You can skip it if you have only static values

            var search2 = new SearchManager({
            "id": "search2",
            "latest_time": "now",
            "earliest_time": "-24h@h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "search": "index=*|stats count by sourcetype",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true});

Create the element and add a function to handle dropdown change. Static values can be added in choices

         var input1 = new DropdownInput({
            "id": "input1",
            "choices": [
                {"value": "*", "label": "All"}
            ],
            "labelField": "sourcetype",
            "selectFirstChoice": false,
            "default": "*",
            "valueField": "sourcetype",
            "showClearButton": true,
            "searchWhenChanged": true,
            "value": "$form.srctype$",
            "managerid": "search2",
            "el": $('#input1')
        }, {tokens: true}).render();

        input1.on("change", function(newValue) {
            FormUtils.handleValueChange(input1);
        });

If you don't have dynamic values managerid can be removed which has a reference to the previously created search .

Please refer here for more details : http://dev.splunk.com/view/webframework-htmldashboards/SP-CAAAETK

Happy Splunking!

pmardo
New Member

I can't seem to get it to filter my data. The drop down lists all the correct data, but I can't seem to filter out information.

For example:

Sample Stat Table: NAME, ID, FavoriteColor

Data/Inputs in the collection:
Abby, 01, Blue
Bill, 02, Green
Chris, 03, Purple

My dropdown is searching based on the ID. So when I click my drop down, it lists: 01,02,03. However, if I select 03, it does nothing. Same with all other IDs. Is there something I'm missing?

I want to be able to list all data based on the ID, even if there are duplicates.

For example:
Abby, 01, Blue
Bill, 02, Green
Chris, 03, Purple
Daniella, 03, Black

If I search on all IDs with 03, I'll get:
Chris, 03, Purple
Daniella, 03, Black

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...