Step 5: Delete records from the KV Store collection

In this step, we'll add the ability to delete records from our KV Store collection by making use of the Delete Record button we added to the form in Step 3: Add a record containing the form data to the KV Store collection.

To delete a record, you need to know the record's key ID, which is the value of the _key field. The lookup definition includes this field in the fields_list so that the inputlookup command can include this field in the search and then display the value in the search results table.

  1. By default, clicking the key ID in the table redirects to a search page. So, to make it easier to copy the key ID from the table, disable the drilldown functionality.
  2. Find the code for the table definition:

            var element1 = new TableElement({
                "id": "element1",
                "drilldown": "row",
                "rowNumbers": "undefined",
                "wrap": "undefined",
                "managerid": "search1",
                "el": $('#element1')
            }, {tokens: true, tokenNamespace: "submitted"}).render();

    Replace the drilldown property with this code:

                "drilldown": "none",

    Now you can easily copy the key ID from the table and paste the value into the key ID text input.

  3. Create a function that runs when the Delete Record button is clicked. You can add this function anywhere, so let's add it above the Submit Form Data section.
  4. Find this code:

            // 
            // SUBMIT FORM DATA
            //
    

    Paste this code above it:

            // 
            // 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;
            }); 
    

    Here's what this code does:

    • Retrieves the value of the key ID text input using the token value.
    • The splunkjs.del method of the Splunk SDK for JavaScript sends a DELETE request to the /storage/collections/data/{collection}/ REST endpoint to delete the record from the "mycollection" KV Store collection.
    • Runs the search again to get the current contents of the KV Store collection.
  5. 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).
  6. Test the form. Fill out the Customer Info form and click Submit, copy and paste the key ID value for the new record into the Enter a Key ID from the table below field, then click Delete Record.

The Customer Info form works, but there are a few improvements to make, such as populating the KV Store collection table when the page is loaded, updating the table after add and delete operations, and clearing input fields after clicking the Submit button.

  1. The search doesn't run automatically when the page loads because the search manager is using the "submitted" token model. In other words, the search currently runs when the Submit button is clicked, not when the page is loaded. Let's change the search manager to use the "default" token model instead so that it runs when the page is loaded.
  2. Find this code for the search manager:

            var search1 = new SearchManager({
                "id": "search1",
                "cancelOnUnload": true,
                "latest_time": "$latest$",
                "search": " | inputlookup kvstore_lookup | eval  KeyID = _key | table KeyID, CustID, CustName, CustStreet, CustCity, CustState, CustZip",
                "earliest_time": "0",
                "status_buckets": 0,
                "app": utils.getCurrentApp(),
                "auto_cancel": 90,
                "preview": true,
                "runWhenTimeIsUndefined": false
            }, {tokens: true, tokenNamespace: "submitted"});
    
    

    Change the last line to this:

            }, {tokens: true});
    
    
  3. Update the submit function to manually run the search when the user submits the form, because this no longer happens automatically. Also, let's add code to clear the form fields afterwards.
  4. Find this code:

                service.request(
                    "storage/collections/data/mycollection/",
                    "POST",
                    null,
                    null,
                    JSON.stringify(record),
                    {"Content-Type": "application/json"},
                    null);
    

    Replace it with this code:

                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(""); 
                        });
    
  5. 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).
  6. Test the form. Now the form should:
    • Display the contents of the KV Store collection when the page is loaded.
    • Write form data to the KV Store collection when the Submit button is clicked.
    • Delete a record for a specified key ID when the Delete Record is clicked.
    • Update the KV Store collection table and clear form fields when changes are made.

To see the final HTML page, see Code for the KV Store tutorial.