Solved: Re: How to execute a Splunk search in a dashboard ...

abhayneilam · ‎03-29-2016

Hi,

This is with regards to this link :

https://answers.splunk.com/answers/378289/calling-java-script-from-dashboard.html

Upon clicking on the OK button in the dashboard, a pop-up is coming ( which is created through JavaScript),
My requirement is: In the pop-up if we click on OK, the Splunk search should execute.

Kindly help in urgent !!

lquinn · ‎03-30-2016

You could use the confirm button instead of alert. This way you can add an onclick event for when the user presses ok. Using the example from the link, instead of ...

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

you could have ...

require([
   "jquery",
   "splunkjs/mvc/searchmanager",
   "splunkjs/mvc/simplexml/ready!"
 ], function(
     $,
     SearchManager
 ) {
     var mysearch = new SearchManager({
         id: "mysearch",
         autostart: "false",
         search: "index=_internal | stats count by sourcetype" 
     });

     $("#btn-submit").on("click", function (){
         var ok = confirm("Yahoo!");
         if ( ok==true ){
             mysearch.startSearch();
         } else {
             alert('user did not click ok!');
         }
     });
});

View solution in original post

lquinn · ‎03-30-2016

You could use the confirm button instead of alert. This way you can add an onclick event for when the user presses ok. Using the example from the link, instead of ...

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

you could have ...

require([
   "jquery",
   "splunkjs/mvc/searchmanager",
   "splunkjs/mvc/simplexml/ready!"
 ], function(
     $,
     SearchManager
 ) {
     var mysearch = new SearchManager({
         id: "mysearch",
         autostart: "false",
         search: "index=_internal | stats count by sourcetype" 
     });

     $("#btn-submit").on("click", function (){
         var ok = confirm("Yahoo!");
         if ( ok==true ){
             mysearch.startSearch();
         } else {
             alert('user did not click ok!');
         }
     });
});

abhayneilam · ‎03-30-2016

Hi Iquinn,

Its working, popup is coming, with OK and Cancel , if I click on CANCEL , it shows a message that "User Did not Click ok!" ,

But if I click OK, it is not executing the Splunk Query . Nothing his happening .

Do, I need to write something in the xml ?

My xml has the following code in the next comment , in this comment,it is not showing properly

lquinn · ‎03-30-2016

Have you had a look in the jobs tab to see if the search has run? It may have run without you realising. Also check the javascript console to see if there are any errors. The fact that it works when you click cancel leads me to believe it is probably something to do with the search id not matching somewhere.

abhayneilam · ‎03-30-2016

yes, it is showing in "jobs" tab that it has run, but if I need to show the output in the panel of the dashboard then ?

lquinn · ‎03-30-2016

If it was me, I would do this with HTML. Is this an option for you? Can you convert the dashboard to HTML? I'm not sure of the XML way to do it.

abhayneilam · ‎03-30-2016

This is my XML Code :

abhayneilam · ‎03-30-2016

I can convert my dashboard in HTML, but then how to approach ?

abhayneilam · ‎03-30-2016

I am not outputting any thing in my XML,it is a normal code written to get the button on the dashboard that's it.

How do I integrate it in XML with javascript

abhayneilam · ‎03-30-2016

Thanks a lot !! I did it finally with HTML !!

srinivasup · ‎02-14-2019

can you send the entire code

lquinn · ‎03-30-2016

I am assuming this is an XML dashboard. There should be a button to convert this dashboard to HTML. Press the button then edit the source code of your dashboard. I have given you all the code that you will need above. There should be a HTML section and a javascript section as part of the HTML file.

abhayneilam · ‎03-30-2016

Yes, I can convert it in html, if I do that what to do next then ?

Dashboard with JavaScript on Button, running SPL

<panel>

  <html>
    <div>
      <input id="btn-submit" type="button" value="Click"/>
    </div>
  </html>

 </panel>

lquinn · ‎03-30-2016

Ok, so if you have it in HTML, you would just need to add a new dashboard row with a panel and a div for your results to your HTML, like this ...

<div id="row1" class="dashboard-row dashboard-row1">
    <div id="panel1" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">
            <div class="panel-element-row">
                <div id="element1" class="dashboard-element table" style="width: 100%">
                    <div class="panel-head">
                        <h3>My Results</h3>
                    </div>
                    <div class="panel-body"><div id="myresults"></div></div>
                </div>
            </div>
        </div>
    </div>
</div>

Then render the visualisation in javascript. Here is an example for a table ...

require([
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/simplexml/ready!"
 ], function(TableView) {

    new TableView({
        id: "myresults",  <------ This must match the ID of the div in your HTML
        managerid: "mysearch",   <------ This must match the ID of your search
        pageSize: "5",
        el: $("#myresults")
    }).render();

});

There are lots of examples for this at this link:
http://docs.splunk.com/Documentation/WebFramework

lquinn · ‎03-30-2016

If you didn't want this table to show until you have pressed the Ok button on the confirm box, you could hide the panel when the page loads, then set it to show when the user clicks ok. Look at the jquery hide and show methods.

lquinn · ‎03-30-2016

How are you currently outputting the results? A table? A chart? What is the xml that you have for this?

abhayneilam · ‎03-30-2016

I am not able to put my xml code here, this dialog box is not allowing me to write it fully. But yes I have the same code in XML what you could see in
https://answers.splunk.com/answers/378289/calling-java-script-from-dashboard.html

this link, same code in my XML . Please lemme know if I have to write something in the XML code also ??

How to execute a Splunk search in a dashboard on click of a button using JavaScript?

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life