Step 3: Add a record containing the form data to the KV Store collection

In this step, we'll modify the layout of the form that collects customer information. Then, we'll use the Splunk SDK for JavaScript (which is already included in the Web Framework) to make the REST API calls to insert records into the KV Store collection we just created.

Edit the HTML dashboard file:

  1. In a text editor, open the customer_info_html.html file, which was created in $SPLUNK_HOME/etc/apps/kvstoretutorial/local/data/ui/html.
  2. We'll make some layout changes and other improvements to:
  3. Find the code between these tags:

    <a id="navSkip"></a>
    .
    .
    .
    <div class="footer"></div>
    

    Replace it with this:

    <a id="navSkip"></a>
    
    <div class="dashboard-body container-fluid main-section-body" data-role="main">
        <h3>Customer Info</h3>
    
        <form id="formCustomerInfo">
            <div class="fieldset">
                <div class="input input-text" id="input1">
                    <label>CustID</label>
                </div>
                <div class="input input-text" id="input2">
                    <label>CustName</label>
                </div>
                <br>
                <div class="input input-text" id="input3">
                    <label>CustStreet</label>
                </div>
                <div class="input input-text" id="input4">
                    <label>CustCity</label>
                </div>
                <div class="input input-text" id="input5">
                    <label>CustState</label>
                </div>
                <div class="input input-text" id="input6">
                    <label>CustZip</label>
                </div>
                <div class="form-submit" id="search_btn">
                    <button class="btn btn-primary submit">Submit</button>
                </div>
            </div>
    
            <div>
                <div class="input input-text" id="input7">
                    <label>Enter a Key ID from the table below</label>
                </div>
                <div><button id="deleteRecord">Delete Record</button></div>
            </div><br>
        </form>
    
        <div id="row1" class="dashboard-row dashboard-row1">
            <div id="panel1" class="dashboard-cell" style="width: 100%;">                
                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-head">
                            <h3>KV Store collection</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <div class="footer"></div>
    

    These changes include:

    • The <div class="dashboard-header clearfix"> tag was removed.
    • The fields are enclosed between form tags.
    • A break was added between the second and third form fields.
    • The input7 field was moved to a new section with a new Delete Record button.
    • The table style was changed slightly by removing the dashboard-panel clearfix style.
  4. Now, collect the form data and write it to the KV Store. First, create an instance of the Service class of the Splunk SDK for JavaScript.
  5. Find this code:

            // SUBMIT FORM DATA
    

    Above it, paste this code:

            // 
            // SERVICE OBJECT
            //
    
            // Create a service object using the Splunk SDK for JavaScript
            // to send REST requests
            var service = mvc.createService({ owner: "nobody" });
    
  6. Below this section is the function that submits the token values of the form fields when the Submit button is clicked. We'll use these token values to populate the KV Store collection as a single record containing the customer's name, ID, and address.
  7. Find this code:

            var submit = new SubmitButton({
                id: 'submit',
                el: $('#search_btn')
            }, {tokens: true}).render();
    
            submit.on("submit", function() {
                submitTokens();
            });
    

    Replace it with this code:

            var submit = new SubmitButton({
                id: 'submit',
                el: $('#search_btn')
            }, {tokens: true}).render();
    
            submit.on("submit", function() {
                submitTokens();
    
                // When the Submit button is clicked, get all the form fields by accessing token values
                var tokens = mvc.Components.get("default");
                var form_id = tokens.get("CustID");
                var form_name = tokens.get("CustName");
                var form_street = tokens.get("CustStreet");
                var form_city = tokens.get("CustCity");
                var form_state = tokens.get("CustState");
                var form_zip = tokens.get("CustZip");
                
                // Create a dictionary to store the field names and values
                var record = { 
                    "CustID": form_id, 
                    "CustName": form_name, 
                    "CustStreet": form_street,
                    "CustCity": form_city,
                    "CustState": form_state,
                    "CustZip": form_zip 
                }; 
    
                // Use the request method to send a REST POST request
                // to the storage/collections/data/{collection}/ endpoint
                service.request(
                    "storage/collections/data/mycollection/",
                    "POST",
                    null,
                    null,
                    JSON.stringify(record),
                    {"Content-Type": "application/json"},
                    null);
            });
    

    Here's what the code does:

    • A tokens variable accesses the "default" token model to get the form field values (for more, see Get and set token values directly).
    • A record is created with a dictionary of field names and the values from the form.
    • The splunkjs.request method of the Splunk SDK for JavaScript sends a POST request to the /storage/collections/data/{collection}/ REST endpoint to save the record to the "mycollection" KV Store collection.
  8. Save your changes, refresh the app's views (open http://<localhost:port>/debug/refresh in your web browser and click Refresh), then reload the dashboard (open http://<localhost:port>/app/kvstoretutorial/customer_info_html).
  9. With the developer console open in your web browser, test the form by filling out the Customer Info form and clicking Submit.
  10. A simple app that uses the KV Store

Continue to Step 4: Display the KV Store collection using a lookup.