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!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...