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
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...