top of page
  • Writer's pictureGabriel

Easy yet powerful submit buttons in your simple XML dashboards

Updated: Feb 28, 2022

There are a number of issues with Splunk’s simple XML forms submit button:

  • you can't have more than one

  • you can't move it

  • you can't hide it (for instance, so that it only appears when the right input is populated)

  • it won't do anything if you click it a second time without changing any input. Sometimes this is what you want

  • if you have inputs that are sanitised with some <change> action, this effectively sets the searchWhenChanged to true, even if you want the search to only happen when the submit button is pressed

People have been complaining a lot about this. For more details, please read the references.


All the solutions I’ve seen required coding and deploying some JavaScript specific to the dashboard you are developing. This implies special skills and privileges for the dashboard developer. In contrast my simple solution:

  • can be reused in any dashboard by any user

  • no need to deploy anything (past the initial setup)

  • no need for admin rights

  • no need for JS coding

Note: Technically (as with other solutions out there) the buttons we are introducing are not "submit" buttons as their purpose isn't to "submit all the tokens". So it's not the same thing, but that’s also why it's a lot more versatile.


How to use


Load up the javascript and CSS at the top of your form (also works for dashboards):

<form script="GV-Utils:submit_button.js" stylesheet="GV-Utils:submit_button.css">

Optionally you can make sure your fieldset doesn't have a regular submit button:

 <fieldset submitButton="false">

EITHER add the following input where you want your button:

<input type="link" id="submit_button">
  <choice value="submit">Do something!</choice>
</input>

Note: you can add a depends or rejects clause in the <input> tag.


OR add an HTML button in the middle of an HTML section:

<panel>
  <html>
    <div style="width:100%; padding: 10px 0; text-align: left; font-size: 20px; font-style: normal; font-weight: bold;">Please either <button type="button" id="submit_button2" class="btn">abort</button> or <button type="button" id="submit_button3" class="btn">commit</button>.
    </div>
  </html>
</panel>

You can add up to 20 submit buttons. The first one should have id submit_button, the second submit_button2, the 3rd one submit_button3, etc.


When a submit button is clicked, a corresponding token will be populated. The button with id submit_button will populate the submit_trigger token, submit_button2 will populate submit_trigger2, etc. Each time a button is clicked, a brand new random value is given to the corresponding token, which will trigger any search relying on this token—provided that all the other tokens it needs are populated.


Make sure the search you want to run when and only when the submit button is set has the following elements:

<search>
  <done>
    <unset token="submit_trigger"></unset>
  </done>
  <query>... | eval _trigger="$submit_trigger$" | fields - _trigger | ...</query>

The submit_trigger will only be set when the submit button is clicked, thereby triggering the search. It is set to something random, so it will always trigger the search even if the other inputs haven't changed. When the search is done, the token is unset, which means that if the user change any other inputs, the search won't be running again until the button is clicked deliberately.


You can use that mechanism to set all sorts of other tokens in the <done> section. I’ll post another article breaking down one of many use cases for this technique.


How to setup



Credits & References


I am not a JavaScript programmer. If I could see farther it’s because I climbed on the shoulders of giants:


765 views1 comment

Recent Posts

See All

Site Map

Use this page as a quick way to find which areas of this website have value for you. My apps ES Choreographer: manage ES correlation searches with peer reviews, simple TODO task system, and automated

1 Comment


Michael P
Michael P
May 15, 2023

<form id="myForm">

<label for="surveyDropdown">Select Survey:</label>

<select id="surveyDropdown">

<option value="survey1">Survey 1</option>

<option value="survey2">Survey 2</option>

<option value="survey3">Survey 3</option>

<!-- Add more options as needed -->

</select>

<button type="submit" onclick="runPlaybook()">Submit</button>

</form>


<script>

function runPlaybook() {

var survey = document.getElementById("surveyDropdown").value;

// Use JavaScript to construct the cURL command with the selected survey parameter

var curlCommand = "curl -X POST -H 'Content-Type: application/json' -d '{\"survey\": \"" + survey + "\"}' http://<ansible_endpoint>/run_playbook";

// Send the cURL command via AJAX request to invoke the Ansible playbook

$.ajax({

type: "POST",

url: "/path/to/curl/endpoint",

data: { curlCommand: curlCommand },

success: function(response) {

// Handle success response if needed

},

error: function(xhr, status, error) {

// Handle error response if needed

}

});

return false; // Prevent form submission

}

</script>


Like
Post: Blog2 Post
bottom of page