Animate SimpleXML Dashboard Elements with a Carousel

[danillopavan]

Hi all, i am trying to implement the Carousel animation as explained by the below link however still getting issues..

https://www.splunk.com/blog/2017/04/25/animate-simplexml-dashboard-elements-with-a-carousel.html

Did someone implement this animation?

I have created a Dashboard, and then copy the files "carousel.css" and "carousel.js" into my static folder. I have created also a sub folder called "js/lib" with 3 files "jquery.cloud9carousel.js", "jquery.js" and "jquery.reflection.js"

Initially loading the Dashboard I got the below issue:

jquery.cloud9carousel.js:371 Uncaught TypeError: Cannot read property 'fn' of undefined
at jquery.cloud9carousel.js:371
at jquery.cloud9carousel.js:394

Probably because jQuery was not being loaded correctly. I have changed the file "jquery.cloud9carousel.js" adding in the initial of the file the code "require([ 'jquery'". After that i believe that jQuery began to be loaded correctly, but I started to got other error: Uncaught TypeError: showcase.Cloud9Carousel is not a function
at carousel.js:18

The method "Could9Carousel" was not identified.

Could you please let me know what I doing wrong?

Many thanks and regards,
Danillo Pavan

[danillopavan · Accepted solution]

Hi all,

It is working fine now 🙂
I was able to implement that just making one change...
In the initial of the file "jquery.cloud9carousel.js", I needed to add the below code:
"require([
'jquery'
], function($) {"

instead of
";(function($) {"

It is working perfectly!

Thanks and regards,
Danillo Pavan

[niketn]

@danillopavan I tried the code on Splunk Enterprise 7 and original code shared in the blog worked without any changes.

[nagar57]

I am also trying to implement the same thing in splunk 7.x but not able to do so. After inspecting the webpage I am getting this error:

 Uncaught TypeError: showcase.Cloud9Carousel is not a function
    at eval (eval at globalEval (common.js:15), <anonymous>:17:11)
    at Object.execCb (eval at module.exports (common.js:139), <anonymous>:1658:33)
    at Module.check (eval at module.exports (common.js:139), <anonymous>:874:51)
    at Module.eval (eval at module.exports (common.js:139), <anonymous>:1121:34)
    at eval (eval at module.exports (common.js:139), <anonymous>:132:23)
    at eval (eval at module.exports (common.js:139), <anonymous>:1164:21)
    at each (eval at module.exports (common.js:139), <anonymous>:57:31)
    at Module.emit (eval at module.exports (common.js:139), <anonymous>:1163:17)
    at Module.check (eval at module.exports (common.js:139), <anonymous>:925:30)
    at Module.enable (eval at module.exports (common.js:139), <anonymous>:1151:22)
VM650:766 Uncaught TypeError: depMaps.slice is not a function
    at Module.init (eval at module.exports (common.js:139), <anonymous>:766:51)
    at eval (eval at module.exports (common.js:139), <anonymous>:1424:36)

I tried adding require([
'jquery'
], function($) {
in jquery.cloud9carousel.js, But it didn't work
Could you please help
TIA!!

[advin]

I followed that article exactly but I did not received any kind of errors and still does not worked. Could you please let me know what I doing wrong? Thanks.

[niketn]

@advin by error do you mean you have used Browser Inspector Tool to verify no Errors in the JavaScript Console?

[advin]

I mean, I am not seeing any kind of issues by loading the dashbaord but the feature does not worked.

[niketn]

Hit F12 on your browser, check under console whether you see any errors. Usually red cross icon with error count should show up if something is failing or static files have not been uploaded to correct folder.

Also, hope you are using separate Single Value panels and not Single Value Trellis as Carousal will not work with Trellis.

[niketn]

@danillopavan, great to know that you were able to find the solution on your own. Please go ahead and accept your own answer.