How to use JavaScript or Cookies to capture values from input fields in a simple xml dashboard?

[damiensurat]

I could really use some Splunk expertise. I've been asked to populate input fields in our Splunk dashboards / forms based on the information last entered by a user using cookies. Admittedly, I haven't done much in the area of web development in Splunk, nor am I and expert with JavaScript. I have tried to google admin my way through this challenge, but I can't seem to find anything on the internet which would guide me through this task with relative ease. Would anyone know how I could capture data entered by a user from a form and auto populate the fields based on their previous entries the next time the user opens the form leveraging cookies/JS? Oh and the forms are in simple xml. Thanks.

[damiensurat · Accepted solution]

Had a Eureka moment yesterday and was able to figure out how to do it... Granted this has only been tested with one text box input and leveraging the splunk web framework. Please NOTE that this requires that you set a default value for the text box via the Edit Panels option....

tokGetSetCookie.js:

require([
        "splunkjs/mvc",
        "jquery",
        "splunkjs/mvc/simplexml/ready!",
        ],
        function(mvc){
                var defaultTokenModel = splunkjs.mvc.Components.get("default");
                var token_def = defaultTokenModel.get("field1");
                checkCookie(token_def);
                defaultTokenModel.on("change:field1", function(newTokenName, value, options) {
                        var token_def = defaultTokenModel.get("field1");
                        defaultTokenModel.set('form:field1',token_def);
                        setCookie("field1", token_def, 365);
                        checkCookie(token_def);


        })


        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }


        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }

                        return "";
        }



        function checkCookie(checkTokField) {
                var tok_field1 = getCookie("field1");
                if (tok_field1 != "") {
                        var field2TokSet = mvc.Components.get('field2');
                        field2TokSet.settings.set("default", tok_field1);
                        var field1TokSet = mvc.Components.get('field1');
                        field1TokSet.settings.set("default", tok_field1);
                } else {
                        tok_field1 = checkTokField;
                        if (tok_field1 != "" && tok_field1 != null) {
                                setCookie("field1", tok_field1, 365);
                        }
                }
        }
});

And the dashboard XML:

<form script="tokGetSetCookie.js:" stylesheet="dashboard.css">
  <label>Populate Text Box Filter using JavaScript and Cookies</label>
  <description>This Dashboard shows how you can leverage cookies and java script to populate text box inputs (filters) on a splunk dashboard based on last user entry.</description>
  <fieldset submitButton="true" autoRun="true">
    <input type="text" token="field1" id="field1" searchWhenChanged="true">
      <label>Update / Add a new Cookie Entry</label>
      <default>do_not_delete</default>
    </input>
    <input type="text" token="field2" id="field2" searchWhenChanged="true">
      <label>Results Of Info Saved in Cookie</label>
      <default>do_not_delete</default>
    </input>
  </fieldset>
</form>

[darrenfuller]

So couldn't you add the user name to that lookup? That way the lookup will have one line for each user. The lookup acts as your cookies.

[damiensurat]

Funny you should point that out and I wish it were that simple. Before researching cookies, I had made the same suggestion to the end users, but they would like to see the dashboard auto-populate without having to make a selection from a user field.

[darrenfuller]

Perhaps use a lookup....

Dashboard writes the tokens to lookup via a hidden panel.
Pull the values from the lookup to set as default values

.d

[damiensurat]

Hi Darren, Thanks for the suggestion, but this will not work for my use case. I really need to be able to populate values based on the each of the individual users accessing the form, and not just the last values entered in general by anyone accessing the form. These should auto populate when the user returns to the page.