Add Web resources to your view

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's 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>

• Was this topic useful?
• Post a comment