Begin a search view

Begin a search view

This page explains how to build a simple search view. To load this view, copy the end result from the Example section of this page into the helloworld app you've been building: $SPLUNK_HOME/etc/apps/helloworld/default/data/ui/views/simple_search_view.xml. Then, navigate to:

http://localhost:8000/en-US/app/helloworld/simple_search_view

(Replace host and port with your installation host and port.)

Start your view

Create a view.xml file in your app's view directory.

Open the file for editing and add the surrounding view tags:

<view>
</view>

Add the search bar

The most basic search view is just going to appear as the search bar when you land on it:

To build this view, you'll need the SearchField module.

You can prepopulate this module with search terms, but we'll leave it blank for now:

<view>
  <!-- This module renders the search box -->
  <module name="SearchField" layoutPanel="mainSearchControls">
</view>

Set the layoutPanel to tell Splunk where to display this view. Read more about layoutPanels in the module overview.

Add the results display area

You'll probably also want some way to display and interact with your search results. Add the EventsViewer module.

<view>
  <!-- This module renders the search box -->
  <module name="SearchField" layoutPanel="mainSearchControls">
    <!-- This module renders the resulting events from your search -->
    <module name="EventsViewer"/>
  </module>
</view>

Module inheritance

Notice that we don't close out the SearchField module tags until after the EventsViewer module. That's because EventsViewer is a child of SearchField, meaning EventsViewer inherits the search that's typed into the search box. Children also inherit the layoutPanel settings, as well.

Remember to close out your remaining modules after you've configured their children.

Add chrome

Now, you've got the basic building blocks of the view, but there are a few more modules you'll need to add before the page will render smoothly. First, you'll want to add the chrome; specifically, the top nav modules AccountBar and AppBar. To specify that these should appear in the top nav, add layoutPanel="navigationHeader".

<view>

  <!-- top nav chrome -->
  <module name="AccountBar" layoutPanel="navigationHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  <!-- This module renders the search box -->
  <module name="SearchField" layoutPanel="mainSearchControls">
    <!-- This module renders the resulting events from your search -->
    <module name="EventsViewer"/>
  </module>

</view>

Specify params

Next, you'll need a way for users to page through results, especially if their search generates more results than will fit on one page. So, add the Paginator module:

<module name="Paginator">
    <param name="entityName">events</param>

Notice that we've specified the entityName param for paginator. This param is required. Paginator takes a couple other params, but they aren't required and so we've left them out of this example.

Now our view xml looks like this:

<view>

 <module name="AccountBar" layoutPanel="navigationHeader"/>
 <module name="AppBar" layoutPanel="navigationHeader"/>

 <module name="SearchField" layoutPanel="mainSearchControls">
   <module name="Paginator">
     <param name="entityName">events</param>
 	<module name="EventsViewer"/>
   </module>
 </module>

</view> </pre>

Name your view

When you've finished your view, give it a descriptive name by adding a <label> tag right after the opening <view> tag.

<view>
  <label>Basic Search View</label>

Example

Here's the full configuration of the view. Note that indentation does not matter, but you can use it as a visual aid to show inheritance.

<view>
  <label>Basic Search View</label>

  <!-- Top nav chrome -->
  <module name="AccountBar" layoutPanel="navigationHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  <!-- This module renders the search box -->
  <module name="SearchField" layoutPanel="mainSearchControls">

    <!-- You need paginator to page through all the results from the search -->
    <module name="Paginator">
      <param name="entityName">events</param>

        <!-- This module renders the resulting events from your search -->
  	<module name="EventsViewer"/>
    </module>
  </module>
</view>

Moving on

Now, you've configured a basic search view. To build onto your search view, add other search modules. You can always refer to the default search view in $SPLUNK_HOME/etc/apps/search/default/data/ui/views/flashtimeline.xml. To load this view, go to:

http://localhost:8000/en-US/app/search/flashtimeline

(Replace host and port with your installation host and port.)