Splunk Custom Modal View Creation Part 2 | Adding The Functionality
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:
There are more elegant solutions to creating a template, but for now, this will do. Notice the 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);
variable. This is using anAnd 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.
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.
