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 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...