I have a dashboard with a some input fields. The dropdowns are dependent on the value selected from radio group. This is all working good with the Simple XML. But, when I convert the dashboard to HTML, the dependent inputs are not working at all. Both dropdowns are always showing up regardless of the value I select from the radio options. Can someone please help me what is wrong? Is this a bug or not supported functionality?
Here is the Simple XML:
<form>
<label>Inputs test XML</label>
<init>
<set token="show_typeone">true</set>
</init>
<fieldset submitButton="false">
<input type="radio" token="type">
<label>Type</label>
<choice value="onevalue">One</choice>
<choice value="twovalue">Two</choice>
<change>
<condition value="onevalue">
<set token="show_typeone">true</set>
<unset token="show_typetwo"></unset>
</condition>
<condition value="twovalue">
<set token="show_typetwo">true</set>
<unset token="show_typeone"></unset>
</condition>
</change>
</input>
<input type="dropdown" token="typeoneval" depends="$show_typeone$">
<label>Type One Dropdown</label>
<choice value="*">All</choice>
<choice value="Option1">Option 1</choice>
<choice value="Option2">Option 2</choice>
<default>*</default>
<initialValue>*</initialValue>
</input>
<input type="dropdown" token="typetwoval" depends="$show_typetwo$">
<label>Type Two Dropdown</label>
<choice value="*">All</choice>
<choice value="option3">Option 3</choice>
<choice value="option4">Option4</choice>
<default>*</default>
<initialValue>*</initialValue>
</input>
</fieldset>
</form>
And here is the converted HTML:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Inputs test HTML</title>
<link rel="shortcut icon" href="/en-US/static/@58B3D876487358601EC51271BFEA7491DCAC8CCE4FAAC2CCAD025652BA622EC9.51:1542407278/app/search/customfavicon/logo_ims_health.ico" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/splunkjs-dashboard.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
<meta name="referrer" content="never" />
<meta name="referrer" content="no-referrer" />
<script>
window._splunk_metrics_events = {
push : function() {},
active: false,
}
</script>
</head>
<body class="simplexml preload locale-en" data-splunk-version="7.1.4" data-splunk-product="enterprise">
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<header>
<a aria-label="Screen reader users, click here to skip the navigation bar" class="navSkip" href="#navSkip" tabIndex="1">Skip Navigation ></a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
<a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
</header>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Inputs test HTML</h2>
</div>
<div class="fieldset">
<div class="input input-radio" id="input1">
<label>Type</label>
</div>
<div class="input input-dropdown" id="input2">
<label>Type One Dropdown</label>
</div>
<div class="input input-dropdown" id="input3">
<label>Type Two Dropdown</label>
</div>
</div>
</div>
<!--
END LAYOUT
-->
<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/simplexml/index.js"></script>
<script type="text/javascript">
// <![CDATA[
// <![CDATA[
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/layoutview",
"splunkjs/mvc/simplexml/dashboardview",
"splunkjs/mvc/simplexml/dashboard/panelref",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simplexml/element/visualization",
"splunkjs/mvc/simpleform/formutils",
"splunkjs/mvc/simplexml/eventhandler",
"splunkjs/mvc/simplexml/searcheventhandler",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/linklist",
"splunkjs/mvc/simpleform/input/multiselect",
"splunkjs/mvc/simpleform/input/checkboxgroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel"
// Add comma-separated libraries and modules manually here, for example:
// ..."splunkjs/mvc/simplexml/urltokenmodel",
// "splunkjs/mvc/tokenforwarder"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
LayoutView,
Dashboard,
PanelRef,
ChartElement,
EventElement,
HtmlElement,
ListElement,
MapElement,
SingleElement,
TableElement,
VisualizationElement,
FormUtils,
EventHandler,
SearchEventHandler,
DropdownInput,
RadioGroupInput,
LinkListInput,
MultiSelectInput,
CheckboxGroupInput,
TextInput,
TimeRangeInput,
SubmitButton,
SearchManager,
SavedSearchManager,
PostProcessManager,
UrlTokenModel
// Add comma-separated parameter names here, for example:
// ...UrlTokenModel,
// TokenForwarder
) {
var pageLoading = true;
//
// TOKENS
//
// Create token namespaces
var urlTokenModel = new UrlTokenModel();
mvc.Components.registerInstance('url', urlTokenModel);
var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});
urlTokenModel.on('url:navigate', function() {
defaultTokenModel.set(urlTokenModel.toJSON());
if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
submitTokens();
} else {
submittedTokenModel.clear();
}
});
// Initialize tokens
defaultTokenModel.set(urlTokenModel.toJSON());
function submitTokens() {
// Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
FormUtils.submitForm({ replaceState: pageLoading });
}
function setToken(name, value) {
defaultTokenModel.set(name, value);
submittedTokenModel.set(name, value);
}
function unsetToken(name) {
defaultTokenModel.unset(name);
submittedTokenModel.unset(name);
}
//
// SEARCH MANAGERS
//
//
// SPLUNK LAYOUT
//
$('header').remove();
new LayoutView({"hideSplunkBar": false, "hideAppBar": false, "hideChrome": false})
.render()
.getContainerElement()
.appendChild($('.dashboard-body')[0]);
//
// DASHBOARD EDITOR
//
new Dashboard({
id: 'dashboard',
el: $('.dashboard-body'),
showTitle: true,
editable: true
}, {tokens: true}).render();
//
// VIEWS: VISUALIZATION ELEMENTS
//
//
// VIEWS: FORM INPUTS
//
var input1 = new RadioGroupInput({
"id": "input1",
"choices": [
{"value": "onevalue", "label": "One"},
{"value": "twovalue", "label": "Two"}
],
"selectFirstChoice": false,
"searchWhenChanged": true,
"value": "$form.type$",
"el": $('#input1')
}, {tokens: true}).render();
input1.on("change", function(newValue) {
FormUtils.handleValueChange(input1);
});
input1.on("valueChange", function(e) {
if (e.value === "onevalue") {
EventHandler.setToken("show_typeone", "true", {}, e.data);
EventHandler.unsetToken("show_typetwo");
} else if (e.value === "twovalue") {
EventHandler.setToken("show_typetwo", "true", {}, e.data);
EventHandler.unsetToken("show_typeone");
}
});
var input2 = new DropdownInput({
"id": "input2",
"tokenDependencies": {"depends": "$show_typeone$"},
"choices": [
{"value": "*", "label": "All"},
{"value": "Option1", "label": "Option 1"},
{"value": "Option2", "label": "Option 2"}
],
"default": "*",
"initialValue": "*",
"selectFirstChoice": false,
"searchWhenChanged": true,
"showClearButton": true,
"value": "$form.typeoneval$",
"el": $('#input2')
}, {tokens: true}).render();
input2.on("change", function(newValue) {
FormUtils.handleValueChange(input2);
});
var input3 = new DropdownInput({
"id": "input3",
"tokenDependencies": {"depends": "$show_typetwo$"},
"choices": [
{"value": "*", "label": "All"},
{"value": "option3", "label": "Option 3"},
{"value": "option4", "label": "Option4"}
],
"default": "*",
"initialValue": "*",
"selectFirstChoice": false,
"searchWhenChanged": true,
"showClearButton": true,
"value": "$form.typetwoval$",
"el": $('#input3')
}, {tokens: true}).render();
input3.on("change", function(newValue) {
FormUtils.handleValueChange(input3);
});
DashboardController.onReady(function() {
if (!submittedTokenModel.has('earliest') && !submittedTokenModel.has('latest')) {
submittedTokenModel.set({ earliest: '0', latest: '' });
}
});
// Initialize time tokens to default
if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
defaultTokenModel.set({ earliest: '0', latest: '' });
}
if (!_.isEmpty(urlTokenModel.toJSON())){
submitTokens();
}
//
// DASHBOARD READY
//
DashboardController.ready();
pageLoading = false;
}
);
// ]]>
</script>
</body>
</html>
... View more