Dashboards & Visualizations

Adding a CSS and JavaScript source to an app's HTML Dashboard

Jonathan_hyde
Explorer

Hello all,

I've looked around and have tried some other answers but are unable to have it functioning correctly.

We're looking to add CSS and JavaScript to an app, however when we load our instance we are unable to load the source up, we've made sure the directory is correct, we've used the regular HTML expressions:

LukeMurphey
Champion

Put the content in application.css and application.js accordingly. The paths are as follows:

  • $SPLUNK_HOME/etc/apps//appserver/static/application.js
  • $SPLUNK_HOME/etc/apps//appserver/static/application.css

These files will be loaded for every page within your app context.

You can put other resources (such as images) in the appserver/static directory too. Then, refer to them in the CSS using a relative path.

Here is an example:
Assume that an image named "picture.png" was placed in the following directory:

$SPLUNK_HOME/etc/apps//appserver/static/images/picture.png

You could reference this in your stylesheet like this:

.somePicture {
    background-image: url('images/picture.png');
}

LukeMurphey
Champion

Just added info to the answer regarding how to link to images in your stylesheet.

0 Karma

Jonathan_hyde
Explorer

Brilliant it worked thanks, final question - do you know how to add images, as the css links to the images too? Thanks.

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!

Persistent Queue at TcpOut — One of Splunk's Most Practical Features

Splunk introduced persistent queueing at the tcpout layer as one of the most practical resilience features in ...

Catalog Is Now Generally Available on Splunk Cloud Platform

A Unified View of Your Data  Security logs, application events, business data, and historical telemetry often ...

Your Path to AgenticOps: AI Experiences for Every Splunk Practitioner

Your Path to AgenticOps: AI Experiences for Every Splunk Practitioner   Watch on demand us for a demo-driven ...