Dashboards & Visualizations

Javascript in Dashboard not working

TheEggi98
Path Finder

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?

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

@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
Path Finder

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

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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
Path Finder

Thats really good to know.

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

0 Karma
Get Updates on the Splunk Community!

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...