Splunk Dev

How to bundle and reference jquery-ui library in Splunk

jzapantis
Path Finder

I am trying to figure out how to load the jquery-ui library into my splunk app and reference it in my Splunk dashboard html. I am not trying to make a call to the jquery site to reference their code - I need to refer to it locally as I cannot make external calls from my server. I downloaded the zip jquery-ui, and I have unzipeed into /appserver/static folder.

I am pointing to the jquery-ui code in my dashboard html like such:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Correlation Overview Clone_new_test HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@4423A06D4EA5E64AEACE49570D027CE8170238F078939E98BA42D5F5CC20FDC4.103/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1/jquery-ui.min.css" />
    <!--Or should it be: <link rel="stylesheet" type="text/css" href="appserver/static/jquery-ui-1.12.1/jquery-ui.css" /> -->
    <style>
        #accordionpanel { 
            background-color: inherit;
        }
    </style>
</head>

I have also pointed to my library here as well:

require.config({
    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': 'jquery-ui.min'
    },
    shim: {
        'jquery-ui': {
            deps: ['jquery']
        }
    }
});

I get the following errors in my browser console:

GET https://------------:<port>/en-US/app/<blahh ballh>/jquery-ui-1.12.1/jquery-ui.min.css 500 (Internal Server Error)
VM98:1903 GET https://-----------:<port>/en-US/static/@59c8927def0f.103/js/jquery-ui.min.js 
req.load @ VM98:1903
load @ VM98:1647
load @ VM98:828
(anonymous) @ VM98:814
(anonymous) @ VM98:132
execCb @ VM98:1658
check @ VM98:874
enable @ VM98:1151
init @ VM98:782
(anonymous) @ VM98:1424
VM98:166 Uncaught Error: Script error for: jquery-ui
http://requirejs.org/docs/errors.html#scripterror
    at makeError (eval at module.exports (index.js:1), <anonymous>:166:17)
    at HTMLScriptElement.onScriptError (eval at module.exports (index.js:1), <anonymous>:1689:36)

Any ideas on the error I am making when referencing the bundled jquery-ui library locally?

0 Karma

sumangala
Path Finder

Hi,

If you need to refer to the local library in splunk means,
1. U need to keep the library file at {splunk_path}/etc/apps/{your app name}/appserver/static/
2. Give reference of this library as a url path of your app like: https://localhost:{port_no}/en-GB/static/app/{your app name}/
3. Include js file like <script type="text/javascript" src="https://localhost:{port_no}/en-GB/static/app/{app_name}/file_name.js"></script>
I think this will help you.

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

From Data to Insight: Announcing the Winners of the Splunk Dashboard Contest

Hi Splunkers, First off, thank you to everyone who participated in our very first From Data to Insight: The ...

Splunk Developers: Construct Your Future at the .conf26 Builder Bar

Calling all Splunk architects, platform admins, and app developers: the site is open, and the blueprints are ...

Quick connection discovery mode for forwarders

When a Splunk forwarder loses connectivity to its indexers, it does not always reconnect immediately. In many ...