Related Answers
Download topic as PDF
Customize Simple XML
There are various ways you can customize simple XML dashboards to modify the layout, add visualizations, and customize behavior of a dashboard or form. This topic discusses using custom CSS stylesheets and JavaScript files as well as an introduction to the common JavaScript API.
This topic also contains a few examples to highlight a few ways you can customize a dashboard.
Refer to the Splunk 6 Dashboard Examples app, available from Splunkbase, for a rich set of examples that show various ways to customize a dashboard.
CSS and JavaScript
Splunk apps reference the following files upon loading. These files define the default styling and behavior of the dashboards within the app context.
- dashboard.css
- dashboard.js
The location for these files are in an app's directory structure:
$SPLUNK_HOME/etc/apps/<app_name>/appserver/static/
You can modify these files to implement customized features for an app. However, keep in mind the following about these default files:
- Customizations here affect every dashboard in an app
- When you update an app your customized files could be overwritten during the update.
It is better to create your own custom CSS and JavaScript files and place them in the same directory as the default files. Then reference the files from your <dashboard> or <form> simple XML elements.
For example, to reference custom CSS and JavaScript files from the <dashboard> element:
<dashboard stylesheet="myStyleSheet.css" script="myJavaScript.js"> . . .
Common JavaScript API
You can customize behavior and visualizations of a dashboard by writing JavaScript code that references the SplunkJS Stack libraries. An understanding of the framework of SplunkJS Stack is essential to using them in a customized simple XML dashboard.
- Note: Documentation of SplunkJS Stack is out of scope for this manual. For details on using the SplunkJS Stack libraries to customize dashboards, refer to SplunkJS Stack on the Splunk developer portal.
JavaScript APIs of interest for customizing simple XML dashboards fall into the following categories:
- Dashboard level APIs
- Visualization element APIs
- Custom table cell renderer APIs
Example customizations
Custom stylesheet
This example uses a custom stylesheet to change the appearance and behavior of the dashboard.
Simple XML source
The dashboard element references the custom stylesheet, dark.css.
$SPLUNK_HOME/etc/apps/myApp/appserver/static/dark.css
<dashboard stylesheet="dark.css">
. . .
Custom stylesheet
Here is a partial listing of dark.css. Download the Splunk 6 Dashboard Examples to view the full listing.
body,.dashboard-body,.footer,.header,.app-bar,
.dashboard-panel,.dashboard-cell {
background: #333 !important;
}
a {
color: #ccc;
}
a:hover {
color: #fff;
}
.dashboard-row .dashboard-panel .panel-head h3,
.dashboard-header h2, p.description, .nav-footer>li>a {
color: #ddd;
text-shadow: none;
}
. . .
Custom visualization
This example defines a custom visualization for the search results.
Key components of this customization:
- simple XML source
<dashboard> element references the JavaScript file, custom_viz.js.
Uses an <html> panel to contain the custom visualization, referenced by its ID.
- custom_viz.js
Creates an instance of SearchManager to specify a search for the visualization
Creates an instance of the TagCloud visualization, created by tagcloud.js.
- tagcloud.js
Creates the tag cloud visualization based on search results. Implements drilldown behavior.
- tagcloud.css
Specifies layout for tagcloud.js
|
PREVIOUS Token usage in dashboards |
NEXT Simple XML Reference |
This documentation applies to the following versions of Splunk® Enterprise: 6.3.0, 6.3.1, 6.3.2, 6.3.3, 6.3.4, 6.3.5, 6.3.6, 6.3.7, 6.3.8, 6.3.9, 6.3.10, 6.3.11, 6.3.12, 6.3.13, 6.3.14, 6.4.0, 6.4.1, 6.4.2, 6.4.3, 6.4.4, 6.4.5, 6.4.6, 6.4.7, 6.4.8, 6.4.9, 6.4.10, 6.4.11
Feedback submitted, thanks!