topic Re: Is it possible to access values within HTML form objects rather than inputs? in Dashboards & Visualizations

Is it possible to access values within HTML form objects rather than inputs?

andrewtrobec — Mon, 17 Sep 2018 11:40:30 GMT

Hello,

I'm the process of designing a simple data entry form using Splunk, but I am worred that too many inputs (50+) will make the interface slow and unusable. As an alternative, I'm trying to use a simple HTML form and then extract the values when a checkbox value is selected. As a simple example, I have an HTML form that has two inputs: firstname and lastname

<row>
    <panel>
        <title>HTML Form</title>
        <html>
            <div>
                <form>
                    First name: &lt;br/&gt;
                    <input type="text" name="firstname"/>&lt;br/&gt;
                    Last name:&lt;br/&gt;
                    <input type="text" name="lastname"/>
                </form>
            </div>
        </html>
    </panel>
</row>

What I'd like to do is generate a result set based on those values by selecting a checkbox. I want to concatenate the values from all of the form fields and then assign it to a single input. Something along the lines of this:

<row>
    <panel>
        <input type="checkbox" token="tok_submit_values">
            <choice value="Submitted">Submit</choice>
            <change>
                <condition match="$tok_submit_values$"="Submitted">
                    <set token="tok_input_concatenation">form.firstname + form.lastname</set>
                </condition>
                <condition>
                    <unset token="tok_input_concatenation"></unset>
                </condition>
            </change>
        </input>
    </panel>
</row>

Once the value has been concatenated, I can use the makeresults command to format the data before writing it to index.

Is this possible? Any pointers would be greatly appreciated!

Best regards,

Andrew

Re: Is it possible to access values within HTML form objects rather than inputs?

kamlesh_vaghela — Mon, 17 Sep 2018 12:51:01 GMT

@andrewtrobec

HTML inputs and Splunk Dashboard Inputs are so different. You can not access HTML inputs by form.firstname. But you can access it using javascript and set Splunk tokens.

Steps:
1) Create a javascript file.
2) Create a function which can set/unset tok_input_concatenation token as per your requirements.
3) Call created function on click of submit button. For assigning onclick on submit I suggest jquery.

Below are some references for:

http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAE4M
http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW3

Re: Is it possible to access values within HTML form objects rather than inputs?

andrewtrobec — Mon, 17 Sep 2018 13:58:50 GMT

I've managed to lay the groundwork, but I cannot access the two form inputs: firstname and lastname. Here's what my script looks like:

require([
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/simplexml/ready!'
], function ($, mvc) {
        var tokens = mvc.Components.get("default");
        $('#buttonSummary').on("click", function (e){
                tokens.set("tok_concatenated_inputs", firstname + lastname);
        });
});

I'm still not sure how to access the two form fields as they are not regular tokens.

Re: Is it possible to access values within HTML form objects rather than inputs?

kamlesh_vaghela — Mon, 17 Sep 2018 14:18:42 GMT

Try this.

require([
         'jquery',
         'splunkjs/mvc',
         'splunkjs/mvc/simplexml/ready!'
 ], function ($, mvc) {
         var tokens = mvc.Components.get("default");
         $('#buttonSummary').on("click", function (e){
                var firstname = $("input[name=firstname]").val();
                var lastname = $("input[name=lastname]").val();
                 tokens.set("tok_concatenated_inputs", firstname + lastname);
         });
 });

Re: Is it possible to access values within HTML form objects rather than inputs?

niketn — Mon, 17 Sep 2018 15:10:46 GMT

@andrewtrobec you can use @jconger ' s blog for binding jQuery with HTML input. https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html

You can also refer to the following answer on similar lines where HTML date input is used with jQuery: https://answers.splunk.com/answers/627432/jquery-datepicker-in-splunk.html

Re: Is it possible to access values within HTML form objects rather than inputs?

andrewtrobec — Tue, 18 Sep 2018 05:56:53 GMT

Amazing! Thank you for the guidance.

Re: Is it possible to access values within HTML form objects rather than inputs?

swithinb — Wed, 18 Dec 2019 12:20:07 GMT

Hi @kamlesh_vaghela
I have an issue while building my custom app in splunk.

I have created a dashboard with a html having 2 form fields, name and id,
so on submit, How could i get these values and update a json file on backend in app/bin folder.

Do i need to specify an action tag in html or even if we use jquery how to get these values in python script which need to be executed on form submit.

Thanks in advance.

Re: Is it possible to access values within HTML form objects rather than inputs?

kamlesh_vaghela — Thu, 19 Dec 2019 04:53:30 GMT

@swithinb

You can create Custom endpoint for that. Pass you HTML elements values using javascript and which executes your code in bin folder.
Refer below link.

Custom Endpoints: Part 1 - Overview: https://vimeo.com/194918433

This video provides an overview of what we will be building in Splunk to set up custom endpoints.

And check Part 1 - 7 for more details.

Re: Is it possible to access values within HTML form objects rather than inputs?

swithinb — Tue, 31 Dec 2019 05:16:38 GMT

Thanks a lot @kamlesh_vaghela, this helped me sort out my issue.

Re: Is it possible to access values within HTML form objects rather than inputs?

kamlesh_vaghela — Tue, 31 Dec 2019 14:17:48 GMT

Glad to help you @swithinb

Happy Splunking