Dashboards & Visualizations

How to use JavaScript code in Splunk Cloud dashboard ?

shukan
Explorer

I would like to fetch query string value through script in splunk cloud dashboard or in report so how it can be possible ?

For ex. www.splunkcloud.com ? q=TRY

Dashboard source code of cloud

alt text
I am not able to call any script. its giving error.

If i want to use q's value TRY in any search query like report,chart,dashboard then how it is possible?

Thanks in advance.

niketn
Legend

@shukan, While you can use <style> tag directly in Splunk Simple XML dashboards to load/override CSS style, Javascript does not work this way. You will need to use Simple XML JS Extension.

There are several examples on Splunk Dashboard Examples app on Splunkbase ( https://splunkbase.splunk.com/app/1603/ )
You can also refer to Splunk Dev site for the same: http://dev.splunk.com/view/SP-CAAAE4A#editjs

Following is an example of dashboard which uses hello_world.jsJavaScript file.

alt text

<dashboard script="hello_world.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><br/>
        <div>
          Following is the JavaScript Code:<br/><br/> 
          <code>
            require([
                "splunkjs/mvc/simplexml/ready!"
            ], function() {
              alert("Hello World");
                console.log("Console Log: Hello World");
            });
          </code><br/><br/>
          PS: Press <code>F12</code> to Open Browser Inspect Tool to view JavaScript console log. 
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Following is the code for JavaScript file which needs to be placed under your Splunk app's static folder:

        require([
            "splunkjs/mvc/simplexml/ready!"
        ], function() {
            alert("Hello World");
            console.log("Console Log: Hello World");
        });

PS: If you want to load Static files like Javascript file on Splunk Cloud you should test the same on your local Splunk Instance and then reach out to Splunk Support for getting the same uploaded to your Splunk Cloud instance.

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

biju_babu
Explorer

Is there a way to add the java script in xml inline?

I am using cloud version and don't have rights to add the script in path.

spunk_enthusias
Path Finder

I'm looking for this as well, for colocation reasons. But so far I haven't found a way.

For people playing along at home: web.conf has a few options for dashboards (like dashboard_html_allow_embeddable_content), but seemingly nothing to allow embedding scripts.

0 Karma
Get Updates on the Splunk Community!

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...