5. Format search data and display it

In this step we'll take the data from the search and format it before we send it to the view for display.

If you don't reformat the data, it is sent in the format as specified by the "output_mode" property, which is "json" by default. However, our view expects a string. So, we'll override the formatData method to change the format of the search results from an array to a string that contains an HTML list.

  1. Let's change the search query to display more results. Open customview.js and replace the code with the following code, which includes an updated search query:
  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 by sourcetype"
        });
    
    });
  3. Save this file, refresh Splunk Web, then view the dashboard to see the unformatted data. As you can see, this is the data that is returned directly from splunkd in JSON format and is in need of some help:
  4. Unformatted search results

  5. Open demoview.js and replace the code with the following:
  6. /* demoview.js */
    
    define(function(require, exports, module){
        // Base class for custom views
        var SimpleSplunkView = require('splunkjs/mvc/simplesplunkview');
    
        // Require Underscore.js to work with a list of search results
        var _ = require("underscore");
    
        // 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 format your data in a specific way
            // Our view expects HTML, so reformat the results array accordingly
            formatData: function(data) {
                // Display the data object to the console
                console.log("The data object: ", data);
                var mydatastring = "";
    
                // Format each row of results as an HTML list
                _.each(data, function(row, index){
                    mydatastring = mydatastring + "<li><b>" + row[0] + "</b>:  " + row[1] + "</li>";
                });
    
                // Wrap the string with the unordered list tag
                mydatastring = "<ul>" + mydatastring + "</ul>";
                return mydatastring;
            },
    
            // Override this method to configure your view
            createView: function() {
                return this;
            },
    
            // Override this method to put the Splunk data into the view
            updateView: function(viz, data) {
                // Display the reformatted data object to the console
                console.log("HTML-formatted data: ", data);
                this.$el.html("Count by sourcetype:" + data);
            }
        });
    
        return DemoView;
    
    });

    The formatData method converts the data (an array) into a string (an HTML-formatted list), which is the format the view expects. To work with lists, we also imported the Underscore library.

  7. Save your changes.
  8. Refresh Splunk Web by opening the http://<localhost:port>/debug/refresh URL in your web browser and clicking Refresh.
  9. Navigate to the dashboard, http://<localhost:port>/app/customviewtutorial/custom_view, to see the formatted data:
  10. Formatted search results

Continue to 6. Add a third-party visualization.