Developing Views and Apps for Splunk Web

Step 6: Build navigation for your app

Once you've built views for your app, specify how to arrange them in the navigation bar in Splunk Web. You can customize this navigation to work as you wish, using the instructions below. Specify the order to display your views, and which menu you want to display them in. For example, the UI Examples app includes this navigation:

Follow the instructions on this page to gather together all the views, searches and reports in your app. Also, use these instructions to specify a default view -- the first view users see upon launching your app and the view that is loaded when users click the logo in the upper left-hand corner.

Create your navigation file

Create and edit your navigation menu either through Splunk Manager or through the file system. The navigation menu is built on a custom XML structure that is stored as default.xml in your app's nav directory.

If you created your app using App Builder, default.xml exists at this location:

$SPLUNK_HOME/etc/apps/<app_name>/default/data/ui/nav/default.xml

You can edit the file with an editor of your choice or you can use Splunk Manager.

Splunk Enterprise Settings

If you used the sample_app template with App Builder, you can edit this file through Settings.

1. Launch your app.

You launch the app from the Splunk Web App menu, or you can navigate to Manager > Apps and click the Launch app action for your app.

2. After your app is launched, click Settings > User interface > Navigation Menus.

Note: The Settings page for Navigation Menus displays navigation with respect to the context of the current app.

3. Click default to open the XML Editor.

Edit the file as described in Build the navigation XML below. Click Save.

File system

If you are not using App Builder, create a file named default.xml in your app's nav directory:

$SPLUNK_HOME/etc/apps/<app_name>/default/data/ui/nav/default.xml

Edit the file in an editor of your choice, as described in Build the navigation XML below.

To edit in Splunk manager, refresh the page located at Settings > User interface > Navigation menus. Click default under Nav name for your app.

Build the navigation XML

Now, set up your navigation menu. This maps to your app's drop-down menus in Splunk Web.

<nav>
  <collection label="Dashboards">
    <view name="mydashboard" />
  </collection>
  <collection label="Search views">
    <view name="mysearchview" />
    <a href="http://google.com">Google</a>
  </collection>
</nav>

This example adds one view named "mydashboard" to the Dashboards drop-down in Splunk Web, another view named "mysearchview" and a link to Google in the Searches drop-down.

Customize menus

You can change the drop-down menu titles to whatever you want. For example, change the Dashboards menu to Ponies:

<nav>
  <collection label="Ponies">
    <view name="mydashboard" />
  </collection>
  <collection label="Search views">
    <view name="mysearchview" />
  </collection>
</nav>

Set a default view

Specify a default view, which is the view users land on when loading your app. This is also the view users are directed to upon clicking on the logo in the upper left hand corner.

To specify a view as default, add the default="true" tag:

<nav>
  <collection label="Ponies">
  <view name="mydashboard" />
  </collection>
  <collection label="Search views">
    <view name="mysearchview" default="true" />
  </collection>
</nav>

If no view is marked as default, then the first one listed in default.xml becomes the default. If no view is listed in default.xml, then the app users see the first view (in alphabetical order) they have read permissions for.

Dynamically include all views

Include all unlisted views in a view collection, without explicitly listing them. Use the view source="unclassified" tag:

<nav>
  <collection label="Dashboard">
  <view name="mydashboard" />
  </collection>
  <collection label="Search views">
    <view name="mysearchview" default="true" />
    <view name="anothersearchview" default="true" />
  </collection>
  <collection label="Others">
    <view source="unclassified" />
  </collection>
</nav>

Now all the views that have not been explicitly listed in default.xml show up in the Others drop-down in Splunk Web.

To include all available views (even ones that have been listed), specify:

<view source="all" />

Automatic lists can be restricted by a substring match. For example, if you want all views that include the word "dashboard" in their name to appear in a collection, specify the following:

<collection label="Dashboards">
   <view source="unclassified" match="dashboard"/>
</collection> 

Nested menus

To create a nested menu, add a view collection as a child to an existing view:

<nav>
  <collection label="Dashboard">
    <view name="helloworlddash" />
  </collection>
  <collection label="Views">
    <view name="helloworldview" default="true" />
      <collection label="Others">
        <view source="unclassified" />
      </collection> 
  </collection>
</nav>

Note: The Splunk user interface currently does not support more than two levels of nesting.

Link directly to a view

Link directly to a view from the navigation menu. The view appears as a link in the navigation menu instead of being listed in a drop-down menu. Add the view name=mychart" right underneath nav:

<nav>
  <view name="mychart" />
  <collection label="Dashboard">
    <view name="mydashboard" />
  </collection>
  <collection label="Searches">
    <view name="mysearchview" default="true" />
  </collection>
  <collection label="Others">
        <view source="unclassified" />
  </collection>
</nav>

Hide views

If you want to hide a view from being picked up in the navigation menu, edit the view's XML. Make sure you edit the top-level <view> tag, not a <view> tag contained within the <nav> tag.

<view isVisible="false">
...
</view>

Add saved searches and reports

Add saved searches and reports into your navigation menu, too. This example adds the following saved search into the saved searches drop-down menu:

<saved name="MySavedSearch" />

<nav>
  <collection label="Dashboard">
    <view name="mydashboard" />
  </collection>
  <collection label="Searches">
    <view name="mysearchview" default="true" />
  </collection>
  <collection label="Others">
        <view source="unclassified" />
  </collection>
  <collection label="Saved Searches">
    <saved name="MySavedSearch" />
  </collection>
</nav>

Now the saved search MySavedSearch shows up in the Saved Searches drop-down.

You can specify what view to load the saved search by adding a view= tag to the saved tag:

<nav>
...
  <collection label="Saved Searches">
    <saved name="MySavedSearch"  view="mychart" />
  </collection>
</nav>

Splunk software checks for a 'view' property attached to the savedsearches.conf stanza. If none is specified, the saved search launches in the Search app's 'timeline' view.

Saved searches can also be nested, just like views:

<nav>
...
  <collection label="Saved Searches">
    <saved name="Daily indexing volume by server" view="charting" />
      <collection label="Errors">
        <saved source="unclassified" match="error" />
      </collection>
    <saved source="unclassified" />
  </collection>
</nav>

Dynamically include saved searches

You can automatically include unnamed saved searches just the same as dynamically adding views. Just specify saved source="unclassified":

<nav>
  <collection label="Dashboard">
    <view name="mydashboard" />
  </collection>
  <collection label="Searches">
    <view name="mysearchview" default="true" />
  </collection>
  <collection label="Others">
    <view source="unclassified" />
  </collection>
  <collection label="Saved Searches">
    <saved source="unclassified" />
  </collection>
</nav>

This example now loads all unclassified saved searches in your App into the saved search menu, sorted alphabetically.

Restrict automatic lists with a substring match

Automatic lists can be restricted by a substring match. For example, if you want all unclassified searches that include the word "error" in their name to appear in a collection, use view source="unclassified" match="error".

On the other hand, if you want to set up an automatic list that includes all searches and reports available to the app with a specific term in their name, use view source="all" match="<term>".

Matching is case insensitive.

<nav>
...
  <collection label="Errors">
    <view source="all" match="error" />
  </collection>
</nav>

This example creates an "Errors" search collection, which automatically lists all saved searches with the substring "error" in their name, including searches that may already appear elsewhere in the nav menu.