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!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...