Dashboards & Visualizations

How to create a drilldown that when clicked, opens the view and scrolls/snaps to it for the user?

kaneru
Explorer

I was trying to figure out how this would work but was having a little trouble.  I was thinking that using similar logic as to what was shown here would work, however wanted to clarify to see if this would be the right track.

Solved: Adding tooltip to panel on a hover - Splunk Community

Labels (2)
0 Karma
1 Solution

kaneru
Explorer

I need to use JS, so I can't go with the option provided in the example app. I managed to get the JS working, but now it overrides the dashboard's functionality which is not good.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/tokenutils",
    "jquery",
    "splunkjs/mvc/searchmanager",
    "splunkjs/ready!",
    "splunkjs/mvc/simplexml/ready!"
    ],
    function(
        mvc,
        TokenUtils,
        $,
        SearchManager
    ) {
        $('#selection').on("mousedown", function(){                                                                                                                    
        var element = document.getElementById("html_scroll");
        element.scrollIntoView({behavior: "smooth"});
        });                                                                                                                    
    }                                                                                                                    
);

This is the JS code I have.

The dashboard has a row with an inner table that allows users to select a option that sets tokens. The table displaying all the options for the user is given the id "selection".

Near the top of the page there is another row with the id "html_scroll", which should be snapped to once a selection is made from the table.

For some reason, selections can no longer be made and when any option within the table is clicked, it just automatically scrolls to the row near the top. What could possibly be going wrong?

View solution in original post

0 Karma

kaneru
Explorer

I need to use JS, so I can't go with the option provided in the example app. I managed to get the JS working, but now it overrides the dashboard's functionality which is not good.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/tokenutils",
    "jquery",
    "splunkjs/mvc/searchmanager",
    "splunkjs/ready!",
    "splunkjs/mvc/simplexml/ready!"
    ],
    function(
        mvc,
        TokenUtils,
        $,
        SearchManager
    ) {
        $('#selection').on("mousedown", function(){                                                                                                                    
        var element = document.getElementById("html_scroll");
        element.scrollIntoView({behavior: "smooth"});
        });                                                                                                                    
    }                                                                                                                    
);

This is the JS code I have.

The dashboard has a row with an inner table that allows users to select a option that sets tokens. The table displaying all the options for the user is given the id "selection".

Near the top of the page there is another row with the id "html_scroll", which should be snapped to once a selection is made from the table.

For some reason, selections can no longer be made and when any option within the table is clicked, it just automatically scrolls to the row near the top. What could possibly be going wrong?

0 Karma

kaneru
Explorer

bump, still lost on this...

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @kaneru,

if you see in the Splunk Dashboard Examples app (https://splunkbase.splunk.com/app/1603/) you'll find an example (In-page Drilldown with Perma-Linking) that will guide you to solve your need.

Ciao.

Giuseppe

0 Karma

kaneru
Explorer

Thank you for the reply, however I need to use JS so I don't think I can follow your recommendation. I updated my post with a reply to describe what I currently have that is half-working.

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!

May 2026 Splunk Expert Sessions: Security & Observability

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

Network to App: Observability Unlocked [May & June Series]

In today’s digital landscape, your environment is no longer confined to the data center. It spans complex ...

SPL2 Deep Dives, AppDynamics Integrations, SAML Made Simple and Much More on Splunk ...

Splunk Lantern is Splunk’s customer success center that provides practical guidance from Splunk experts on key ...