Dashboards & Visualizations

Can I add JavaScript and CSS to an XML dashboard?

jtroncoso
Explorer

Can I add this circular menu with javascript and css to an xml dashboard without saving the dashboard as html? How can I do it without saving the dashboard as html?
https://jsfiddle.net/yandongCoder/kL4j7xor/10/
https://www.npmjs.com/package/circular-menu

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi

You have to create a folder in your app, appname/appserver/static, and place the files there.
Then you edit the Simple XML of your dashboard so that the dashboard 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.

Check below splunk example for javascript:
http://dev.splunk.com/view/SP-CAAAEMU

Please check good answer on splunkbase:
https://answers.splunk.com/answers/572464/adding-simple-javascript-css-html-in-splunk-dashbo.html

thanks

jtroncoso
Explorer

In the example that you sent me, it says how to do it by converting the dashboard to html format. I NEED TO ADD CSS AND JAVASCRIPT IN A DASHBOARD IN XML FORMAT IS IT POSSIBLE? HOW IS IT DONE?

0 Karma

rjthibod
Champion

The best way to explain how to do this is show you my own example of what @kamlesh_vaghela was suggesting.

Here is a repo for my own app with custom JS/CSS components: https://github.com/thibodux/developer_gadgets

if you look under appserver/static/components you will see some of my custom JS classes/modules. You need to put the JS and CSS files for the menu in this kind of folder structure. Then you need to create another JS file that sits in appserver/static that will initialize and pull in the components. @kamlesh_vaghela referred to this as code.js, and in my app repo it is called load.js (https://github.com/thibodux/developer_gadgets/blob/master/appserver/static/load.js). It doesn't matter what you name the file.

The primary requirement for your dashboard is that it must include this top-level JS file in the dashboard or form XML element like @kamlesh_vaghela showed with <dashboard script="code.js" ...>. You can look at the XML files in my app repo to see how I do the same thing.

Now, I am not making any guarantees that this will actually work with the menu library you want. But this is the approach you use to incorporate such custom things in a Splunk app/xml dashboard.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...