Solved: Re: How to use the JavaScript to send requests to ...

quentin_young · ‎11-30-2023

I customize a dashboard page and I put a submit button on it.How can I use the Javascript monitor the button's click to send a request to Splunk and have Splunk execuse a SPL?

This is my Js code:

require([
	"jquery",
], function ($) {
	$(document).on('click', '#btn_submit',
		function () {
			setTimeout(function time() {
				var temp_a = document.getElementById('temp_a').value
				var temp_b = document.getElementById('temp_b').value
			},
				100);
		});
});

and the dashboard source code is:

<dashboard script="test.js">
    <label>test_js_action</label>
    <row>
        <panel>
            <html>
                <div>
                    <button id="btn_submit">submit</button>
                </div>
            </html>
        </panel>
    </row>
</dashboard>

By the way, I saw a sample using the splunkjs/mvc to send request ,but I cant't get whole code. only know the Js head is:

require([
	"jquery",
	"splunkjs/mvc",
	"splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {

Thank you very much if you could provide a solution.🌹

kamlesh_vaghela · ‎11-30-2023

@quentin_young

Sharing my sample code. please check the console for results.

test_js_action.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    "splunkjs/mvc/searchmanager",
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, SearchManager) {

    var mySearch = new SearchManager({
        id: "mysearch",
        autostart: "false",
        search: '| makeresults | eval test = "This is test" ',
        preview: false,
    }, { tokens: true, tokenNamespace: "submitted" });

    var mySearchResults = mySearch.data("results");
    mySearchResults.on("data", function () {
        resultArray = mySearchResults.data().rows;
        console.log("My Data", resultArray);
    });

    $(document).ready(function () {
        $("#btn_submit").on("click", function () {
            // Capture value of the Text Area
            console.log("button clicked");
            mySearch.startSearch();
        });
    });
});

XML

<dashboard version="1.1" script="test_js_action.js">
  <label>test_js_action</label>
  <row>
    <panel>
      <html>
                <div>
                    <button id="btn_submit">submit</button>
                </div>
            </html>
    </panel>
  </row>
</dashboard>

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

kamlesh_vaghela · ‎11-30-2023

@quentin_young

Sharing my sample code. please check the console for results.

test_js_action.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    "splunkjs/mvc/searchmanager",
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, SearchManager) {

    var mySearch = new SearchManager({
        id: "mysearch",
        autostart: "false",
        search: '| makeresults | eval test = "This is test" ',
        preview: false,
    }, { tokens: true, tokenNamespace: "submitted" });

    var mySearchResults = mySearch.data("results");
    mySearchResults.on("data", function () {
        resultArray = mySearchResults.data().rows;
        console.log("My Data", resultArray);
    });

    $(document).ready(function () {
        $("#btn_submit").on("click", function () {
            // Capture value of the Text Area
            console.log("button clicked");
            mySearch.startSearch();
        });
    });
});

XML

<dashboard version="1.1" script="test_js_action.js">
  <label>test_js_action</label>
  <row>
    <panel>
      <html>
                <div>
                    <button id="btn_submit">submit</button>
                </div>
            </html>
    </panel>
  </row>
</dashboard>

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

quentin_young · ‎12-05-2023

Your reply has solved my problem. Thank you very much. Also, there is a small request. Could you provide me with some relevant documents on using JavaScript in Splunk. Thank you again.

kamlesh_vaghela · ‎12-05-2023

@quentin_young

Use this link for Splunk Web Framework Component Reference.

https://docs.splunk.com/DocumentationStatic/WebFramework/1.0/

JQuery: https://www.w3schools.com/jquery/default.asp

Splunk UI Toolkit: https://splunkui.splunk.com/home

Integrating jQuery DataTables Into Splunk:

https://hurricanelabs.com/splunk-tutorials/integrating-jquery-datatables-into-splunk-tutorial-part-1...

and so on.

Happy Learning

if you face any issues, just let us know.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

quentin_young · ‎12-04-2023

Thank you very much for your response,I will try it tomorrow.

How to use the JavaScript to send requests to Splunk and have Splunk execuse SPL?

Analytics Workspace

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

From Data to Insight: Announcing the Winners of the Splunk Dashboard Contest

Splunk Developers: Construct Your Future at the .conf26 Builder Bar

Quick connection discovery mode for forwarders

Join the Conversation

How to use the JavaScript to send requests to Splunk and have Splunk execuse SPL?

Analytics Workspace

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

From Data to Insight: Announcing the Winners of the Splunk Dashboard Contest

Splunk Developers: Construct Your Future at the .conf26 Builder Bar

Quick connection discovery mode for forwarders