How to pass a dropdown selection to a search query for table expansion using javascript in Splunk 6.1?

[harshal_chakran]

Hi,
I am trying to use the Table Expansion model in Splunk 6.1 Overview Application's .
I see that there is a query inside table_row_expansion.js javascript file, which gives the result of table expansion. And it takes the row name as an input to its search query.
I have added one dropdown above the table in dashboard.What I am trying to do is to pass the dropdown selection to this search query in javascript file. As I am not strong in javascripting. Can anybody please help.

[Patient]

Hello Harshal,

For your exemple, below is an exemple for How to pass a dropdown selection to a search query for table expansion using javascript in Splunk 6.1

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css">
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />

    <style>
        .panel {
            overflow: visible;
        }
        .panel-body h5, .splunk-multidropdown, #dropdown1-text{
            margin-left: 10px;
            margin-bottom: 5px;
        }
    </style>
{% endblock css %}

{% block content %}

<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="row">
        <div class="span12 dashboard-header clearfix">
            <h2>Multidropdown lists</h2>
        </div>
    </div>
    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Multidropdown with a table</h3>
                    </div>
                    <div class="panel-body">
                        <p>This example shows a multidropdown list that updates the visible columns in a table.</p>

                        <h5>Select the columns to add:</h5>
                        {% multidropdown id="multidropdown2" managerid="fieldsSearch" valueField="field" %}

                        {% table id="rt1" managerid="rt-search" fields="_time sourcetype" %}
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{% endblock content%}

{% block managers %}

    {% searchmanager id="fieldsSearch" search="index=_internal | head 5000 | fieldsummary | where count>3000" rf="*" %}

    {% searchmanager id="rt-search" search="index=_internal | head 5000" rf="*" %}

{% endblock managers %}

{% block js %}
<script>
    require(["splunkjs/ready!"], function(mvc) {
        var _ = require("underscore");        
        var multidropdown2 = mvc.Components.getInstance("multidropdown2");       
        var rt1 = mvc.Components.getInstance("rt1"); 

        var defaultNamespace = mvc.Components.getInstance("default"); 

        var selectionText = $("#dropdown1-text");
        multidropdown1.on("change", function() {
            selectionText.text(multidropdown1.val().join(", "));
        });


    });
</script>

{% endblock js %}

To understand it very well, yo can also dowload and install Splunk Web Framework Toolkit app
https://apps.splunk.com/app/1613/release/1.1/agree/
after it done select multidropdown dashboard to learn more.