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?
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
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
I want to know what is {{SPLUNKWEB_URL_PREFIX}} in baseUrl here. Is it already available in splunk?
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:
Thanks
KV
▄︻̷̿┻̿═━一
If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.
@manuel2202, I have converted your comment to answer. Please accept the same to mark this as answered.
@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.