Hi,
I have an inputs.js that has multiple inputs (timerange, multiselect, dropdown etc ). I would like to show / hide an input on a form based on the user selection of a previous input.
I have seen one example on how this is achievable on a form using depends="token", although as all my code is in JavaScript, I would also like to have my inputs in JS as well.
See my example below. Based on the User Selection of DropdownView1, I would like to show or hide DropdownView2. In this case if the user selects "showSummary" , I would like DropdownView2 to be visible. If the user selects one of the other two options I would like the DropdownView2 to be hidden. MultiDropdownView1 and TimeRangeView1 should always be available so are not an issue but have included them for completeness.
require([
'underscore',
'backbone',
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/dropdownview',
'splunkjs/mvc/multidropdownview',
'splunkjs/mvc/textinputview',
'splunkjs/mvc/timerangeview',
'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc, SearchManager, DropdownView, MultiDropdownView, TextInputView, TimeRangeView) {
// MultiDropdownView1 - Environment Selection
var tokens = mvc.Components.get("default");
var InputsSearch = new SearchManager({
id: "InputsSearch1",
earliest_time: "$datefield01.earliest$",
latest_time: "$datefield01.latest$",
preview: false,
cache: false,
autostart: true,
search: "index=xyz …..|table ApplicationDomain"}, {tokens: true, tokenNamespace: "submitted"});
var MultiDropdownView1 = new MultiDropdownView({
id: "MultiDropdownView1",
labelField: 'Domain',
valueField: 'ApplicationDomain',
value: mvc.tokenSafe("$varEnv$"),
managerid: "InputsSearch1",
el: $("#showInputs1")
});
MultiDropdownView1.on("change", function (e) {
console.log("Set the Multiview variable : ", e);
});
// Dropdownview2 - The Page view
var DropdownView1 = new DropdownView({
id: "DropdownView1",
value: mvc.tokenSafe("$varPage$"),
el: $("#showInputs2")
}).render();
var staticchoices = [
{label: " Summary", value: "showSummary"},
{label: " Log Search", value: "logSearch"},
{label: " Log Text Search", value: "logtextSearch"}
];
DropdownView1.settings.set("choices", staticchoices);
DropdownView1.on("change", function (e) {
console.log("Set the page view dropdown variable : ", e);
});
// Date Time Input
var TimeRangeView1 = new TimeRangeView({
id: "TimeRangeView1",
preset: "Last 4 hours",
presets: mypresetvalues,
dialogOptions: mypresetsettings,
el: $("#showInputs3")
}).render();
var mypresetvalues = [
{label: ' MyLast 4 Hours', earliest: '-4h', latest_time: 'now'}
];
var mypresetsettings = {
showPresets: true,
showCustomRealTime: false,
showCustomAdvanced: false
};
InputsSearch.settings.set(TimeRangeView1.val());
// need to add a line for each search.
TimeRangeView1.on("change", function() {
InputsSearch.settings.set(TimeRangeView1.val());
InputsSearch2.settings.set(TimeRangeView1.val());
});
// DropDownView2 - Applications Search
var InputsSearch2 = new SearchManager({
id: "InputsSearch2",
//earliest_time: "$datefield01.earliest$",
//latest_time: "$datefield01.latest$",
preview: false,
cache: false,
autostart: true,
search: "index=xyz …… ApplicationDomain IN ( $varEnv$ ) | table ApplicationID"}, {tokens: true});
var DropdownView2 = new DropdownView({
id: "DropdownView2",
labelField: 'ApplicationID1',
valueField: 'ApplicationID',
managerid: "InputsSearch2",
el: $("#showInputs4")
});
DropdownView2.on("change", function (e) {
console.log("Set the APPLICATIONID1 dropdown variable : ", e);
});
});
↧