Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to drilldown from panel having image to other panel having images ?

pgadhari
Builder
‎07-10-2019 12:25 AM

I have 5 panels in a row, each panel has an image embedded in it using HTML. I want to create a drill-down so that I can click on the image in a particular panel and it should load another panel below which should show another image. So, respectively if I click image in other panel, it should load in the same panel below. My Scenario :
alt text

alt text

Top panel has the image of the datacenter holistic Racks, when I click that image - it should show each Row i.e. Row A having 10 Racks and Row B having 10 Racks in the below panel. I have already created a html page (having image) for that, the only thing is I need to load into the panel by creating a drilldown from the top panel. Attaching screenshots for the same.

how do I achieve it ?

Preview file
92 KB
Preview file
200 KB
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

jitendragupta
Path Finder
‎07-15-2019 02:43 AM

My previous answer was for HTML dashboard, not for XML dashboard using HTML tag in it. You have to add that code in javascript section of html code. I have converted yr code to HTML and modified it as per ur requirements. Please check.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
    <link rel="shortcut icon" href="/en-US/static/@A355AFB27EEAA7F8B8580D369873D5E6410C8A39BE47873A36FD947C3062A3E6/img/favicon.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" />

        <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.3.0" data-splunk-product="splunk">
<!--
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>test</h2>
    </div>
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Network</h2>

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h3><b><img src="https://www.propylon.com/wp-content/uploads/2018/11/computer-98401_640.png"></b></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Infrastructure</h2>

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h3><b><img src="https://www.propylon.com/wp-content/uploads/2018/11/computer-98401_640.png"></b></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Storage</h2>

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h3><b><img src="https://www.propylon.com/wp-content/uploads/2018/11/computer-98401_640.png"></b></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="test" class="dashboard-cell" style="width:100%;" data-original-id="test">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element4" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h1>Network Racks</h1><div><img src="http://www.fiber-optic-solutions.com/wp-content/uploads/2018/09/Cable-Management.jpg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row3" class="dashboard-row dashboard-row3">
        <div id="panel4" class="dashboard-cell" style="width:100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element5" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h1>Infrastructure Racks</h1><div><img src="https://banner2.kisspng.com/20180325/dow/kisspng-computer-servers-19-inch-rack-it-infrastructure-de-server-5ab740e7681c26.8375372715219591434264.jpg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    <div id="row4" class="dashboard-row dashboard-row4">
        <div id="panel5" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element6" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h1>Storage Racks</h1><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvdoasC9-31RhU3Zdb6q27m9bVqpjJ_mn3ujrEetfxAftJhiBr"></div>
                        </div>
                    </div>
                </div>
            </div>
        </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">

                    $("#row2").show();
                     $("#row3").hide();
                     $("#row4").hide();

                      $("#panel1").click(function(){
                         $("#row2").show();
                         $("#row3").hide();
                         $("#row4").hide();

                     });
                      $("#panel2").click(function(){
                         $("#row3").show();
                         $("#row2").hide();
                         $("#row4").hide();

                     });
                      $("#panel3").click(function(){
                         $("#row4").show();
                         $("#row3").hide();
                         $("#row2").hide();

                     });

// <![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({"hideAppBar": false, "hideChrome": false, "hideSplunkBar": 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
        //

        var element1 = new HtmlElement({
            "id": "element1",
            "useTokens": true,
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element1.contentLoaded());

        var element2 = new HtmlElement({
            "id": "element2",
            "useTokens": true,
            "el": $('#element2')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element2.contentLoaded());

        var element3 = new HtmlElement({
            "id": "element3",
            "useTokens": true,
            "el": $('#element3')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element3.contentLoaded());

        var element4 = new HtmlElement({
            "id": "element4",
            "useTokens": true,
            "el": $('#element4')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element4.contentLoaded());

        var element5 = new HtmlElement({
            "id": "element5",
            "useTokens": true,
            "el": $('#element5')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element5.contentLoaded());

        var element6 = new HtmlElement({
            "id": "element6",
            "useTokens": true,
            "el": $('#element6')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element6.contentLoaded());

        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }
       submitTokens();

        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;
    }
);
// ]]>
</script>
</body>
</html>

View solution in original post

0 Karma
Reply
Solved! Jump to solution
Solution

jitendragupta
Path Finder
‎07-15-2019 02:43 AM

My previous answer was for HTML dashboard, not for XML dashboard using HTML tag in it. You have to add that code in javascript section of html code. I have converted yr code to HTML and modified it as per ur requirements. Please check.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
    <link rel="shortcut icon" href="/en-US/static/@A355AFB27EEAA7F8B8580D369873D5E6410C8A39BE47873A36FD947C3062A3E6/img/favicon.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" />

        <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.3.0" data-splunk-product="splunk">
<!--
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>test</h2>
    </div>
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Network</h2>

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h3><b><img src="https://www.propylon.com/wp-content/uploads/2018/11/computer-98401_640.png"></b></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Infrastructure</h2>

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h3><b><img src="https://www.propylon.com/wp-content/uploads/2018/11/computer-98401_640.png"></b></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Storage</h2>

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h3><b><img src="https://www.propylon.com/wp-content/uploads/2018/11/computer-98401_640.png"></b></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="test" class="dashboard-cell" style="width:100%;" data-original-id="test">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element4" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h1>Network Racks</h1><div><img src="http://www.fiber-optic-solutions.com/wp-content/uploads/2018/09/Cable-Management.jpg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row3" class="dashboard-row dashboard-row3">
        <div id="panel4" class="dashboard-cell" style="width:100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element5" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h1>Infrastructure Racks</h1><div><img src="https://banner2.kisspng.com/20180325/dow/kisspng-computer-servers-19-inch-rack-it-infrastructure-de-server-5ab740e7681c26.8375372715219591434264.jpg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    <div id="row4" class="dashboard-row dashboard-row4">
        <div id="panel5" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element6" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <h1>Storage Racks</h1><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvdoasC9-31RhU3Zdb6q27m9bVqpjJ_mn3ujrEetfxAftJhiBr"></div>
                        </div>
                    </div>
                </div>
            </div>
        </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">

                    $("#row2").show();
                     $("#row3").hide();
                     $("#row4").hide();

                      $("#panel1").click(function(){
                         $("#row2").show();
                         $("#row3").hide();
                         $("#row4").hide();

                     });
                      $("#panel2").click(function(){
                         $("#row3").show();
                         $("#row2").hide();
                         $("#row4").hide();

                     });
                      $("#panel3").click(function(){
                         $("#row4").show();
                         $("#row3").hide();
                         $("#row2").hide();

                     });

// <![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({"hideAppBar": false, "hideChrome": false, "hideSplunkBar": 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
        //

        var element1 = new HtmlElement({
            "id": "element1",
            "useTokens": true,
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element1.contentLoaded());

        var element2 = new HtmlElement({
            "id": "element2",
            "useTokens": true,
            "el": $('#element2')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element2.contentLoaded());

        var element3 = new HtmlElement({
            "id": "element3",
            "useTokens": true,
            "el": $('#element3')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element3.contentLoaded());

        var element4 = new HtmlElement({
            "id": "element4",
            "useTokens": true,
            "el": $('#element4')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element4.contentLoaded());

        var element5 = new HtmlElement({
            "id": "element5",
            "useTokens": true,
            "el": $('#element5')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element5.contentLoaded());

        var element6 = new HtmlElement({
            "id": "element6",
            "useTokens": true,
            "el": $('#element6')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        DashboardController.addReadyDep(element6.contentLoaded());

        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }
       submitTokens();

        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;
    }
);
// ]]>
</script>
</body>
</html>
0 Karma
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-18-2019 12:10 AM

@jitendragupta - I have accepted your answer, but can you please reply on my previous comments wherein I have asked whether we can add that HTML dashboard to XML dashboard ?

0 Karma
Reply
Solved! Jump to solution

jitendragupta
Path Finder
‎07-18-2019 01:28 AM

Hi @pgadhari. Your requirements can be accomplished in XML by using dropdown, multi-select etc. options But for click action, I have to see this. I'll check and reply to you.

0 Karma
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-16-2019 09:40 PM

@jitendragupta - Thanks. I was able to do the show and hide properly now. Can we embed this html dashboard in a XML dashboard. I mean I want to show it in a app itself where other XML dashboards are visible ? How can I do that ?

0 Karma
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-15-2019 10:31 PM

@jitendragupta - when I copy the above code in dashboard, it gives following error :

Error parsing XML on line 376: Premature end of data in tag html line 2

Please suggest how to resolve this ?

0 Karma
Reply
Solved! Jump to solution

jitendragupta
Path Finder
‎07-15-2019 10:38 PM

From setting option, convert your dashboard to HTML and then copy the code.

link text

0 Karma
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-16-2019 03:54 AM

Sure. i will do that. Can you please explain, what all changes you have done after converting the XML to HTML page ? As shown above, when I click on each panel, it should display 2 rows.... so I want to understand the changes you have done ? Please advise.

0 Karma
Reply
Solved! Jump to solution

jitendragupta
Path Finder
‎07-10-2019 05:10 AM

As per my understanding, u have 5 panels in first row and 1 panel in second row. And u want that user can click on any of the five panels from first row and corresponding detailed image should come in second row.
U already have ur dashboard designed in html. So to achieve this add 5 rows containing detailed image corresponding to 5 panels of first row and add show/hide function.

                    $("#row1").show();
                    $("#row2").hide();
                    $("#row3").hide();
                    $("#row4").hide();
                    $("#row5").hide();

                     $("#panel1").click(function(){
                        $("#row1").show();
                        $("#row2").hide();
                        $("#row3").hide();
                        $("#row4").hide();
                        $("#row5").hide();
                    });
                     $("#panel2").click(function(){
                        $("#row2").show();
                        $("#row1").hide();
                        $("#row3").hide();
                        $("#row4").hide();
                        $("#row5").hide();
                    });
                     $("#panel3").click(function(){
                        $("#row3").show();
                        $("#row1").hide();
                        $("#row2").hide();
                        $("#row4").hide();
                        $("#row5").hide();
                    });
                    $("#panel4").click(function(){
                        $("#row4").show();
                        $("#row1").hide();
                        $("#row2").hide();
                        $("#row3").hide();
                        $("#row5").hide();
                    });
                    $("#panel5").click(function(){
                        $("#row5").show();
                        $("#row1").hide();
                        $("#row2").hide();
                        $("#row3").hide();
                        $("#row4").hide();
                    });
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-13-2019 10:38 AM

If there are any other ways of beautifying this dashboard based on clicks, that also you can suggest please. Thanks.

0 Karma
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-13-2019 10:33 AM

@jitendragupta - where do I actually need to put the above code in my Dashboard. Can you guide on that ? I am attaching the code for the same. Apart from that,

  1. I am trying to use flexbox css properties, but it is getting applied to all the images, wherein I don't want it to be applied in first main row ?
  2. For Racks, flexbox is working, but somehow when I hover on that image, it is getting hide behind the panel from down, how do I make the whole rack visible outside the panel or any other way ?
  3. Attaching the CSS file also, do I need to create each panel row as different id ?

My Dashboard code :

Image Dashboard Clone

<panel>
  <title>Network</title>
  <html>
              <h3>
                 <b>
                    <img src="/static/app/search/pod.png"/>
                 </b>
               </h3>
            </html>
          </panel>
          <panel>
  <title>Infrastructure</title>
  <html>
              <h3>
                 <b>
                    <img src="/static/app/search/pod.png" />
                 </b>
               </h3>
            </html>
          </panel>
          <panel>
  <title>Storage</title>
  <html>
              <h3>
                 <b>
                    <img src="/static/app/search/pod.png"/>
                 </b>
               </h3>
            </html>
          </panel>
</row>

<panel id="test">
  <html>
    <h1>Network Racks</h1>
      <div>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
      </div>
  </html>
</panel>


<panel>
  <html>
    <h1>Network Racks</h1>
      <div>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
      </div>
  </html>
</panel>


<panel>
  <html>
    <h1>Infrastructure Racks</h1>
      <div>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
      </div>
  </html>
</panel>


<panel>
  <html>
    <h1>Infrastructure Racks</h1>
      <div>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
      </div>
  </html>
</panel>


<panel>
  <html>
    <h1>Storage Racks</h1>
      <div>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
      </div>
  </html>
</panel>


<panel>
  <html>
    <h1>Storage Racks</h1>
      <div>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
          <img src="/static/app/search/Rack-A1.png"></img>
      </div>
  </html>
</panel>

My CSS file :

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

 img {
    width: 100px;
    height: 250px;
    margin: 2px;
    transition: all 1s;
}

img:hover {
    transform: scale(1.4);
}

h1 {
    font-family: fantasy;
    font-size: 2em;
    border-bottom: 2px solid;
    border-right: 2px solid;
    width: 470px;
    text-align: center;
    box-shadow: 4px 4px 5px #888888;
}

Please help to resolve this ?

0 Karma
Reply
Solved! Jump to solution

pgadhari
Builder
‎07-14-2019 11:49 PM

@jitendragupta - can you please reply on my above queries ?

0 Karma
Reply
Get Updates on the Splunk Community!

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

What are Community Office Hours? Community Office Hours is an interactive 60-minute Zoom series where ...

Index This | When is October more than just the tenth month?

October 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...