Code for the KV Store tutorial

Here's the final version of the customer_info_html.html page.

    Note  This tutorial was created using Splunk Enterprise 7.1.0. The code below might vary from yours if you are using a different version.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Customer Info HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@A714A72717CE4C7CB28E95491287083B801B5C28545D16286D3C287B5D3D9624/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/splunkjs-dashboard.css" />
 
 
        <meta name="referrer" content="never" />
        <meta name="referrer" content="no-referrer" />
   
          <script>
                window._splunk_metrics_events = {
                   push : function() {},
                   active: false,
                   }
          </script>
    </head>
<body class="simplexml preload locale-en" data-splunk-version="7.1.0" data-splunk-product="enterprise">
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<header>
    <a aria-label="Screen reader users, click here to skip the navigation bar" class="navSkip" href="#navSkip" tabIndex="1">Skip Navigation &gt;</a>
    <div class="header splunk-header">
            <div id="placeholder-splunk-bar">
                <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
            </div>
                <div id="placeholder-app-bar"></div>
    </div>
    <a id="navSkip"></a>
</header>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
 
        <h3>Customer Info HTML</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 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>
        <br>
 
    <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>
 

 
<!--
END LAYOUT
-->
 
<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/simplexml/index.js"></script>
<script type="text/javascript">
// <![CDATA[
// <![CDATA[
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.
 
require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/layoutview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simplexml/element/visualization",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simplexml/searcheventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/linklist",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/tokenforwarder"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        LayoutView,
        Dashboard,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        VisualizationElement,
        FormUtils,
        EventHandler,
        SearchEventHandler,
        DropdownInput,
        RadioGroupInput,
        LinkListInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel
 
        // Add comma-separated parameter names here, for example:
        // ...UrlTokenModel,
        // TokenForwarder
        ) {
 
        var pageLoading = true;
 
 
        //
        // TOKENS
        //
 
        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});
 
        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });
 
        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());
 
        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }
 
        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }
 
        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }
 
 
 
        //
        // SEARCH MANAGERS
        //
 
       
var search1 = new SearchManager({
            "id": "search1",
            "status_buckets": 0,
            "search": " | inputlookup kvstore_lookup | eval  KeyID = _key | table KeyID, CustID, CustName, CustStreet, CustCity, CustState, CustZip",
            "sample_ratio": null,
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-24h@h",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true});
 
 
                                //
        // SPLUNK LAYOUT
        //
 
        $('header').remove();
        new LayoutView({"hideSplunkBar": false, "hideAppBar": false, "hideChrome": false})
            .render()
            .getContainerElement()
            .appendChild($('.dashboard-body')[0]);
 
    
       
        //
        // DASHBOARD EDITOR
        //
 
        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body'),
            showTitle: true,
            editable: true
        }, {tokens: true}).render();
 
 
        //
        // VIEWS: VISUALIZATION ELEMENTS
        //
 
        var element1 = new TableElement({
            "id": "element1",
            "drilldown": "none",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();
 
 
        //
        // VIEWS: FORM INPUTS
        //
 
        var input1 = new TextInput({
            "id": "input1",
            "value": "$form.CustID$",
            "el": $('#input1')
        }, {tokens: true}).render();
 
        input1.on("change", function(newValue) {
            FormUtils.handleValueChange(input1);
        });
       
        var input2 = new TextInput({
            "id": "input2",
            "value": "$form.CustName$",
            "el": $('#input2')
        }, {tokens: true}).render();
 
        input2.on("change", function(newValue) {
            FormUtils.handleValueChange(input2);
        });
       
        var input3 = new TextInput({
            "id": "input3",
            "value": "$form.CustStreet$",
            "el": $('#input3')
        }, {tokens: true}).render();
 
        input3.on("change", function(newValue) {
            FormUtils.handleValueChange(input3);
        });
       
        var input4 = new TextInput({
            "id": "input4",
            "value": "$form.CustCity$",
            "el": $('#input4')
        }, {tokens: true}).render();
 
        input4.on("change", function(newValue) {
            FormUtils.handleValueChange(input4);
        });
       
        var input5 = new TextInput({
            "id": "input5",
            "value": "$form.CustState$",
            "el": $('#input5')
        }, {tokens: true}).render();
 
        input5.on("change", function(newValue) {
            FormUtils.handleValueChange(input5);
        });
       
        var input6 = new TextInput({
            "id": "input6",
            "value": "$form.CustZip$",
            "el": $('#input6')
        }, {tokens: true}).render();
 
        input6.on("change", function(newValue) {
            FormUtils.handleValueChange(input6);
        });
       
        var input7 = new TextInput({
            "id": "input7",
            "value": "$form.KeyID$",
            "el": $('#input7')
        }, {tokens: true}).render();
 
        input7.on("change", function(newValue) {
            FormUtils.handleValueChange(input7);
        });
       
                                //
        // SERVICE OBJECT
        //
 
        // Create a service object using the Splunk SDK for JavaScript
        // to send REST requests
        var service = mvc.createService({ owner: "nobody" });

		// 
        // DELETE BUTTON
        //

        // Call this function when the Delete Record button is clicked
        $("#deleteRecord").click(function() {
            // Get the value of the key ID field
            var tokens = mvc.Components.get("default");
            var form_keyid = tokens.get("KeyID");

            // Delete the record that corresponds to the key ID using
            // the del method to send a DELETE request
            // to the storage/collections/data/{collection}/ endpoint
            service.del("storage/collections/data/mycollection/" + encodeURIComponent(form_keyid))
                .done(function() { 
                    // Run the search again to update the table
                    search1.startSearch(); 
                });
            return false;
        });
 
        //
        // SUBMIT FORM DATA
        //
 
        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)
                    .done(function() { 
                         // Run the search again to update the table
                        search1.startSearch();

                        // Clear the form fields 
                        $("#formCustomerInfo input[type=text]").val(""); 
               });      
		});
 
        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }
 
        if (!_.isEmpty(urlTokenModel.toJSON())){
            submitTokens();
        }
 
 
        //
        // DASHBOARD READY
        //
 
        DashboardController.ready();
        pageLoading = false;
 
    }
);
// ]]>
</script>