Step 6: build navigation for your app

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 and is stored as a file called default.xml in your app's nav directory: $SPLUNK_HOME/etc/apps/<app_name>/default/data/ui/nav/default.xml. If you've created your app using App Builder, this file will already exist and you can just edit it through the file system or Splunk Manager.

Splunk Manager

You can edit this file through Splunk Manager by clicking on Navigation Menus. This takes you here:

http://localhost:8000/en-US/manager/<appname>/data/ui/nav

Note: Replace host and port with your installation host and port. Replace appname with your app's name.

File system

Create a file named "default.xml" in your app's nav directory: $SPLUNK_HOME/etc/apps/<app_name>/default/data/ui/nav/default.xml

Note: If you've used App builder to create your app, this file will be automatically created for you. If you are editing outside of Splunk Manager, you can refresh the nav by hitting the Splunk logo in the upper left-hand corner of Splunk Web, or by navigating your browser to:

https://<splunkserver>:<splunkmgmtport>/servicesNS/admin/<appname>/data/ui/nav?refresh=1

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 "chart" 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 haven't 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, use the following example:

<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 doesn't 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:

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

Add saved searches and reports

Add saved searches and reports into your navigation menu, too. This example adds saved searches 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 will check for a 'view' property attached to the savedsearches.conf stanza. If none is specified, the saved search will launch in the Search app's 'flashtimeline' 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 "match" in their name to appear in a collection, use saved source="unclassified" match="<term>".

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 saved source="all" match="<term>".

Matching is case insensitive.

<nav>
...
  <collection label="Errors">
    <saved 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.

• Was this topic useful?
• Post a comment