topic Re: Javascript in Dashboard not working in Dashboards & Visualizations

Javascript in Dashboard not working

TheEggi98 — Mon, 04 Oct 2021 09:52:35 GMT

I tried to add a simple JS to a dashboard but nothing i tried works.
I have Splunk 8.2.1 single instance on Windows.

The script is in C:\Program Files\Splunk\etc\apps\<appname>\appserver\static

i restartet the splunk service several times and clicked the bump button several times.
JS is active in my browser and the cache got cleared several times too.

When i go to http://127.0.0.1:8000/de-DE/app/<appname>/<dashboardname>/<scriptname> i just get {}

My Dashboard:

<form script="btnclick.js"> <label>JS Test</label> <init> </init> <fieldset submitButton="false"> <input type="text" token="field1"> <label>field1</label> <default>$randInt$</default> </input> </fieldset> <row> <panel> <html> <button id="rand" class="btn btn-primary">Random</button> <p> $randInt$ </p> </html> </panel> </row> </form>

My JS:

require( [ "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!" ], function(mvc) { var tokens = mvc.Components.get("default"); console.log("Test"); $('#rand').on("click",function(){ tokens.set("randInt", 2); }); } );

Why does it not work?

Re: Javascript in Dashboard not working

kamlesh_vaghela — Mon, 04 Oct 2021 15:34:12 GMT

@TheEggi98

Your code looks good. Even http://127.0.0.1:8000/de-DE/app/<appname>/<dashboardname>/<scriptname> working fine for me.

Can you please try below version in your instance?

require([ 'splunkjs/mvc', 'jquery', "splunkjs/mvc/simplexml/ready!" ], function(mvc, $) { var tokens = mvc.Components.get("default"); console.log("Test"); $(document).ready(function() { $('#rand').on("click", function() { console.log(tokens.get("field1")) tokens.set("randInt", tokens.get("field1")); }); }) });

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: Javascript in Dashboard not working

TheEggi98 — Tue, 05 Oct 2021 06:07:12 GMT

@kamlesh_vaghela
Interesting behavior, i pasted your Code and it worked, but the input only set the token once.

When i type 20 in the input and press the Button first time, the token $randInt$ get set to 20, but when i change the input from 20 to 10 and press the button again nothing happens.

I changed the Line where the token get set to

tokens.set("randInt", console.log(tokens.get("field1")));

to test something, every buttonclick write a log with the current value from the input.
Is it a "feature" from Splunk to set the token just one time?
I Also tried to unset the token before setting it again, also just one time set.

Re: Javascript in Dashboard not working

kamlesh_vaghela — Tue, 05 Oct 2021 14:54:43 GMT

@TheEggi98

I have observed another thing, may be that will help you.

The Observation is regarding html panel.

"When any token been changed and reflected in HTML, it will re-render the html content and removed previously assigned events on any html element."

So Please try below code and let me know your observations as well.

<form script="a.js"> <label>JS Test</label> <init> </init> <fieldset submitButton="false"> <input type="text" token="field1"> <label>field1</label> </input> </fieldset> <row> <panel> <html> <button id="rand" class="btn btn-primary">Random</button> </html> </panel> <panel> <html> <p> $randInt$ </p> </html> </panel> </row> </form>

require([ 'underscore', 'splunkjs/mvc', 'jquery', "splunkjs/mvc/simplexml/ready!" ], function(_, mvc, $) { var tokens = mvc.Components.get("default"); console.log("Test"); $(document).ready(function() { console.log("Strt") $('#rand').on("click", function() { console.log("clicked") console.log(tokens.get("field1")) tokens.set("randInt", tokens.get("field1")); console.log(tokens.get("randInt")) console.log($('#rand')) }); }) });

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: Javascript in Dashboard not working

TheEggi98 — Tue, 05 Oct 2021 16:50:17 GMT

Thats really good to know.

Now only the capabilities of JS can stop me from improving Dashboards 😄