Splunk® Enterprise

Developing Views and Apps for Splunk Web

Download manual as PDF

This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
Download topic as PDF

Add Web resources to your view

You can use Splunk's Web resource modules to add IFrames or HTML to a view.

Add HTML

Use the ServerSideInclude module to add HTML to a view.

1. Create an HTML file, for example foo.html here:

$SPLUNK_HOME/etc/apps/<appname>/appserver/static

2. Add the Web content into the file.

3. Update the advanced XML for the view to include the ServerSideInclude module:

<view>
  <module name="ServerSideInclude">
    <param name="src">foo.html</param>
  </module>
</view>

Note: The advanced XML implementing the view should be located here:

$SPLUNK_HOME/etc/apps/<appname>/default/data/ui/views/<view_name>.xml

4. Access the view in a browser

http://<hostname>:<port>/app/<appname>/<view_name>

Add images

To add an image use the Mako template utility function make_url in the HTML:

<img src="${make_url('/static/app/<app_name>/<image>.png')}" />


Add links

You can create dynamic and static links from the HTML template included using the ServerSideInclude.

  • Dynamic: <a href=”${make_url(‘/manager/foo/bar’)}”>click me</a>
  • Static: <a href=”/manager/foo/bar”>click me</a>


The dynamic version uses the make_url method, which properly qualifies the URL to the current locale and inserts relevant modifiers for static content or proxied instances. You can also use make_urlto insert runtime information (such as the app name).

In the following example, you pass a list as the first argument, not a plain string.

<a href=”${make_url([‘manager’, APP[‘id’], ‘foo’, ‘bar’])}”>click me</a>


Here are some common variables available from the HTML template system:

  • current namespace: APP[‘id’]
  • current app friendly label: APP[‘label’]
  • current view id (what appears in the URI): VIEW[‘id’]
  • current view label: VIEW[‘label’]

These variables are available if you link to a view with an s= saved search name:

  • current saved search name: SAVED['name']
  • current viewstate ID associated with saved search: SAVED['vsid']

Style your HTML document

Use CSS to style your HTML document. Once you've created an HTML document, you can create a corresponding CSS file to specify its style.

Splunk Enterprise CSS implementation is not scoped. If you add CSS to a page, make sure you scope the class names. Splunk does not recommend applying styles to global selectors. Instead, use class selectors to control scope and possible collisions.

  • Global selectors: body {background:pink;}
  • Class selectors (recommended): .myclass {background:pink;}

Here are some steps you can follow to learn more about CSS and apply them to an HTML document in Splunk.

1. Familiarize yourself with CSS.

If you're not familiar with CSS, check out this CSS resource. Specifically, familiarize yourself with how a CSS class selector works. In an HTML document, a class selector is the XHTML element to which you apply CSS styles.

For example:

<div class="bar">
  w00t!
</div>

Define a class selector in CSS using the "." sign followed by the value of the class attribute (no space between the "." and the name of the class). For example:

.bar {
  background:pink;
}

You can use the same class name within an XHTML document multiple times.

2. Create a CSS file, for example foo.css, at the following location:

$SPLUNK_HOME/etc/apps/<appname>/appserver/static

3. Add a rule to the CSS file:

.bar {
  background:pink;
}

Any element with a matching class attribute of bar now has a pink background.

<div class="bar">
  <h1>I have a pink background now!</h1>
</div>

Add an IFrame

Use the IFrameInclude module to add an IFrame into a view.

1. Determine the URI you want to load into an IFrame.

2. Update the view XML to include the IFrameInclude module, with a link to the URI:

<view>
  <module name="IFrameInclude">
    <param name="src">myawesomewebsite.com</param>
  </module>
</view>

3. (Optional) set the height.

This example sets the height to 42 pixels.

<view>
  <module name="IFrameInclude">
    <param name="src">myawesomewebsite.com</param>
    <param name="height">42</param>
  </module>
</view>

4. (Optional) Add a parameter to IFrameInclude that tests if the URI exists:

<view>
  <module name="IFrameInclude">
    <param name="src">myawesomewebsite.com</param>
    <param name="check_exists">True</param>
  </module>
</view>
PREVIOUS
Customize the login screen
  NEXT
Customize dashboard styling and behavior

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


Comments

Does the 'Add Images' step above still work in v6.2? My dashboards that used this in previous versions no longer work and it appears to me that the make_url function can't be found anymore.

Ashleyherbert
January 15, 2015

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