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
Get Updates on the Splunk Community!

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...