All Apps and Add-ons

Trouble getting the JQuery UI Accordion to work in 6.5.1

efferth
Path Finder

Hi,

I recently followed the Music Dashboard Tutorial from the Splunk Dev Site (http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEN5) to learn how to insert the JQuery UI Accordion into dashboards.

However, the tutorial seems to be for version 6.4, and some of the lines it asks the user to edit seemingly do not exist in 6.5.1, and inserting the final code provided into a 6.5.1 html dashboard result in the dashboard sitting indefinitely on a loading screen.

Are there any known workarounds to get this accordion working?

Thanks!

0 Karma
1 Solution

rjthibod
Champion

Warning: shameless self-promotion

I doubt that will be a reliable source of maintained code. Instead, you can take my implementation from my app. Works in 6.2 - 6.5 in IE, Chrome, Firefox, etc.

The code is in my app, Layer8Insight App for Splunk (https://splunkbase.splunk.com/app/3171/).

If you download the app, look in appserver/static/components/togglepanel for class the definition and CSS. You can then look at the dashboard JS file dd-client-ux-gantt.js to see how I instantiate the accordion for multiple panels. The call looks like this where I add an accordion to each panel with a set of perfmon-related panels. The screenshot is below.

    // Adds toggle icon to perfmon panels
    $("[id^=panel_dd_perfmon]").each(function() {
      new TogglePanel(this).setup(true);
    });

Sreenshot of accordion

View solution in original post

rjthibod
Champion

Warning: shameless self-promotion

I doubt that will be a reliable source of maintained code. Instead, you can take my implementation from my app. Works in 6.2 - 6.5 in IE, Chrome, Firefox, etc.

The code is in my app, Layer8Insight App for Splunk (https://splunkbase.splunk.com/app/3171/).

If you download the app, look in appserver/static/components/togglepanel for class the definition and CSS. You can then look at the dashboard JS file dd-client-ux-gantt.js to see how I instantiate the accordion for multiple panels. The call looks like this where I add an accordion to each panel with a set of perfmon-related panels. The screenshot is below.

    // Adds toggle icon to perfmon panels
    $("[id^=panel_dd_perfmon]").each(function() {
      new TogglePanel(this).setup(true);
    });

Sreenshot of accordion

efferth
Path Finder

Hey rjthibod!

I'll give your app a download and play around with the implementation! It looks awesome!

In the meantime, I had been using "Link List" input functions and changing tokens to show and hide panels with tags, but needed a way to not force the user to scroll back up to the top to use them to "expand/collapse" certain panels by showing them or hiding them.

I'll use this as the accepted answer.

Thanks!

0 Karma

rjthibod
Champion

No problem. I got tired of fighting similar issues and wanted something that was much more modern and user-friendly. Feel free to message me if you have questions. I suggest you get on Splunk Slack channel if you are not. I am @artie73 on the Splunk Slack channel.

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...