Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question

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

kjandhyala
Explorer
‎01-24-2019 04:23 PM

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>
Tags (1)
0 Karma
Reply

niketn
Legend
‎01-24-2019 06:28 PM

@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!!!"
0 Karma
Reply
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In December, the Splunk Threat Research Team had 1 release of new security content via the Enterprise Security ...

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

(This is the first of a series of 2 blogs). Splunk Enterprise Security is a fantastic tool that offers robust ...

Index This | What are the 12 Days of Splunk-mas?

December 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...