4. Add a search to the view and display data from it

This step shows one of the main features of the SimpleSplunkView base class—built-in integration with search managers. We'll add a search and redefine the custom view to display the results (a stats count value) on the page. We'll also override the createView and updateView methods of the base class, which you must override to work with a search:

  • The createView method configures your view.
  • The updateView method, which runs automatically whenever the search changes, takes the data from your search and displays it in the view.

Let's add a search manager to the extension.

  1. Open customview.js and replace the code with the following, which now includes a search manager. The custom view instance also includes a managerid property, binding the view to the new search, just as built-in views behave.
  2. /* customview.js */
    
    require([
        "/static/app/customviewtutorial/demoview.js",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/simplexml/ready!"
    ], function(DemoView, SearchManager) {
    
        // Create a custom view
        var customView = new DemoView({
            id: "mycustomview",
            managerid: "mysearch",
            el: $("#mycustomview")
        }).render();
    
        var mysearch = new SearchManager({
            id: "mysearch",
            preview: true,
            cache: true,
            search: "index=_internal | head 1000 | stats count"
        });
    
    });
  3. Open demoview.js and replace the code with the following:
  4. /* demoview.js */
    
    define(function(require, exports, module){
        // Base class for custom views
        var SimpleSplunkView = require('splunkjs/mvc/simplesplunkview');
    
        // Define the custom view class
        var DemoView = SimpleSplunkView.extend({
            className: "demoview",
    
            // Change the value of the "data" property
            options: {
                data: "results"
            },
    
            // Override this method to configure your view
            // This function must return a handle to the view, which is then passed
            // to the updateView method as the first argument. Because there is no
            // visualization, just return 'this'
            createView: function() {
                return this;
            },
    
            // Override this method to put the Splunk data into the view
            updateView: function(viz, data) {
                // Print the data object to the console
                console.log("The data object: ", data);
                
                var myResults = data[0];  // Sets this to the first (and only) row
                this.$el.html("The count of search results: <b>" + myResults + "</b>");
            }
        });
    
        return DemoView;
    
    });

    Here's what this code does:

    • Sets the data property in the options section. (The default value is "preview".)
    • Overrides the createView method to take advantage of the base class integration with our search. This method only returns a handle to the view object. Because we aren't changing the data, we don't add anything else to this method.
    • Overrides the updateView method to display the results of the search. This method takes the results of the search (the data argument) and displays it in our view (the viz argument). Our search returns a single count, so retrieve the first row of data and display that on the page. The data object is printed to the console for you to explore.
  5. Save your changes.
  6. Refresh Splunk Web by opening the http://<localhost:port>/debug/refresh URL in your web browser and clicking Refresh.
  7. Navigate to the dashboard, http://<localhost:port>/app/customviewtutorial/custom_view. You should see the search results displayed on the page (and in the console):
  8. Search results

Continue to 5. Format search data and display it.