Splunk Custom Modal View Creation Part 2 | Adding The Functionality

In Part 1 of this tutorial, Ian Gillespie walked you through how to get started and on your way to building out a modal view in Splunk. Part 2 of the tutorial will take the next step in continuing to build out the modal view by adding more functionality to the modal window.



In Part 1 of this tutorial, I walked you through how to get started and on your way to building out a modal view in Splunk. Part 2 of the tutorial will take the next step in continuing to build out the modal view by adding more functionality to the modal window.

Watch and learn below with the "Continue Building Out the Modal View in Splunk" Screencast, and/or read on for more.

Show the Modal

Passing values to the console isn’t very exciting. So now, let’s actually show the modal. We will first create a template for our modal. Above the definition of our modal view var ModalView = Backbone.View.extend({ we will add:

var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
                "<div class=\"modal-header\"><h3><%- title %></h3><button class=\"close\">Close</button></div>" +
                "<div class=\"modal-body\"></div>" +
                "<div class=\"modal-footer\"></div>" +
                "</div>" +
                "<div class=\"modal-backdrop\"></div>";

render: function() {
     /* Define the data object where we specifically set 
     the title value here it is what we pass into the new instance of 
     the this view in app.js
     */
     var data = { title : this.options.title }
     //take our data object and pass it to our template
     this.$el.html(this.template(data));
     return this;
},

There are more elegant solutions to creating a template, but for now, this will do. Notice the <%- title %> variable. This is using an Underscore variable to pass the title value to our template. You will see how this works shortly. Inside of the initialize method add: this.template = _.template(modalTemplate);

And then, in the render function, add:

render: function() {
     /* Define the data object where we specifically set&nbsp;
     the title value here it is what we pass into the new instance of 
     the this view in app.js
     */
     var data = { title : this.options.title }
     //take our data object and pass it to our template
     this.$el.html(this.template(data));
     return this;
},

Now, let's define our show function. This will be used when we actually show the modal:

show: function() {
            //append the modal to the document.body and call this view’s
            //render function
            $(document.body).append(this.render().el);
        },

Finally, let’s build out the close function:

close: function() {
            this.unbind();
            this.remove();
        }

    });

    return ModalView;

In the end you should have something like this:

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc/searchmanager'
    ], function(_, Backbone, $, SearchManager) {

    var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
                "<div class=\"modal-header\"><h3><%- title %></h3><button 
                   class=\"close\">Close</button></div>" +
                "<div class=\"modal-body\"></div>" +
                "<div class=\"modal-footer\"></div>" +
                "</div>" +
                "<div class=\"modal-backdrop\"></div>";

    var ModalView = Backbone.View.extend({
 
        defaults: {
            title: 'Not Set'
        },

        initialize: function(options) {
            this.options = options;
            this.options = _.extend({}, this.defaults, this.options);
            this.template = _.template(modalTemplate);
            console.log('Hello from Modal View: ' + this.options.title);
        },

        render: function() {
            var data = { title : this.options.title };
            this.$el.html(this.template(data));
            return this;
        },

        show: function() {
            $(document.body).append(this.render().el);
        },

        close: function() {
            this.unbind();
            this.remove();
        }

    });

    return ModalView;
});

Save the ModalView.js file and now we’re going to make some modifications to the app.js file.

Adding a click event to our ‘master’ table

Currently, our app.js file looks like this:

require([
    'underscore',
    'backbone',
    'splunkjs/mvc',
    '../app/Splunk-Modal-Window/components/ModalView',
    'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc, ModalView) {

    var master = mvc.Components.get('master');
    var modal = new ModalView({ title : 'An Amazing Modal Title' });

});

We want to pass the sourcetype value from the master table as the header of our modal window. So, to do this we will set up a click event on the table. Below where we created our modal variable, add the following:

master.on("click", function(e) {
		e.preventDefault();
        if (e.field === "sourcetype") {
            e.preventDefault();
            //pass the value of the item we clicked on to the title variable
            var _title = e.data['click.value'];
            var modal = new ModalView({ title : _title });
            modal.show();
        }
    });

Next, remove the original modal variable above the on click function, so now your app.js should look like:

require([
    'underscore',
    'backbone',
    'splunkjs/mvc',
    '../app/Splunk-Modal-Window/components/ModalView',
    'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc, ModalView) {

    var master = mvc.Components.get('master');

    master.on("click", function(e) {
		 e.preventDefault();
        if (e.field === "sourcetype") {
            e.preventDefault();
            //pass the value of the item we clicked on to the title variable
            var _title = e.data['click.value'];
            var modal = new ModalView({ title : _title });
            modal.show();
        }
    });

});

Save app.js and reload your dashboard. Click on one of the sourcetypes in the master table and your modal window should appear:

Notice how it is automatically passing the sourcetype value to the title? Nice.

One problem though, it doesn’t close. Let’s handle that next by adding our close events. In ModalView.js add the following right below the initialize function:

events: {
            //clicking on a button with a class of close calls the close function 'click .close': 'close', 
            //clicking on the modal backdrop calls the close function 'click .modal-backdrop': 'close',
        },

Save ModalView.js and reload the dashboard. You should now be able to close the modal window. The next, and final, portion of this tutorial will wrap things up with populating our modal window with a new search visualization.




Close off Canvas Menu