Splunk Enterprise

How can I load external JavaScript files?

manuel2202
Explorer

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?

0 Karma
1 Solution

manuel2202
Explorer

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

View solution in original post

0 Karma

manuel2202
Explorer

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

0 Karma

sherlock109
Engager

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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/walkthroughautogen...

 

Thanks
KV
▄︻̷̿┻̿═━一

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

niketn
Legend

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...