Dashboards & Visualizations

How do I add JavaScript to a Splunk dashboard?

kannu
Communicator

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.

1 Solution

niketn
Legend

@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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kannu
Communicator

@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>
0 Karma

kannu
Communicator

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

niketn
Legend

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...