Splunk® Enterprise

Module System User Manual

Download manual as PDF

Splunk Enterprise version 6.x is no longer supported as of October 23, 2019. See the Splunk Software Support Policy for details. For information about upgrading to a supported version, see How to upgrade Splunk Enterprise.
This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
Download topic as PDF

Simple customizations

To use custom CSS styling
To use custom JavaScript


SplunkIcon.pngExample 2 and Example 3


One of the first things you might want to do is use one of the following mechanisms to change the look or behavior of an app:

  • Use custom CSS to change the look of your app.
  • Use application.js to add custom JavaScript and change your app behavior.

You might consider simple CSS or JavaScript changes instead of more involved mechanisms, if you need to:

  • Make changes to one point in your Splunk view.
  • Change the style or behavior of a specific module or modules within a Splunk view.
  • Make changes across an entire app. (This is not recommended.)

Note: It might be useful to recall from Getting started that default CSS files are located at $SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css and $SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins. For some modules distributed with Splunk, you can find their CSS files in the $SPLUNK_HOME/share/splunk/search_mrsparkle/modules directory for the module.

Because these kinds of customization should already be familiar to you and because minimal Module System knowledge is needed, these are the first examples presented.

Details

This recipe demonstrates simple customization using two examples. Example2 changes app appearance using CSS customization. Example3 changes app behavior by hooking in custom JavaScript. Both build on our basic CPU utilization app.

Using CSS styling, we enhance the appearance of the results table, applying color to the cell background and highlighting the active row:

Ex2 00.png
CSS styling requires providing a custom CSS file and specifying the filename in the view.

To show some action when a row is clicked, our custom JavaScript displays an alert showing the indexer stage of clicked row:

Ex3 00.png

All resources, including images, custom CSS, and custom JavaScript, are located in the $SPLUNK_HOME/etc/apps/Dev_tutorial/appserver/static directory.

It is useful to understand these simple customization techniques because you'll want to combine these with more advanced customizations you'll learn about to create increasingly sophisticated applications, targeted to your domain.

To use custom CSS styling

  1. Create your view specification file, Example2.xml, in the $SPLUNK_HOME/etc/apps/Dev_tutorial/default/data/ui/views directory.
  2. Specify the custom CSS file as a <view> tag parameter. The rest of the view specification is the same as Example1.xml.

    <view template="dashboard.html" stylesheet="example2Styles.css">

  3. Create your custom CSS file, example2Styles.css, in the $SPLUNK_HOME/etc/apps/Dev_tutorial/appserver/static directory. Our example changes the default cell background color and highlights a row on hover.

    table.simpleResultsTable tbody{

       background: #ebf2e6;
    

    } table.simpleResultsTable td{

       color: #669;
       border-top: 1px dashed #fff;
    

    } table.simpleResultsTable tbody tr:hover td{

       color: #339;
       background: #b3d09f;
    

    }

To use custom JavaScript

The application.js file is used, by convention, to override existing methods for a particular instance. If you want SplunkWeb to do something specific on a user action, such as a click, change, or mouse-over event, use application.js to override the default behavior, replacing the default action with your custom handler.

In Example3, the NullModule is a child of the SimpleResultsTable module. A NullModule, as you might expect, does nothing, but provides a container for custom module code. As such, application.js code can use NullModule as a convenient entry point into the view context.

  1. Create your view specification file, Example3.xml, in the $SPLUNK_HOME/etc/apps/Dev_tutorial/default/data/ui/views directory.
  2. Add NullModule as a SimpleResultsTable child module. The rest of the Example3 view specification is the same as Example2.

    <module name="SimpleResultsTable">

       <param name="drilldown">row</param>
       <param name="displayMenu">true</param>
       <module name="NullModule"></module>
    

    </module>

    The NullModule module executes code attached to it when it is called by the SimpleResultsTable module.

  3. Create the application.js file in the $SPLUNK_HOME/etc/apps/Dev_tutorial/appserver/static directory and add the following code.

    switch (Splunk.util.getCurrentView()) {

       case "Example3":
       if (Splunk.Module.NullModule) {
           Splunk.Module.NullModule =
               $.klass(Splunk.Module.NullModule, {
                   getModifiedContext: function() {
                   var context = this.getContext(),
                   click = context.getAll('click');
                   alert (click.value);
                   return context;
               }
           });
       }
       break;}
    

    In the code above, we ensure the code is executed only if the current view is Example3 and we are in the NullModule namespace. Use getCurrentView() to ensure you are operating on only the desired view.

    We use the JQuery.klass() utility to instantiation a NullModule class to override the getModifiedContext() method. All modules inherit from the AbstractModule base class.

    We get the click property from the NullModule context to display in an alert message.

    Tip: Alternatively, to the style of specific elements in a Splunk view, use the JQuery ready() method, getCurrentView(), and a selector to scope your changes to the specific elements, usually using the id attribute.

    if (Splunk.util.getCurrentView() == 'myview') {

       $(document).ready( function() {
           $('.SimpleResultsTable').parent().css('width', '100%');
       });}
    

Related recipes

Create a custom module shows the basics of creating a custom app, which you can enhance further by including CSS and application.js customizations.

Last modified on 06 July, 2015
PREVIOUS
Get the tutorial app
  NEXT
Create a custom module

This documentation applies to the following versions of Splunk® Enterprise: 6.0, 6.0.1, 6.0.2, 6.0.3, 6.0.4, 6.0.5, 6.0.6, 6.0.7, 6.0.8, 6.0.9, 6.0.10, 6.0.11, 6.0.12, 6.0.13, 6.0.14, 6.0.15, 6.1, 6.1.1, 6.1.2, 6.1.3, 6.1.4, 6.1.5, 6.1.6, 6.1.7, 6.1.8, 6.1.9, 6.1.10, 6.1.11, 6.1.12, 6.1.13, 6.1.14, 6.2.0, 6.2.1, 6.2.2, 6.2.3, 6.2.4, 6.2.5, 6.2.6, 6.2.7, 6.2.8, 6.2.9, 6.2.10, 6.2.11, 6.2.12, 6.2.13, 6.2.14, 6.2.15


Was this documentation topic helpful?

Enter your email address, and someone from the documentation team will respond to you:

Please provide your comments here. Ask a question or make a suggestion.

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters