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!

Detecting Remote Code Executions With the Splunk Threat Research Team

REGISTER NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If ...

Observability | Use Synthetic Monitoring for Website Metadata Verification

If you are on Splunk Observability Cloud, you may already have Synthetic Monitoringin your observability ...

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...