
Customize event display
There are several ways you can customize how events appear and behave in a view:
- Change formatting and add icons or decorations to the text
- Use JavaScript to change behavior of displayed events
- Use CSS to change the presentation
- Use HTML to change the structure
For example, use custom event renderers to flag all compliance events as NOT OK and display a red exclamation point next to them.
If you're not familiar with event types, you can read about them in "About event types" in the Knowledge Manager Manual.
Configuration
This section shows you several ways to customize the appearance of events.
1. Create an event type that includes the data to which you want to apply a custom renderer. For information on building event types, see "Define and maintain event types in Splunk Web" in the Knowledge Manager Manual.
Place the event type in the app directory in which you are working:$SPLUNK_HOME/etc/apps/<app_name>/local/eventtypes.conf2. Add a mapping to
event_renderers.conf
, located here: $SPLUNK_HOME/etc/apps/<app_name>/local/event_renderers.conf
3. Add custom CSS, HTML or JavaScript to your app to determine the presentation, structure or behavior of events.
Place CSS and JavaScript here:
$SPLUNK_HOME/etc/apps/<app_name>/appserver/static
Place HTML here:
$SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers/
event_renderers.conf
Add an event_renderers.conf
file to the following location to link your HTML template to the event type you want to style:
$SPLUNK_HOME/etc/apps/<app_name>/local/event_renderers.conf
Here's an example event_renderers.conf
file that creates three different event renderers.
[event_renderer_1] eventtype = hawaiian_type priority = 1 css_class = EventRenderer1 [event_renderer_2] eventtype = french_food_type priority = 1 template = event_renderer2.html css_class = EventRenderer2 [event_renderer_3] eventtype = japan_type priority = 1 css_class = EventRenderer3
To write your own event renderers, add stanzas to event_renderers.con
:
Name | Description |
---|---|
[<stanza_name>] |
Unique name for the stanza, which can be anything you want. |
eventtype = eventtype |
Specify the event type name from eventtypes.conf .
|
template = valid html |
Write the template and place it into the app's event_renderers directory:
( |
priority = positive integer |
Set the priority for this event renderer to show on this event type.
An event can have multiple event types, use the priority key to control load ordering. Highest number takes precedence. The default renderer has a priority of 100. |
css_class = CSS class name |
CSS class name suffix to apply to the parent event element class attribute. This can be any valid css class value.
The value is appended to a standard suffix string of You can externalize css style rules for this in:
For example, to make the text red add the following to your app's
|
Add custom HTML
Add custom HTML to set up a new event renderer -- specifically, to change the order and structure of events displayed in a view. Add your HTML file to the following directory:
$SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers.
Make sure you reference your HTML file by name in event_renderers.conf
, with the template
attribute.
The custom HTML you build inherits from the default template. The default template for displaying search results is located here:
$SPLUNK_HOME/share/splunk/search_mrsparkle/modules/results/EventsViewer_default_renderer.html.
To inherit the default file, add this to your HTML:
<%inherit file="//results/EventsViewer_default_renderer.html" />
Customize the display structure of events by overriding the settings from the default renderer and creating a custom layout. For example:
## override <%def name="event_raw(job, event, request, options, xslt)"> <a href="http://www.yelp.com/search?find_desc=french&find_loc=San+Francisco%2C+CA&ns=1&rpp=10" target="_blank">French restaurants in San Francisco</a> <img src="${make_url('/static/app/stubby/event_renderer2.jpg')}" /> </%def> ## remove <%def name="event_fields(job, event, request, options)"> <!-- remove all fields structural markup --> </%def> ## parent <%def name="event_time(job, event, request, options)"> ${parent.event_time(job, event, request, options)} </%def>
Here is the stanza in event_renderers.conf
for this event renderer:
[event_renderer_2] eventtype = french_food_type priority = 1 template = event_renderer2.html css_class = EventRenderer2
Add a custom CSS file
Create an application.css
file for an app at the following location:
$SPLUNK_HOME/etc/apps/<app_name>/appserver/static
The rules in this CSS file apply only to the app in which the CSS file is located. For more information about adding CSS to Splunk apps in general, see "Customize CSS" in this section.
Here's an example application.css
file that inserts a background picture and changes the size of the events:
.splEvent-EventRenderer1 { background:url(event_renderer1.jpg) 100px 0px no-repeat; height:60px; } .splEvent-EventRenderer1 .event, .splEvent-EventRenderer1 .fields { display:none; }
Here is the stanza in event_renderers.conf
for the CSS class defined in application.css
:
[event_renderer_1] eventtype = hawaiian_type priority = 1 css_class = EventRenderer1
Add custom JavaScript
Add JavaScript to a view to specify custom actions additional functionality on specific events.
To add JavaScript, create an application.js
file in the following location:
$SPLUNK_HOME/etc/apps/<app_name>/appserver/static
This file contains custom JavaScript to apply to an app. Bind the JavaScript to the CSS class in the event_renderers.conf
file:
$(document).bind("splEvent-<css_class_name>", <js function name>);
The following JavaScript code creates a link to search Google in Japanese from events in Splunk.
function eventRenderer3Handler(event, options){ var type = options.nativeEvent.type; var target = options.nativeEvent.target; //cancel all mouse hover behavior if(type=="click"){ var q = encodeURIComponent($(options.nativeEvent.target).html()) window.location.href = "http://www.google.co.jp/search?hl=ja&source=hp&q="+q+"&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=&aq="+q+"&oq=;" options.nativeEvent.preventDefault(); } } $(document).bind("splEvent-EventRenderer3", eventRenderer3Handler);
Here is the stanza in event_renderers.conf
for the custom JavaScript event behavior:
[event_renderer_3] eventtype = japan_type priority = 1 css_class = EventRenderer3
PREVIOUS Customize the login screen |
NEXT Add Web resources to your view |
This documentation applies to the following versions of Splunk® Enterprise: 5.0, 5.0.1, 5.0.2, 5.0.3, 5.0.4, 5.0.5, 5.0.6, 5.0.7, 5.0.8, 5.0.9, 5.0.10, 5.0.11, 5.0.12, 5.0.13, 5.0.14, 5.0.15, 5.0.16, 5.0.17, 5.0.18
Feedback submitted, thanks!