Dashboards & Visualizations

How do I reset form input fields to their default value on-click of a button on a Splunk 6.3.1 HTML dashboard?

lyndac
Contributor

I am creating a form (Simple XML converted to HTML) in Splunk 6.3.1. The form contains several form inputs, including drop-down, checkbox group, text, and radio button. Since there are several inputs, I want to give the user a way to reset all of the inputs to their default values. I have added a "Reset" button to my form and given it an "on" submit function in javascript. (see code below). In the function, I call defaultTokenModel.clear(). This does clear all the tokens, but leaves all the inputs in a state where there is no default selection. How can I make all the inputs go back to their default values?

The code below shows a drop-down with choices of =, !=, <, >. The default value when the form is loaded is =. If I press my reset button (which calls defaultTokenModel.clear()), the drop-down goes to a state where nothing is selected. I want to make it show the default value.

var input24 = new DropdownInput({
    "id": "input24",
    "choices": [
         {"value": "=", "label": "="},
         {"value": "!=", "label": "!="},
         {"value": ">", "label": ">"},
         {"value": "<", "label": "<"},
    "default": "=",
    "searchWhenChanged": false,
    "showClearButton":true,
    "value": "$op_tok$",
    "el": $('#input24')
}), {tokens: true}).render();

    var resetBtn = new SubmitButton({
        id: 'reset',
      text: 'Reset',
        el: $('#reset_btn')
    }, {tokens: true}).render();

    resetBtn.on("submit", function() {
        submittedTokenModel.clear();
        defaultTokenModel.clear();
    });

wkupersa
Path Finder

any way to do this in simple XML?

0 Karma

niketn
Legend

You can use <unset> token to unset the tokens (including form tokens). Each token would need one <unset> node. However, you can do so by using one of Splunk's inputs if you do not want to use JavaScript. If you need a Button to reset the tokens, you would need to code Button Click handler through JavaScript.

http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#unset

@wkupersa, if you face any issue while implementing unset token block using Simple XML, I would request you to post a new question with the required details specific to your use case and community members would be able to assist!

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

wkupersa
Path Finder

Thanks! That is what I arrived at. I found this example to include the button handler in the simple XML dashboard. https://answers.splunk.com/answers/581652/how-can-i-create-a-button-switcher.html

0 Karma

niketn
Legend

@wkupersa, that is one of my older posts controlling tokens through Button click via JavaScript. If you found it useful do up vote 🙂

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

wkupersa
Path Finder

Why so it is! You are everywhere! upvoted.

0 Karma

spammenot66
Contributor

how about putting a link on your dashboard pointing to same dashboard. This will force it to reload everything with default setting. Don't forget to replace {dashboard_filename} with the your actual dashboard file name/URL.

<html>
       <a href="{dashboard_filename}" class="reset_btn">Reset Dashboard</a>
       <style>

          .reset_btn{

              border-radius: 5px;
              font-size: 12px; 

              font-family:"Roboto","Droid","Helvetica Neue",Helvetica,Arial,sans-serif;
              text-decoration: none;
              background-color: #EEEEEE;
              color: #333333;
              padding: 6px 8px 6px 8px;
              border-top: 1px solid #CCCCCC;
              border-right: 1px solid #333333;
              border-bottom: 1px solid #333333;
              border-left: 1px solid #CCCCCC;
            }

      </style>

     </html>
0 Karma

Dawson014
Path Finder

I downvoted this post because answer is not convenient

0 Karma

sundareshr
Legend

Try this

resetBtn.on("submit", function() {
    defaultTokenModel.set(urlTokenModel.toJSON());
    console.log(urlTokenModel.toJSON());
     });
0 Karma

Dawson014
Path Finder

I downvoted this post because this does not work

0 Karma

lyndac
Contributor

That doesn't seem to have any effect. The output was:

Object { form.timer_tok.earliest: "-24h@h", form.timer_tok.latest: "now", earliest: "0", latest: ""}

0 Karma
Get Updates on the Splunk Community!

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...