What is a close option for panel that opens after ...

simon21 · ‎06-07-2017

i have a table with multiple values, and on click of any of the value, an inline panel opens (using depends option) via drilldown option, now i want that panel to close on click of a button. But also, i need the action of drilldown to open on the click of tables data not on click of button. I just need a close button to close the panel after drilldown, the panel open action is perfect (i.e on click of table value).

rjthibod · ‎06-07-2017

If what you are doing is in SimpleXML, you will need to JS in order to do what you want.

You can try adding a button via direct HTML in the XML

<html><button id="close_btn" class="btn">Close Panel</button></html>

And then adding some simple JS to unset the token when the button is clicked. This will require setting up the functions to set and submit tokens.

If you want a more complete solution that gives you greater flexibility, check my answer and its linked blog post here: https://answers.splunk.com/answers/346916/submit-button-per-panel-in-simple-xml.html

yoho · ‎04-28-2022

@rjthibod, I'm new to Splunk and JS but I've found this question and it's exactly what I need to do.

I managed to do a good part of what is described but I need the last step: token has been unset but the panel doesn't disappear. I guess some kind of refresh is needed. Any idea what should be done ?

I use jQuery to attach the code to the button and Splunk MVC to manipulate tokens and panels. This is the JS code I have so far:

require([
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function(mvc) {

  // Access the "default" token model
  var tokens = mvc.Components.get("default");

  // Uncomment to check if this code gets loaded
  // console.log("loaded");

  // Select #details_panel and attach a delegated event
  // when #btn_close will be created
  $( "#details_panel" ).on( "click", "#btn_close", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
    console.log( "showDetails:" + tokens.get("showDetails"));
    tokens.unset("showDetails");

    var panel = splunkjs.mvc.Components.get("details_panel");
    // At this point in time, the panel doesn't disappear
    // although the token is unset (undefined)
  });
});

yoho · ‎04-29-2022

Finally I've found it. For some reason the "default" token model should not have been used but it was required to load the "submitted" one (contrary to what is written in the documentation; I found this reference in an old post on this forum...). So the code is pretty small.

Requirements to use this is to flag the "details panel" with id="details_panel" and the close button (contained in this panel) with id="btn_close".

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function(mvc) {

    // Access the "submitted" token model (not the default, for some reason...)
    var tokens_sub = mvc.Components.get("submitted");

    // Uncomment to check if this code gets loaded
    // console.log("loaded");

    // Select #details_panel and attach a delegated event
    // when #btn_close will be created
    $( "#details_panel" ).on( "click", "#btn_close", function( event ) {
        event.preventDefault();
        tokens_sub.unset("showDetails");
    });
});

What is a close option for panel that opens after clicking on a table value (drilldown)?

drilldown

Introducing Splunk Enterprise 9.2

Adoption of RUM and APM at Splunk

Routing logs with Splunk OTel Collector for Kubernetes