How to build an advanced search view

How to build an advanced search view

This page shows you how to build a view using Splunk's advanced XML syntax. Before you build an advanced search view, try out the more simple XML syntax or the UI based dashboard builder. See the previous sections Build dashboards and Build forms. Also, make sure you've read the introduction to this section, as it includes important information about how the advanced XML works.

Every page in Splunk Web is a view. Search views are pages like the flash timeline -- they present a search bar to users, and display events or search results. Search views are also laid out in a specific way. This page walks you through the process of building a search view and introduces the search view layout.

Get started

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

1. Decide which modules you want to include in your view. Use the Module reference in this manual.
2. Create a view XML file <view_name>.xml, either through Splunk Manager, or in the views directory, inside your app directory: $SPLUNK_HOME/etc/apps/<app_name>/data/ui/views/
3. Configure each module in your view's XML file. Set parameters for each module and layoutPanels for parent modules.
4. If you have more than one view for your app, arrange them in the UI by following the instructions in Build navigation for your app in this manual.

Create the view.xml file

Create a view XML file <view_name>.xml, either through Splunk Manager, or in the views directory, inside your app directory: $SPLUNK_HOME/etc/apps/<app_name>/data/ui/views/

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

<view>
</view>

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>

Add chrome

Now, add the chrome; specifically, the top navigation modules AccountBar and AppBar.

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

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

</view>

Set params

You can remove the app drop-down by setting a param for the AccountBar. For example, the following XML creates a view that doesn't have the link to Manager or the app drop-down menu in the upper right-hand corner:

<view>

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

</view>

There are more params for each module. These are listed in the module reference.

Specify layout panels

Set the layoutPanel to tell Splunk where to display the modules. There are different layout panels for each part of the page, and different layout panels for different types of views. It's a good idea to familiarize yourself with the different layout panels, as they will affect how your modules are displayed on the page.

Chrome layout panels

Here are the layout panels for chrome:

• 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.

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 -- this module creates the search bar. You can prepopulate this module with search terms, but we'll leave it blank for now:

<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">

</view>

Search module layout panels

The following layout panels are useful for search modules:

• 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.

There are many more search modules. Find out more by looking through the search module section of the Module reference.

Add the results display area

You'll probably also want some way to display and interact with your search results. To achieve this, add an EventsViewer module to your view:

<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">

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

  </module>

</view>

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 can access 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 panels

There are many more results modules. See the results modules section of the Module reference. Results modules look best when placed 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 pagination

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 we've finished the simple search view. The view XML looks like this:

<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