Solved: Javascript in Dashboard not working

TheEggi98 · ‎10-04-2021

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?

kamlesh_vaghela · ‎10-05-2021

@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.

View solution in original post

kamlesh_vaghela · ‎10-04-2021

@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.

TheEggi98 · ‎10-04-2021

@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.

kamlesh_vaghela · ‎10-05-2021

@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.

TheEggi98 · ‎10-05-2021

Thats really good to know.

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

Javascript in Dashboard not working

javascript

token

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

Elevate Your Organization with Splunk’s Next Platform Evolution

Splunk Answers Content Calendar, June Edition

Are you a member of the Splunk Community?

Javascript in Dashboard not working

javascript

token

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

Elevate Your Organization with Splunk’s Next Platform Evolution

Splunk Answers Content Calendar, June Edition