Alerting

Calling Java Script from Dashboard

earakam
Path Finder

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");
}

Labels (1)
Tags (1)
1 Solution

jeffland
Champion

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
Champion

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
Explorer

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

0 Karma

salunkhevikram
New Member

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

0 Karma

jeffland
Champion

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

0 Karma

sandyBDF
Engager

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

0 Karma

jeffland
Champion

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.

0 Karma

sandyBDF
Engager

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

0 Karma

jeffland
Champion

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.

0 Karma

earakam
Path Finder

oooo great!! thank you!!!

0 Karma
Get Updates on the Splunk Community!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...