Dashboards & Visualizations

How to create singleElement drilldown link to external URL

ryastrebov
Communicator

Hello!

How to create singleElement drilldown link to external URL?

Example code:

     var search2 = new SearchManager({
                "id": "search2",
                "cancelOnUnload": true,
                "earliest_time": "-1h",
                "latest_time": "now",
                "status_buckets": 0,
                "search": "index=_internal | stats count",
                "app": utils.getCurrentApp(),
                "auto_cancel": 90,
                "preview": true,
                "runWhenTimeIsUndefined": false
            }, {tokens: true, tokenNamespace: "submitted"});
    .....................
            var element2 = new SingleElement({
                "id": "element2",
                "field": "count",
                "drilldown": "all",
                "linkFields": "beforelabel, result",
                "afterLabel": "in the past hour.",
                "underLabel": "total events",
                "beforeLabel": "There have been",
                "managerid": "search2",
                "el": $('#element2')
            }, {tokens: true}).render();

But this drilldown only to search... How can create link to external URL? Example http://www.splunk.com? My Splunk version is 6.1.4.

Tags (1)
0 Karma
1 Solution

rsennett_splunk
Splunk Employee
Splunk Employee

Here is the combo you need... you're missing a piece :

  // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-1h",
            "status_buckets": 0,
            "search": "index=_internal | stats count",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

 // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new SingleElement({
            "id": "element1",
            "beforeLabel": "There have been",
            "linkFields": "beforelabel, result",
            "drilldown": "all",
            "underLabel": "total events",
            "field": "count",
            "afterLabel": "in the past hour.",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("http://answers.splunk.com/answers/?q=$click.value$", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'));
                utils.redirect(url);
            }
        });

take a look at the Dashboard Examples app for Splunk 6.x: https://splunkbase.splunk.com/app/1603/
Once installed, go here:

https://yourSplunkServer:8000/en-US/app/simple_xml_examples/simple_drilldown_dynamic?earliest=0&late...
check out the bottom two panels...

I've adjusted to Single Element for clarity since the examples are for Table elements.
It's the same though...

Or... create a new dashboard and paste this in before the </dashboard> tag.

<row>
<single>
            <title>Single panel with drilldown on beforeLabel and result values, and link to search view</title>
            <searchString>index=_internal | stats count</searchString>
            <earliestTime>-1h</earliestTime>
            <latestTime>now</latestTime>
            <option name="beforeLabel">There have been</option>
            <option name="underLabel">total events</option>
            <option name="afterLabel">in the past hour.</option>
            <option name="field">count</option>
            <option name="drilldown">all</option>
            <option name="linkFields">beforelabel, result</option>
          <drilldown>
        <link>http://answers.splunk.com/answers/?q=$click.value$</link>
      </drilldown>
        </single>
</row>

If that does what you want... then save the dashboard as HTML and check out the javascript elements... you'll see what I pasted in in the first example, and you can apply it to your own stuff.

In fact, if I were you.. I'd just do it in SimpleXML first, for your own stuff... then save to HTML and grab what you need for the main dashboard you're working on.

A really good rule of thumb, is to do as much as you possibly can in SimpleXML and THEN save to HTML if you have need for an HTML dashboard. Why work so hard? Let Splunk show you... 🙂

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

View solution in original post

rsennett_splunk
Splunk Employee
Splunk Employee

Here is the combo you need... you're missing a piece :

  // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-1h",
            "status_buckets": 0,
            "search": "index=_internal | stats count",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

 // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new SingleElement({
            "id": "element1",
            "beforeLabel": "There have been",
            "linkFields": "beforelabel, result",
            "drilldown": "all",
            "underLabel": "total events",
            "field": "count",
            "afterLabel": "in the past hour.",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("http://answers.splunk.com/answers/?q=$click.value$", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'));
                utils.redirect(url);
            }
        });

take a look at the Dashboard Examples app for Splunk 6.x: https://splunkbase.splunk.com/app/1603/
Once installed, go here:

https://yourSplunkServer:8000/en-US/app/simple_xml_examples/simple_drilldown_dynamic?earliest=0&late...
check out the bottom two panels...

I've adjusted to Single Element for clarity since the examples are for Table elements.
It's the same though...

Or... create a new dashboard and paste this in before the </dashboard> tag.

<row>
<single>
            <title>Single panel with drilldown on beforeLabel and result values, and link to search view</title>
            <searchString>index=_internal | stats count</searchString>
            <earliestTime>-1h</earliestTime>
            <latestTime>now</latestTime>
            <option name="beforeLabel">There have been</option>
            <option name="underLabel">total events</option>
            <option name="afterLabel">in the past hour.</option>
            <option name="field">count</option>
            <option name="drilldown">all</option>
            <option name="linkFields">beforelabel, result</option>
          <drilldown>
        <link>http://answers.splunk.com/answers/?q=$click.value$</link>
      </drilldown>
        </single>
</row>

If that does what you want... then save the dashboard as HTML and check out the javascript elements... you'll see what I pasted in in the first example, and you can apply it to your own stuff.

In fact, if I were you.. I'd just do it in SimpleXML first, for your own stuff... then save to HTML and grab what you need for the main dashboard you're working on.

A really good rule of thumb, is to do as much as you possibly can in SimpleXML and THEN save to HTML if you have need for an HTML dashboard. Why work so hard? Let Splunk show you... 🙂

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

ryastrebov
Communicator

Thank you very much!

0 Karma

rsennett_splunk
Splunk Employee
Splunk Employee

You're welcome... I've adjusted the answer so it speaks directly to the Single Element... but it's all the same.
See here: http://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#drilldown

Glad you got it. 🙂

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!
0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

This puzzle (first published here) is based on matching timestamps to cron expressions.All the timestamps ...

Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass

Hello Splunkers,  We’re excited to kick off a Splunk Dashboard contest! We know that dashboards are a primary ...

May 2026 Splunk Expert Sessions: Security & Observability

Level Up Your Operations: May 2026 Splunk Expert Sessions Whether you are refining your security posture or ...