Same way you add it to any SplunkJS content, actually. Include a <div id="blah"></div> in your HTML, and then have the form elements trigger there. If you can get it working in normal SplunkJS (including doing a normal dashboard, then converting), it should work just fine in the modal (after you move things around).
Here's a working code segment from Splunk Security Essentials (if you open a time series use case and click "Schedule High Cardinality Alert"). The actual modal code is probably not as polished since it was my first time adapting someone else's code, and the SplunkJS is slightly non-traditional, but it's not too crazy. If you want to view in context, it is in the app Splunk Security Essentials, appserver/static/components/pages/showcase_standard_deviation.js
outliersVizAlertModal = new Modal('outliersVizAlertModal', {
title: 'Schedule an alert',
destroyOnHide: false,
type: 'wide'
});
var outlierSearchTypeControl = new DropdownView({
id: 'outliersVizAlertModalTypeControl',
el: $('<span>'),
labelField: 'label',
valueField: 'value',
showClearButton: false,
choices: [{ value: 'both', label: 'outside both thresholds' }, { value: 'above', label: 'above the upper threshold' }, { value: 'below', label: 'below the lower threshold' }]
}).render();
var outliersVizAlertModalValueControl = new TextInputView({
id: 'outliersVizAlertModalValueControl',
el: $('<span>')
}).render();
var indexesSearch = new SearchManager({
"id": "indexesSearch",
"cancelOnUnload": true,
"latest_time": "0",
"sample_ratio": null,
"status_buckets": 0,
"earliest_time": "now",
"search": "| rest /services/data/indexes | search disabled=0 title!=_* | table title | sort title | streamstats count | eval count=if(title=\"summary\",0,count) | sort count | fields - count",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true,
"runWhenTimeIsUndefined": false
}, {tokens: true});
var DropdownInput = require("splunkjs/mvc/simpleform/input/dropdown");
var indexesSearchTypeControl = new DropdownInput({
"id": "indexesSearchTypeControl",
"choices": [],
"labelField": "title",
"selectFirstChoice": true,
"valueField": "title",
"showClearButton": true,
"searchWhenChanged": true,
"managerid": "indexesSearch",
"el": $('<span>')
}, {tokens: true}).render();
var TextInput = require("splunkjs/mvc/simpleform/input/text");
var SummaryUniqueName = new TextInput({
"id": "SummaryUniqueName",
"default": "",
"el": $('<span>')
}, {tokens: true}).render();
SummaryUniqueName.on("load", function(){
$(".mlts-modal-submit").last()[0].disabled=true
});
SummaryUniqueName.on("keydown",function(properties){
if(document.getElementById("SummaryUniqueName_Validation") == null){
$("#SummaryUniqueName").after("<div id=\"SummaryUniqueName_Validation\">Invalid</div>")
}
var Errors=new Array()
if(properties.length<8){
Errors.push("Name not long enough (" + properties.length + " characters). Performance will be better with at least 8 characters");
}
if(properties.search(/[^a-zA-Z0-9]/) >0){
Errors.push("Invalid character detected. Only alphanumeric characters permitted (a-z, A-Z, 0-9).");
}
if(Errors.length>0){
$(".mlts-modal-submit").last()[0].disabled=true
document.getElementById("SummaryUniqueName_Validation").innerHTML = "<p>" + Errors.join("</p><p>") + "</p>"
}else{
$(".mlts-modal-submit").last()[0].disabled=false
document.getElementById("SummaryUniqueName_Validation").innerHTML = "<p>Valid!</p>"
}
});
outliersVizAlertModal.body.addClass('mlts-modal-form-inline').append($('<p>').text('Alert me when the number of outliers '), outlierSearchTypeControl.$el, $('<p>').text('is greater than '), outliersVizAlertModalValueControl.$el, $('<br>'), $('<br>'), $('<p>').text("Choose the index that our summary indexed results will be stored in:"), indexesSearchTypeControl.$el, $('<br>'), $('<br/>'), $('<p>').text("Choose the unique name that will identify these events -- alphanumeric, no spaces, no punctuation, at least 8 characters:"), SummaryUniqueName.$el, $("<button>Validate String</button>"));
outliersVizAlertModal.footer.append($('<button>').addClass('mlts-modal-cancel').attr({
type: 'button',
'data-dismiss': 'modal'
}).addClass('btn btn-default mlts-modal-cancel').text('Cancel'), $('<button>').attr({
type: 'button'
}).on('click', function () { .....
... View more
