Archive

Trouble getting the JQuery UI Accordion to work in 6.5.1

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

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

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

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

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