How to pass an input variable from Splunk dasboard to a search string in the java script?

[hwakonwalk]

I have a dashboard with an input variable that displays data in an a table with row extension functionality using JS. I want the query in the JS to use the variable value 'patient_id' passed from the input box on the main dashboard. My JS script goes like:

require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'],function(
TableView,
ChartView,
SearchManager,
mvc,
_
){
var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
    initialize: function(args) {
        // initialize will run once, so we will set up a search and a chart to be reused.
        this._searchManager = new SearchManager({
            id: 'details-search-manager',
            preview: false
        });
        this._chartView = new ChartView({
            managerid: 'details-search-manager',
            'charting.legend.placement': 'none'
        });
    },
    canRender: function(rowData) {
        // Since more than one row expansion renderer can be registered we let each decide if they can handle that data. Here we will always handle it.
        return true;
    },
    render: function($container, rowData) {
        // rowData contains information about the row that is expanded.  We can see the cells, fields, and valuesWe will find the sourcetype cell to use its value
        var sourcetypeCell = _(rowData.cells).find(function (cell) {
           return cell.field === 'VitalName';
        });
        //update the search with the sourcetype that we are interested in
        this._searchManager.set({ search: 'source=Splunk_Oracle_Database_Connection PATIENT_ID=2 | timechart span=1m avg(' + sourcetypeCell.value + ')'});
        // $container is the jquery object where we can put out content. In this case we will render our chart and add it to the $container
        $container.append(this._chartView.render().el);
    }
});
var tableElement = mvc.Components.getInstance("expand_with_events");
tableElement.getVisualization(function(tableView) {
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});

I want the Hard coded PATIENT_ID to be passed from main dashboard
I am very new to splunk and programming, please help me with possible modifications to this script

[alacercogitatus]

Would be much easier to do this in SimpleXML. Have a form, then pass the value in via token. You can do something similar here.

Call the dashboard as a drill down with <dashboard_name>?form.patient_id=4, then use JS/JQuery to gather the GET params, then typical javascripty things to put it into place.

Or follow this as well: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

[hwakonwalk]

Hi, Thanks for the resolution, I tried it but somehow it doesn't work for me
I am very new to programming and would appreciate if you provide me with some more help to fix it, my JS file goes as below:

require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'],function(
TableView,
ChartView,
SearchManager,
mvc,
_
){

var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
    initialize: function(args) {
        // initialize will run once, so we will set up a search and a chart to be reused.
        this._searchManager = new SearchManager({
            id: 'details-search-manager',
            preview: false
        });
        this._chartView = new ChartView({
            managerid: 'details-search-manager',
            'charting.legend.placement': 'none'
        });
    },


    canRender: function(rowData) {
        // Since more than one row expansion renderer can be registered we let each decide if they can handle that
        // data
        // Here we will always handle it.
        return true;
    },

    render: function($container, rowData) {
        // rowData contains information about the row that is expanded.  We can see the cells, fields, and values
        // We will find the sourcetype cell to use its value
        var sourcetypeCell = _(rowData.cells).find(function (cell) {
           return cell.field === 'VitalName';
        });

        //update the search with the sourcetype that we are interested in
        this._searchManager.set({ search: 'source=Splunk_Oracle_Database_Connection PATIENT_ID=' + $Patient_Id1$ + 'earliest=-5d| timechart span=1m avg(' + sourcetypeCell.value + ')'});
        $container.append(this._chartView.render().el);
    }
});

var tableElement = mvc.Components.getInstance("expand_with_events");
tableElement.getVisualization(function(tableView) {
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});

});