Dashboards & Visualizations

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

damiensurat
Contributor

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.

0 Karma
1 Solution

damiensurat
Contributor

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>

View solution in original post

0 Karma

damiensurat
Contributor

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>
0 Karma

darrenfuller
Contributor

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.

0 Karma

damiensurat
Contributor

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.

0 Karma

darrenfuller
Contributor

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
Contributor

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.

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...