Dashboards & Visualizations

How to click on a table in a dashboard and open the search in a new window in HTML?

Communicator

I have a dashboard coded in HTML and when I click on a table element, it changes the page to show the search ran in Splunk. Is there a way to click on the table and then keep the dashboard up and show the search in a new tab or window? Using drilldown or something?

0 Karma
1 Solution

SplunkTrust
SplunkTrust

@kdimaria, if would be tough for community to assist with HTML dashboard without code since it is not as easy to mock as Simple XML. In order to open drilldown SPL in new window you would need utils.redirect(url, false, "_blank"); . However, you would also need to provide SPL query you need to run along with default drilldown token required for the search.

Following is an example which will run the search index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\" in a new window. App name is search i.e. /app/search/search, which you would need to change to your app as well. Add the following code to implement click event for the table you have created (assuming table id is element1, if not change accordingly)

    element1.on("click", function(e) {
        if (e.field !== undefined) {
            e.preventDefault();
            var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
            utils.redirect(url, false, "_blank");
        }
    });

The line utils.redirect(url, false, "_blank"); redirects search to a new page. You would need to change the search query and dynamic predefined drilldown token to be passed as per your need. Refer to documentation for dynamic drilldown http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens##Predefined_tokens_for_dynamic_drilldo...

If the above does not work for you, you would need to provide the table element JS code as well as search code (for the table and intended search for new window) from your html dashboard. However, I am attaching a run anywhere HTML Dashboard for you to try out the above example based on Splunk _internal index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Table drilldown search in new window HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@FB592E2458E4D537E2C0C5FB336072C4851FE2C517060C29ED9A121948D79ED6/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/css/build/pages/dashboard-simple-bootstrap.min.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.0.0" 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 class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</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>Splunk Answers 589259 - Table drilldown search in new window HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-body"></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">
// <![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
        //


var search1 = new SearchManager({
            "id": "search1",
            "search": "index=_internal sourcetype=splunkd log_level!=\"INFO\" |  stats count by component",
            "earliest_time": "-24h@h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "sample_ratio": 1,
            "latest_time": "now",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});


        //
        // SPLUNK LAYOUT
        //

        $('header').remove();
        new LayoutView({"hideAppBar": false, "hideChrome": false, "hideFooter": 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 TableElement({
            "id": "element1",
            "count": 20,
            "dataOverlayMode": "none",
            "drilldown": "cell",
            "percentagesRow": "false",
            "rowNumbers": "false",
            "totalsRow": "false",
            "wrap": "true",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
                utils.redirect(url, false, "_blank");
            }
        });

        // 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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

SplunkTrust
SplunkTrust

@kdimaria, if would be tough for community to assist with HTML dashboard without code since it is not as easy to mock as Simple XML. In order to open drilldown SPL in new window you would need utils.redirect(url, false, "_blank"); . However, you would also need to provide SPL query you need to run along with default drilldown token required for the search.

Following is an example which will run the search index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\" in a new window. App name is search i.e. /app/search/search, which you would need to change to your app as well. Add the following code to implement click event for the table you have created (assuming table id is element1, if not change accordingly)

    element1.on("click", function(e) {
        if (e.field !== undefined) {
            e.preventDefault();
            var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
            utils.redirect(url, false, "_blank");
        }
    });

The line utils.redirect(url, false, "_blank"); redirects search to a new page. You would need to change the search query and dynamic predefined drilldown token to be passed as per your need. Refer to documentation for dynamic drilldown http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens##Predefined_tokens_for_dynamic_drilldo...

If the above does not work for you, you would need to provide the table element JS code as well as search code (for the table and intended search for new window) from your html dashboard. However, I am attaching a run anywhere HTML Dashboard for you to try out the above example based on Splunk _internal index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Table drilldown search in new window HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@FB592E2458E4D537E2C0C5FB336072C4851FE2C517060C29ED9A121948D79ED6/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/css/build/pages/dashboard-simple-bootstrap.min.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.0.0" 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 class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</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>Splunk Answers 589259 - Table drilldown search in new window HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-body"></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">
// <![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
        //


var search1 = new SearchManager({
            "id": "search1",
            "search": "index=_internal sourcetype=splunkd log_level!=\"INFO\" |  stats count by component",
            "earliest_time": "-24h@h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "sample_ratio": 1,
            "latest_time": "now",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});


        //
        // SPLUNK LAYOUT
        //

        $('header').remove();
        new LayoutView({"hideAppBar": false, "hideChrome": false, "hideFooter": 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 TableElement({
            "id": "element1",
            "count": 20,
            "dataOverlayMode": "none",
            "drilldown": "cell",
            "percentagesRow": "false",
            "rowNumbers": "false",
            "totalsRow": "false",
            "wrap": "true",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
                utils.redirect(url, false, "_blank");
            }
        });

        // 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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

Communicator

Thanks, I knew how to do it this was but was hoping there would be a different way by changing the drilldown option in the table element.

0 Karma

SplunkTrust
SplunkTrust

Hi they are available in Simple XML or with Simple XML JS Extension but not with HTML dashboard. 😞

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

Communicator

Yeah 😞 I should probably start using XML instead of HTML for my dashboards haha

0 Karma

SplunkTrust
SplunkTrust

Simple XML will get you out of most of complicated situations through CSS Extension, JavaScript Extension and Splunk JS Stack. Once you switch to HTML you have complete control of your dashboard and virtually you open up Splunk Dashboard for full fledged web development. However, you have to be really get used to the "extra line of code" (which were abstract in Simple XML). With that trade off in mind. Code as much as possible in Simple XML and switch to HTML only if unavoidable or when dashboard is stable and almost final.

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

Motivator

@kdimaria

<form>
<label>test_drilldown_new_page</label>
<fieldset submitButton="true">
<input type="time" token="ttok" searchWhenChanged="true">
<label>select a time range</label>
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>index=_internal | stats count by sourcetype</query>
<earliest>$ttok.earliest$</earliest>
<latest>$ttok.latest$</latest>
</search>
<option name="count">15</option>
<option name="displayRowNumbers">false</option>
<option name="showPager">true</option>
<drilldown target="blank">
<link>
<![CDATA[
/app/testapp/search?q=search index=_internal sourcetype=$row.sourcetype$ earliest=$earliest$ latest=$latest$
]]>
</link>
</drilldown>

</table>
</panel>
</row>
</form>

0 Karma

SplunkTrust
SplunkTrust

HI

Can you please try below XML??

<dashboard>
  <label>HTML</label>
  <description></description>
  <row>
    <panel>
      <html>
        <table>
          <tr><td><a target="_blank" href="/app/splunk_answer_app/search?earliest=-15m&amp;latest=now&amp;q=search%20index%3D_internal%20%20%7C%20stats%20count%20as%20AA%20by%20sourcetype"> Click Me</a></td></tr>
        </table>
       </html>
    </panel>
  </row>
</dashboard>

Thanks

Communicator

my dashboard is not coded in XML.. I have a dashboard completely coded in HTML and JS. with search elements that have a field called "drilldown" and it can be set to row or none..I'm not sure what else.

0 Karma

Splunk Employee
Splunk Employee

You may need to create a click event handler and set preventDefault();

See this example of custom handlers:
http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAEV8

0 Karma

Communicator

is there not an easier way of doing this? Isn't there some other drilldown option where it just opens a new window instead of changing the current one?

0 Karma

Splunk Employee
Splunk Employee
0 Karma

Communicator

I tried adding "drilldown": "blank" to my search element and that does not work..

0 Karma

Communicator

also it is coded in HTML so i don't know if this makes a difference..

0 Karma