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!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...