Splunk Custom Modal View Creation Part 2 | Adding The Functionality

By |Published On: July 6th, 2015|

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:

Copy to Clipboard

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:

Copy to Clipboard

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

Copy to Clipboard

Finally, let’s build out the close function:

Copy to Clipboard

In the end you should have something like this:

Copy to Clipboard

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:

Copy to Clipboard

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:

Copy to Clipboard

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

Copy to Clipboard

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:

Copy to Clipboard

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.

About Hurricane Labs

Hurricane Labs is a dynamic Managed Services Provider that unlocks the potential of Splunk and security for diverse enterprises across the United States. With a dedicated, Splunk-focused team and an emphasis on humanity and collaboration, we provide the skills, resources, and results to help make our customers’ lives easier.

For more information, visit www.hurricanelabs.com and follow us on Twitter @hurricanelabs.