Splunk Custom Modal View Creation Part 2 | Adding The Functionality

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:

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:

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

Finally, let’s build out the close function:

In the end you should have something like this:

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:

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:

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

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:

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.