Dashboards & Visualizations

How to load Javascript & CSS in Splunk to build a dashboard?

IRHM73
Motivator

Hi,

I wonder whether someone may be able to help me please.

I want to build a TagCLoud dashboard which I know will require the use of Javascript & CSS files for which I have a copy of both from the tutorials.

I just wondered whether someone may be able to provide just a simple step by step guide how to load both the js and css into Splunk and how I can edit these whilst in Splunk.

You can probably tell I'm new to Splunk having only had this a couple of weeks, and the Splunk guidance I've read doesn't really help from a beginners perspective.

Many thanks and kind regards

Chris

Tags (3)
1 Solution

jeffland
SplunkTrust
SplunkTrust

You'll have to create a place in your app for them, appname/appserver/static, and place the files there. Then you edit the Simple XML of your dashboard so that the dashboard tag (or, if your dashboard contains inputs, the form tag) includes a reference to these files, i.e.

<dashboard script="code.js" stylesheet="styles.css">
  ...

As with all newly created files, splunk only picks them up at a start, so you'll have to restart your splunk after you put your files into appserver/static before you can make use of them in XML.

After that, the usual procedure is to add a div in a html tag which you grab in js and do everything after that there. I'd recommend you just do it to learn how it works, you could start with this tutorial and also follow the how-tos on the right on that page, starting with this one.

View solution in original post

jeffland
SplunkTrust
SplunkTrust

You'll have to create a place in your app for them, appname/appserver/static, and place the files there. Then you edit the Simple XML of your dashboard so that the dashboard tag (or, if your dashboard contains inputs, the form tag) includes a reference to these files, i.e.

<dashboard script="code.js" stylesheet="styles.css">
  ...

As with all newly created files, splunk only picks them up at a start, so you'll have to restart your splunk after you put your files into appserver/static before you can make use of them in XML.

After that, the usual procedure is to add a div in a html tag which you grab in js and do everything after that there. I'd recommend you just do it to learn how it works, you could start with this tutorial and also follow the how-tos on the right on that page, starting with this one.

joao_amorim
Communicator

Hi @jeffland do you know if it's possible to create other dirs inside static and place the files there?
Instead of the files being at appname/appserver/static, could they be at appname/appserver/static/xpto/example/file.js.

Thanks in advance,
João Amorim

0 Karma

jeffland
SplunkTrust
SplunkTrust

As far as I know that's not possible with the procedure described in the answer above. But you can certainly place a .js file in that main directory which then loads a number of other files from subfolders with require.

0 Karma

joao_amorim
Communicator

Thank you!

0 Karma

IRHM73
Motivator

Hi @jeffland, many thanks and kind regards

Chris

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Observe and Secure All Apps with Splunk

 Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

What's New in Splunk Observability - August 2025

What's New We are excited to announce the latest enhancements to Splunk Observability Cloud as well as what is ...

Introduction to Splunk AI

How are you using AI in Splunk? Whether you see AI as a threat or opportunity, AI is here to stay. Lucky for ...