My office currently has a query tool that allows users to query a database to generate reports. On the query form, the user can select "where criteria" from a drop-down list of fields and then enter the value the are looking for in a text box next to the drop-down list. If they want more fields in the where criteria, the click a button and a new drop-down/text/button grouping is added to the UI along with radio buttons so they can choose AND or OR.
Our goal is to get rid of the database & webapp and move all of that data and functionality into splunk. My task is to copy this functionality in a splunk dashboard. I started with a simple XML dashboard with a drop-down input and a text input. I converted that to HTML. So far so good. I added an HTML table to the html so I can just add a row when the button is clicked. The relevant HTML section looks like this:
Then I added an on-click method to my button to create the new inputs and add them (as a row) to the HTML table above. The method looks like this:
var num_filters=1;
$("#btn-1").on("click", function() {
num_filters++;
var txtName="txt-" + num_filters;
var ddName = "dd-" + num_filters;
var pbName= "btn-" + num_filters;
var newDropDown = new DropdownInput({
"id": ddName,
"choices": [
{"label": "Last Name", "value":"lname"},
{"label": "City","value":"city"}
],
"selectFirstChoice": false,
"value": "$form.f_tok$",
"el" $('#' + ddName);
}, {tokens: true}).render();
var appendStr = "
text here