Splunk Custom Modal View Creation Part 3 | Concluding With The Final Touches

Originally, this dashboard I’m working on worked by using Splunk’s built-in, in-context drilldown functionality. It will only show once the $sourcetype$ token is given a value, but we removed that functionality so it never shows the panel.

What we want to do now is make that drilldown table appear in the modal window. We’re going to start by removing the following from our xml, as we simply won’t need it:

At this point your dashboard XML should look like the following:

Then, we’re going to replace all of this with JavaScript in our app.js and ModalView.js files.

Let’s start by going to our app.js file and defining our drilldown search. We want to first add reference to the SearchManager:

Then assign the SearchManager to a variable called detailSearch:

Now we will pass the search to our ModalView as a second parameter:

Since we are using a token of $sourcetype$ in the search, we have to pass a value to it in order for the search to function properly. In app.js add the following to the top under where we defined the master table:

Next, inside of the on click event, we will want to provide our $sourcetype$ token with the value of the sourcetype, which also happens to be the value of the modal title. So, we can just set it to the _title variable:

Your app.js file should look like this:

If you reload the dashboard you will see that our modal is still empty. This means we need to populate it with our visualization and search.

The first thing to do is to add a reference to a table element, since that will be the visualization we will be using in the modal window:

Next, add the following into the initialize() function in ModalView.js:

We will use this array to push our child views into it so we can later remove them when we close the modal window. In Backbone, you must handle the removal of all of your child views manually.

Add the following to the show() function in ModalView.js:

Finally, let’s handle the removal of our child views. In the close() function add the following:

We loop through all of the child views added and first unbind them and then remove them. Go ahead and save ModalView.js and reload your browser. You should now have a table loading in the modal window.

Congratulations, you now have a modal window with a search population in Splunk. As the modal window is a separate module from our app.js file, we can easily and quickly add new modal windows to our dashboard without have to write a ton of additional code, which is a pretty awesome benefit.