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.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Take Action Automatically on Splunk Alerts with Red Hat Ansible Automation Platform

 Are you ready to revolutionize your IT operations? As digital transformation accelerates, the demand for ...

Calling All Security Pros: Ready to Race Through Boston?

Hey Splunkers, .conf25 is heading to Boston and we’re kicking things off with something bold, competitive, and ...

Beyond Detection: How Splunk and Cisco Integrated Security Platforms Transform ...

Financial services organizations face an impossible equation: maintain 99.9% uptime for mission-critical ...