Why depends not working when simple XML dashboard ...

kjandhyala · ‎01-24-2019

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>

niketn · ‎01-24-2019

@kjandhyala I would hope depends/rejects to work once Simple XML is converted to HTML Dashboard. However, if you already have converted dashboard to HTML why don't you mix CSS and JS code to set the visibility of specific panel <div> as hidden/visible? That would also be straightforward. Moreover HTML dashboards are meant to provide you control over the contents similar to Web Pages.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Why depends not working when simple XML dashboard is converted to HTML?

Get Inspired! We’ve Got Validation that Your Hard Work is Paying Off

What's New in Splunk Enterprise 9.4: Features to Power Your Digital Resilience

Take Your Breath Away with Splunk Risk-Based Alerting (RBA)