topic How can I load external JavaScript files? in Splunk Enterprise

How can I load external JavaScript files?

manuel2202 — Tue, 05 Sep 2017 11:11:09 GMT

How can I load extern js scripts in Splunk 6.6.3
I try to follow the music dashboard tutorial.

http://dev.splunk.com/view/SP-CAAAEN5

It's saying that I should search for:

waitSeconds: 0 // Disable require.js load timeout

But the HTML field did not contain this string. How can I load jquery-ui?

Re: How can I load external JavaScript files?

niketn — Tue, 05 Sep 2017 14:47:09 GMT

@manuel2202, The example uses jQuery UI through CDN url, which implies it should load and work as far as you are connected to internet.

Are you facing issue when you try out step 3 to add a jQuery UI Accordion or are you using the final code in the example? The reason why I ask is that Sankey Diagram requires sankey-helper.js file which needs to be uploaded to your Splunk App's appserver/static folder as stated in Step 4 : http://dev.splunk.com/view/SP-CAAAEN6. This will also require bump/refresh/restart of Splunk and clearing up of browser history to work.

Re: How can I load external JavaScript files?

manuel2202 — Wed, 06 Sep 2017 10:58:38 GMT

My issue was the missing require.config. The tutorial says to search for:

waitSeconds: 0

But this code is not generated default.

This was the missing piece of code to load external JS files via require.js

require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0, // Disable require.js load timeout
    // For this tutorial, download third-party libraries over the internet. 
    // In practice, it is recommended that you bundle dependencies with your app.
    paths: {
        'jquery-ui': 'http://code.jquery.com/ui/1.10.0/jquery-ui',
        'd3': 'http://d3js.org/d3.v2.min',
        'sankey': 'http://bost.ocks.org/mike/sankey/sankey',
        'sankey-helper': '{{SPLUNKWEB_URL_PREFIX}}/static/app/musicdashboardtutorial/sankey-helper',
        'flux': 'http://www.joelambert.co.uk/flux/js/flux'
    },
    shim: {
        'jquery-ui': {
            deps: ['jquery']
        },
        'sankey': {
            deps: ['d3']
        },
        'sankey-helper': {
            deps: ['sankey']
        },
        'flux': {
            deps: ['jquery']
        }
    }
});

Now it's working

Re: How can I load external JavaScript files?

niketn — Wed, 06 Sep 2017 16:13:32 GMT

@manuel2202, I have converted your comment to answer. Please accept the same to mark this as answered.

Re: How can I load external JavaScript files?

sherlock109 — Fri, 09 Jul 2021 05:17:38 GMT

I want to know what is {{SPLUNKWEB_URL_PREFIX}} in baseUrl here. Is it already available in splunk?

Re: How can I load external JavaScript files?

kamlesh_vaghela — Fri, 09 Jul 2021 06:43:13 GMT

@sherlock109

A placeholder {{SPLUNKWEB_URL_PREFIX}} is used for the prefix of all internal URLs. When the dashboard is rendered, this placeholder is replaced with the correct URL for users, including their locale.

Check this:

https://dev.splunk.com/enterprise/docs/developapps/visualizedata/convertsimplexml/walkthroughautogenerated/

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.