topic Custom javascript doesn't work in Splunk Enterprise

Custom javascript doesn't work

catta99 — Sat, 19 Oct 2024 13:57:30 GMT

Hi,

i am trying to use custom javascript file to customize some button actions in my dashboard, but it doesn't work and i don't know why. I'm using the last version of Splunk enterprise

My custom script is in the folder $SPLUNK_HOME/etc/apps/app_name/appserver/static/.

I have tried to restart Splunk web, use the bumps button but nothing works.

Can anyone help me?

Simple xml dashboard code

<form version="1.1" theme="dark" script="button.js"> <search> <query> | makeresults | eval field1="test", field2="test1", field3="lll", field4="sgsgsg" </query> <earliest></earliest> <latest>now</latest> <done> <set token="field1">$result.field1$</set> <set token="field2">$result.field2$</set> <set token="field3">$result.field3$</set> <set token="field4">$result.field4$</set> </done> </search> <label>stacked_inputs</label> <fieldset submitButton="false" autoRun="true"></fieldset> <row> <panel> <title>title</title> <input id="test_input1" type="text" token="field1"> <label>field1</label> <default>$field1$</default> <initialValue>$field1$</initialValue> </input> <input id="test_input2" type="text" token="field2"> <label>field2</label> <default>$field2$</default> <initialValue>$field2$</initialValue> </input> <html> <style> #test_input2 { padding-left: 30px !important; } </style> </html> </panel> </row> <row> <panel> <input id="test_input3" type="text" token="field3"> <label>field3</label> <default>$field3$</default> <initialValue>$field3$</initialValue> </input> <input id="test_input4" type="text" token="field4"> <label>field4</label> <default>$field4$</default> <initialValue>$field4$</initialValue> </input> </panel> </row> <row> <panel> <html> <form> <div> <div> <label>Password</label> <input type="text" value="$field4$"/> <br/> <input type="password" id="exampleInputPassword1" placeholder="Password"/> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <button onclick="test()">Back</button> <button onclick="test1()">Back1</button> <button id="back" data-param="test">Back2</button> </html> </panel> </row> </form>

Javascript code

As you can see i have tried different methods

Thanks for your help.

Re: Custom javascript doesn't work

tscroggins — Sun, 20 Oct 2024 17:20:03 GMT

Hi @catta99,

In your JavaScript source, you can use jQuery selectors to attach a click event handler to an object.

In this example, I define a button with id="button1" in button_test.xml and attach a click event handler in button_test.js:

<dashboard version="1.1" theme="light" script="button_test.js"> <label>button_test</label> <row> <panel> <html> <button id="button1">Button 1</button> </html> </panel> </row> </dashboard>

// button_test.js require([ "jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!" ], function($, mvc) { $("#button1").on("click", function() { alert("Button 1 clicked."); }); });

When button1 is clicked, the browser displays a dialog box with the message "Button 1 clicked."

SplunkJS is documented at https://dev.splunk.com/enterprise/docs/developapps/visualizedata/usewebframework/, where you can find example JavaScript templates.

RequireJS is documented at https://requirejs.org/docs/api.html#jsfiles, but its use is limited to the require([...], function(...) {}); shown above.

jQuery selectors are documented at https://api.jquery.com/category/selectors/.

The jQuery click event is documented at https://api.jquery.com/click/.

Re: Custom javascript doesn't work

catta99 — Mon, 21 Oct 2024 17:24:44 GMT

Thanks @tscroggins , for your answer.

But i still have some big problem with javascript, because sometimes Splunk web did not load the code, sometimes the code didn't work and some times works without changing it.

I have red the documentation, i use the refresh button (http://<ip:port>/debug/refresh), i'm using my browser in incognito mode but nothing, i restar splunk web when i add a new js file. I even tried to fully restart splunk

Thank for your help

Re: Custom javascript doesn't work

tscroggins — Thu, 24 Oct 2024 00:41:35 GMT

Hi @catta99,

To clear the server-side cache, restart splunkweb as you have done:

$SPLUNK_HOME/splunk/bin/splunk restart splunkweb

To clear the client-side cache, use your browser's cache functions or temporarily disable caching in your browser's dev tools.

To prevent splunkweb from caching source files during development, you can disable caching in web.conf and restart Splunk:

# $SPLUNK_HOME/etc/system/local/web.conf
[settings]
cacheBytesLimit = 0

The example I provided can be expanded as needed. If you're still having issues after clearing all caches, reply with a reduced SimpleXML and JavaScript example, and we'll take another look.

Re: Custom javascript doesn't work

catta99 — Thu, 24 Oct 2024 06:59:19 GMT

Hi @tscroggins, thanks for your answer,

in the documentation i have found this configuration:

minify_js = False

js_no_cache = True

cacheEntriesLimit = 0

cacheBytesLimit = 0

enableWebDebug = True

and it works.

Sometimes not but i go to /debug/refresh and click the refresh button and splunk loads the new version of the js file.

But if you have a dashboard like that

<dashboard script="MyScript.js"> <search id="MySearch"> <query> query that take some time </query> </search> <row> <panel> <hmtl> <button id="btn">Button </button> </html> </panel> </row>

//MyScript require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) { $("#btn").on("click", function() { // js code }); });

Splunk will not load the Jquery part, but if you go on "edit"->"source"->"cancel" without modifiyng anything in the dashboard source code the javascript code works.

So the problem maybe is caused because the search (id="MySearch") in the dashboard is executed in an async way?

I have read some posts on this topic but i didn't find any solution

I have tried

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) { $("#MySearch").on("search:done", function(){ $("#btn").on("click", function() { // js code }); }); });

but nothing

Re: Custom javascript doesn't work

tscroggins — Sat, 02 Nov 2024 16:50:13 GMT

Hi @catta99,

You probably want to start with buttons disabled and then enabled them when the dashboard's async searches are done. You can use SplunkJS to attach search:done event handlers to your searches (see below).

A complex dashboard (multiple searches, multiple buttons, etc.) may require a more complex solution. You can find more information in the SplunkJS documentation or more generally, in your favorite web development resources (or AI stack, if you use one).

<dashboard version="1.1" theme="light" script="button_test.js"> <label>button_test</label> <search id="search1"> <query>| stats count</query> <earliest>-24h</earliest> <latest>now</latest> </search> <row> <panel> <html>  <button id="button1" disabled="disabled">Button 1</button> </html> </panel> </row> </dashboard>

// button_test.js require([ "jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!" ], function($, mvc) { search1 = splunkjs.mvc.Components.get("search1"); search1.on("search:done", function(properties) { $("#button1").prop("disabled", false); }); $("#button1").on("click", function() { alert("Button 1 clicked."); }); });

Re: Custom javascript doesn't work

kamlesh_vaghela — Mon, 04 Nov 2024 04:59:20 GMT

@catta99

Please check below code

Splunk Web Framework works little different from regular or Native Jquery/Javascript behaviour specially on HTML element. So when you write

It may not work bcoz when you run the dashboard, the Dashboard XML is rendering into complied version of JS, CSS and HTML. After all this process it will allow developer to add custom JS, CSS and even custom components through custom JS like button_test.js. So all customisation and the element event handleling will be define in this JS only.

Suggestion: Using below code is not best practive. Just code what you want instead of

this.history.back();

I hope this will help you.

Let me know if you need further help on this.

Thanks
KV
An upvote would be appreciated if any of my replies help you solve the problem or gain knowledge.