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
Champion

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
Champion

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
Champion

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

BSides Splunk 2022 - The Call for Papers is now Open!

TLDR; Main Site: https://bsidessplunk.com CFP Site: https://bsidessplunk.com/cfp CFP Opens: December 15th, ...

Sending Metrics to Splunk Enterprise With the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

What's New in Splunk Cloud Platform 9.0.2208?!

Howdy!  We are happy to share the newest updates in Splunk Cloud Platform 9.0.2208! Analysts can benefit ...