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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...