topic Re: How to make the div that can be fold/unfold on dashboard in Dashboards & Visualizations

How to make the div that can be fold/unfold on dashboard

yutaka1005 — Fri, 06 Oct 2017 08:42:52 GMT

I'd like to make the div that can be fold/unfold on dashboard.
So I tried to implement an easy thing using html, but it does not work.

How can I make this possible on Splunk's dashboard?
Please tell me that if someone know about it.

Re: How to make the div that can be fold/unfold on dashboard

niketn — Fri, 06 Oct 2017 10:57:42 GMT

@yutaka1005, you ca either refer to the following blog to create tabs in dashboard using Simple XML JS Extension: https://www.splunk.com/blog/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-clicked.html

Or else use jQuery UI Accordion using Splunk HTML Dashboard (Web Framework) from the Splunk dev site: http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEN5

Re: How to make the div that can be fold/unfold on dashboard

yutaka1005 — Wed, 11 Oct 2017 02:41:03 GMT

To niketnilay

Thank you for answer.

Second URL that you pasted is very similar to what I want to do.
But I want to make a panel that fades in from the side when I press the button.

Have you any ideas?

Re: How to make the div that can be fold/unfold on dashboard

niketn — Wed, 11 Oct 2017 17:54:11 GMT

@yutaka1005, Fade in or Fade Out is similar to Show or Hide but with some delay (or rather animated). So would just Hide/Show suffice? Since this can be done pretty easily using depends/rejects Simple XML attributes and you can find several examples here in on Splunk Answers.

If you want Fade In or Fade Out specifically, please provide an example from any demo site (like jQuery or W3Schools or any actual site with Fade In and Fade Out implemented).

Re: How to make the div that can be fold/unfold on dashboard

rjthibod — Wed, 11 Oct 2017 18:00:29 GMT

You should probably use my app as a starting point: Developer Gadgets for Splunk https://splunkbase.splunk.com/app/3689/

It includes a library to turn Splunk panels into accordions, and it has a sliding panel on the bottom of the dashboard.

The Splunk code on http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEN5 is pretty outdated an incapable of handling some situations (e.g., dealing with user inputs).

My app code is tested on various versions of Splunk and used in my company's Layer8Insight App for Splunk, so it should be good as a launching off point.

The built-in dashboard of the Developer Gadgets app will tell you how to turn a regular panel/row into an accordion.

You will need to copy the JS / CSS code for the bottom slider panel if you want to reuse for something else.

Re: How to make the div that can be fold/unfold on dashboard

yutaka1005 — Thu, 12 Oct 2017 02:01:32 GMT

To niketnilay

Thank you for reply.

It would be nice if I could display or hide the panel, but I would like a mechanism that can change the display/folding of the panel by pressing the button, not by using variables and "depends".

So if it can realize that mechanism, I do not care about the method (fade in, accordion menu ... etc).

There is a part called "Focus" which can change display/folding by click, in "deep dive" which is one of the contents in ITSI which is a chargeable App of Splunk.
I would like to do something similar to this.

See below ↓
http://docs.splunk.com/images/e/e3/Deep_dive.png

Re: How to make the div that can be fold/unfold on dashboard

yutaka1005 — Thu, 12 Oct 2017 04:42:30 GMT

It was able to be realized with the following code.

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    //
    $('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
    $('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
    document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
    var cnt = 0;
    $('#<id of button>').click(function onoff() {
        if(cnt == 0){
            cnt = 1;
            $('#<id of panel1>').closest(".dashboard-cell").css('width', '70%');
            $('#<id of panel2>').closest(".dashboard-cell").css('width', '30%');
            document.getElementById("<id of contents of panel2(table,chart...)>").style.display="block";
        } else {
            cnt = 0;
            $('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
            $('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
            document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
        }
    });
    $(window).trigger('resize');
});

By clicking the button,
Since it is possible to change the width of panel1 and panel2 and display/non-display of contents of panel2, so, panel2 looks like a panel that can switch between folding/unfolding.

Details of processing are as follows.

In the case of cnt = 0, clicking, the width of the panel 1 is narrowed, the width of the panel 2 is widened, and the content in the panel 2 is displayed.

In the case of cnt = 1, when clicking, widens the width of the panel 1, narrows the width of the panel 2, and hides the contents in the panel 2.

Re: How to make the div that can be fold/unfold on dashboard

yutaka1005 — Thu, 12 Oct 2017 04:43:49 GMT

To rjthibod

Thank you for answer!

I will check your app!

Re: How to make the div that can be fold/unfold on dashboard

niketn — Thu, 12 Oct 2017 16:03:00 GMT

@yutaka1005, sorry, I do not have access to Splunk ITSI, but whatever I searched online gave expanded Topology Tree view not collapsed. Looking at it seems like it is an accordion.

I am glad you were able to figure out something as per your requirement.