Solved: Calling Java Script from Dashboard

earakam · ‎03-10-2016

I am trying to call Java Script by pressing a button on Dashboard but it doesn't seem to work.
Could anyone teach me how to do this? As a first step, I want to pop up an alert saying "YAHOO" by clicking the button.
The final goal is better than that but I just want to check that JavaScript actually works.

My source codes are below:

Dashboard XML:
input type="button" name="yahoo" value="YAHOO" onClick="kakunin()"

Java Script (in /opt/splunk/etc/apps//appserver/static)

function kakunin(){
alert("YAHOO");
}

jeffland · ‎03-11-2016

Here's one way of doing it. Sample XML dashboard in app custom_app:

<dashboard script="your_javascript_file.js">
  <label>Dashboard with Javascript on Button</label>
  <row>
    <panel>
      <html>
        <div>
          <input id="btn-submit" type="button" value="Click"/>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

your_javascript_file.js, located in custom_app/appserver/static:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"
    ], function(
        $
    ) {
        $("#btn-submit").on("click", function (){
            alert("Yahoo!");
        });
    });

Also, if you change the content in appserver/static, you'll notice that clients who had visited the dashboard before may not download the updates of your files. This is usually due to caching, which happens both on the server and on the client. One option is to empty your client's cache (or use private mode which disables the use of existing cached objects). I'd recommend control via the server however: depending on what environment you're on, you might want to use the _bump endpoint at

http://<host:mport>/<locale_string>/_bump

for a one-time reload of static assets or set cacheEntriesLimit=0 in web.conf to disable the cache entirely. The setting in web.conf is not something you want to do on a production server though, as it impacts performance. Refer to this documentation or this developer guide for more details, and also check out this developer guide on how to deploy apps with updated static assets (in short, increment version and build in app.conf to automatically trigger a reload on all clients).

View solution in original post

jeffland · ‎03-11-2016

Here's one way of doing it. Sample XML dashboard in app custom_app:

<dashboard script="your_javascript_file.js">
  <label>Dashboard with Javascript on Button</label>
  <row>
    <panel>
      <html>
        <div>
          <input id="btn-submit" type="button" value="Click"/>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

your_javascript_file.js, located in custom_app/appserver/static:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"
    ], function(
        $
    ) {
        $("#btn-submit").on("click", function (){
            alert("Yahoo!");
        });
    });

Also, if you change the content in appserver/static, you'll notice that clients who had visited the dashboard before may not download the updates of your files. This is usually due to caching, which happens both on the server and on the client. One option is to empty your client's cache (or use private mode which disables the use of existing cached objects). I'd recommend control via the server however: depending on what environment you're on, you might want to use the _bump endpoint at

http://<host:mport>/<locale_string>/_bump

for a one-time reload of static assets or set cacheEntriesLimit=0 in web.conf to disable the cache entirely. The setting in web.conf is not something you want to do on a production server though, as it impacts performance. Refer to this documentation or this developer guide for more details, and also check out this developer guide on how to deploy apps with updated static assets (in short, increment version and build in app.conf to automatically trigger a reload on all clients).

rlacher1 · ‎05-29-2016

That helped, thanks. I also had to remove the Bootstrap divs wrapping the submit button for this to work.

salunkhevikram · ‎05-09-2018

I am using Splunk version 6.4.1.
I tried this code as it is, but not worked for me.

jeffland · ‎05-14-2018

You probably need to restart splunk to pick up the .js file if it's new.

sandyBDF · ‎06-01-2020

hello don't work for me also with a splunk reboot.

jeffland · ‎06-02-2020

I've updated the answer with more information. If you can't get it to work, you should ask a new question giving details what you've tried so far.

sandyBDF · ‎06-02-2020

It's ok just i need to navigate in private mode so it's good for me sorry.

jeffland · ‎06-02-2020

If using private mode of your browser works for you, then it's client side caching. Your browser will not download new content from the static folders if they haven't changed. I'll update the question with more info about how to handle this.

earakam · ‎03-14-2016

oooo great!! thank you!!!

Calling Java Script from Dashboard

alert action

Introducing Splunk Enterprise 9.2

Adoption of RUM and APM at Splunk

Routing logs with Splunk OTel Collector for Kubernetes