2. Create a "hello, world!" view

This step shows how to create a basic view that displays "Hello, world!" in the HTML panel on the dashboard and in the developer web console. To do this, we'll create a JavaScript class called DemoView that inherits from the SimpleSplunkView base class.

Before we start, take a look at the SimpleSplunkView base class to get familiar with it—simplesplunkview.js is located in $SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/js/splunkjs/mvc/. You'll see several public methods that you can override as needed:

  • initialize: The constructor.
  • formatData: Formats results data from Splunk and returns a handle to the data.
  • formatResults: Same as formatData, except you can format the full set of data from the results model.
  • displayMessage: Lets you render messages in a custom way.
  • createView: Configures the custom vizualization and returns a handle to it.
  • updateView: Puts Splunk data (returned by the formatData method) into the view (returned by the createView method) and renders it.
  • clearView: Resets rendering.
  • render: Creates the initial view and draws it on the screen. On subsequent calls, runs a full update cycle by calling formatResults, formatData, then updateView.

The methods you'll typically need to override are formatData, createView, and updateView. All of the public methods, properties, and events of this class are described in more detail in the Splunk Web Framework Component Reference.

For this first simple example, we'll create a DemoView class that overrides the render method to display a "Hello, world!" message. Then, we'll use the Simple XML extension customview.js placeholder we created to instantiate the DemoView class in our Simple XML dashboard.

  1. Create the DemoView class—open demoview.js, paste the following code into it, then save it:
  2. /* 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",
    
            // Override the render function to make the view do something
            // In this example: print to the page and to the console
            render: function() {
    
                // Print to the page
                this.$el.html("Hello, world!");
    
                // Print to the console
                console.log("Hello, world!");
    
                return this;
            }
        });
        return DemoView;
    });

    Here's what this code does:

    • Loads the base class.
    • Declares our new class, demoview, inheriting from the SimpleSplunkView base class.
    • Overrides the render method to display a message on the page and in the console.
  3. Instantiate the DemoView class in the Simple XML extension—open customview.js, paste the following code into it, then save it:
  4. /* customview.js */
    
    require([
        "/static/app/customviewtutorial/demoview.js",
        "splunkjs/mvc/simplexml/ready!"
    ], function(DemoView) {
    
        // Create a custom view
        var customView = new DemoView({
            id: "mycustomview",
            el: $("#mycustomview")
        }).render();
    
    });

    Here's what this code does:

    • Loads the required SplunkJS Stack libraries and components, plus the demoview library we just created.
    • Instantiates a customView instance of our DemoView class. The only requirement is a unique ID value for the id property. The el property corresponds to the <div id="mycustomview"> tag location on the dashboard.

Let's take a look at the dashboard.

  1. Refresh Splunk Web to load the changes to the JavaScript files by opening the http://<localhost:port>/debug/refresh URL in your web browser and clicking Refresh.
  2. You'll need to do this each time you save changes to these JavaScript files.

  3. Open the developer console for your browser.
  4. Navigate to the dashboard, which should be http://<localhost:port>/app/customviewtutorial/custom_view. You should see something like this:
  5. Hello world

Continue to 3. Pass values to the template tag and class constructor.