Can I add JavaScript and CSS to an XML dashboard?

[jtroncoso]

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

[kamlesh_vaghela]

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]

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?

[rjthibod]

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.