Build a search view

Build a search view

Every page in Splunk Web is a view. For more basic information about how views work, read this page.

Search views are pages like the flash timeline -- they present a search bar to users, and display events or search results.

To configure a search view for your app, follow these steps:

1. Decide which modules you want to include in your view.
2. Configure each module in <view_name>.xml. Set parameters for each module and layout for parent modules.
3. Put <view_name>.xml in the views directory, inside your app directory: $SPLUNK_HOME/etc/apps/<app_name>/data/ui/views/
4. If you have more than one view for your app, arrange them in the UI by following the instructions in Create view collections.

Begin a search 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="SearchBar" layoutPanel="mainSearchControls">
</view>

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

Search bar layout

Use search modules to display the search bar and supporting modules in the following panels:

• splSearchControls-inline
  • This panel aligns search modules next to each other in columns, with the first module taking up any space the other modules don't.
• mainSearchControls
  • This panel aligns search controls one after another, generally vertically.

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="SearchBar" 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 SearchBar module tags until after the EventsViewer module. That's because EventsViewer is a child of SearchBar, 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.

Results layout

Put the rest of your results modules in the following layout panels:

• fullWidthControls
  • Use this layout panel for anything that will take up the whole width of the page, such as serverSideInclude or other web resources.
• graphArea
  • Use this panel for the FlashTimeline module.
• sidebar
  • Use this panel to display the FieldPicker, MultiFieldViewer and SuggestedFieldViewer modules.
• resultsHeaderPanel
  • Add a header to your results with the ResultsHeader module.
• pageControls
  • Put Paginator and other page controls modules here.
• resultsAreaLeft
  • Display your results here with the EventsViewer module.
• resultsAreaRight
  • Add a secondary area to display results to the right of resultsAreaLeft.
• resultsOptions
  • This is a pop-up layer and shows up as a link to Options from within pageControls.

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.

<view>

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

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

</view>

Chrome layout

Search view chrome layout panels are ordered the same as dashboards:

• messaging
  • Use this layoutPanel for messaging modules.
• appHeader
  • appHeader contains all the overall links for Splunk AccountBar.
• navigationHeader
  • Use this layoutPanel for the AppBar module, which contains all the navigation for the App.
• viewHeader
  • viewHeader is a header panel for your view, where you can put a title for your page.

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="appHeader"/>
 <module name="AppBar" layoutPanel="navigationHeader"/>

 <module name="SearchBar" 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="appHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  <!-- This module renders the search box -->
  <module name="SearchBar" 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>

• Was this topic useful?
• Post a comment