topic How do I add JavaScript to a Splunk dashboard? in Dashboards & Visualizations

How do I add JavaScript to a Splunk dashboard?

kannu — Fri, 27 Oct 2017 11:39:52 GMT

Hi splunkers,

I am using code provided below for adding the code.js in my splunk dashboard.

<dashboard script="code.js">
      <label>html_css_js</label>
      <row>
        <panel>
          <html>
            <div>
            <p>Click the following button to call the function</p>

          <form>
             <input type="button" onclick="sayHello()" value="Say Hello"/>
          </form>

          <p>Use different text in write method and then try...</p>
            </div>
          </html>
        </panel>
      </row>
    </dashboard>

And i have placed the code.js in /opt/splunk/etc/apps/manish_testing/appserver/static
after that restarted splunk

but still i am not getting the result

code.js:
splunk@manish121:~/etc/apps/manish_testing/appserver/static $ cat code.js
function sayHello()
{
document.write ("Hello there!");
}

Please help :
Let me know if i am doing wrong or there is another way to do it.

Re: How do I add JavaScript to a Splunk dashboard?

niketn — Fri, 27 Oct 2017 12:54:21 GMT

@kannu, I had answered something on similar lines https://answers.splunk.com/answers/579537/how-to-use-javascript-code-in-splunk-cloud-dashboa.html

You can also refer to some of Simple XML JavaScript extension examples on Splunk Dashboard Examples app on Splunkbase ( https://splunkbase.splunk.com/app/1603/ )
Or the Splunk Web Framework tutorial: http://dev.splunk.com/view/webframework-tutorials/SP-CAAAERB

Re: How do I add JavaScript to a Splunk dashboard?

kannu — Mon, 30 Oct 2017 12:46:56 GMT

@niketnilay
thank you for very quick answer .

But same alert i want to trigger by using button for that i have added code in html

<dashboard script="example.js">
   <label>Hello World JavaScript Example</label>
   <row>
     <panel>
       <html>
         <div>
           Splunk Simple XML JavaScript Extension to show Hello World alert and console log using JavaScript file <b>hello_world.js</b>.
           The JavaScrpt File needs to be placed under the Splunk App's Static folder i.e. <b>$SPLUNK_HOME$/apps/etc/$env:app$/appserver/static</b>, based on the current app <b>$env:app$</b>.
         </div>&lt;br/&gt;
         <div>
           Following is the JavaScript Code:<br/>&lt;br/&gt; 
           <form>
              <input type="button" onclick="function()" value="Say Hello"/>
           </form>
           PS: Press <code>F12</code> to Open Browser Inspect Tool to view JavaScript console log. 
         </div>
       </html>
     </panel>
   </row>
 </dashboard>

Re: How do I add JavaScript to a Splunk dashboard?

kannu — Mon, 30 Oct 2017 13:26:34 GMT

js code i am using

require([
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
         ], function(mvc) {
             var myEvents = mvc.Components.get('myevents');
             myEvents.on("click", function(e) {
                         alert("Hello World");
                         console.log("Click!");
                         });
         });

Re: How do I add JavaScript to a Splunk dashboard?

niketn — Mon, 30 Oct 2017 14:10:06 GMT

@kannu, In order code the click() event of your custom input button using jQuery selector, try the following two steps:

1) Give input an id for example id="myHelloButton"

<input type="button" onclick="function()" value="Say Hello"/>

2) In the JavaScript code add jQuery selector based on id as $("#myHelloButton") and then code the click() event

     $("#myHelloButton").on("click",function(){
                 alert("Hello World");
                 console.log("Click!");
          });
     });

There is an example for similar scenario (Refresh Dashboard on Button Click) : https://answers.splunk.com/answers/554639/i-want-to-refresh-the-dashboard-on-button-click-is.html

Please try out and confirm.