Add navigation to a Splunk app

Add navigation to your app by modifying the app bar to specify how users will access the dashboards, reports, data models, and alerts in your app. Here's an example of an app bar for a Splunk app:

[Default app bar]

This navigation structure is defined in an XML file, default.xml, which is located in $SPLUNK_HOME/etc/apps/your_app_name/default/data/ui/nav/, which is created automatically when you create an app.

Here's the XML structure for the default app bar:

<nav search_view="search" color="#65A637">
    <view name="search" default="true" />
    <view name="data_models" />
    <view name="reports" />
    <view name="alerts" />
    <view name="dashboards" />
</nav>

Modify the app bar

Edit the default.xml file to modify the app bar. You can edit the source file directly using your own text editor, or use the Splunk software's Source Editor (in Splunk Web, go to Settings > User Interface, click Navigation menus, then click default for your app).

To view your changes, restart Splunk Web or refresh the page by opening the http://<localhost:port>/debug/refresh URL in your web browser, click Refresh, then reload the page in the browser.

Here's an example of a Splunk app with a modified app bar:

[Modified app bar]

You can modify the app bar by setting or adding the following features:

Default search target and home page

To enable other apps to run a search query in your app, specify the target dashboard using the search_view tag. By default, "search" is the target dashboard.

To change the default home page for your app, use the default="true" property. When no view is marked as default, the first one listed in default.xml is used.

<nav search_view="search" color="#0072C6">

    <!-- Set "myhomedashboard" as the default page -->
    <view name="myhomedashboard" default="true" />
    
</nav>

App bar color

Set the color of the app bar in the nav element using the color property set to a hexadecimal value:

<nav search_view="search" color="#0072C6">
    . . .
</nav>

Dashboard links

Add links to dashboards on the app bar using the view tag. Add lists of links using the collection tag. Two levels of nesting are supported.

    <!-- Use the view tag to create a dashboard link -->
    <view name="dashboard1" />

    <!-- Use the collection tag to create a list of items -->
    <collection label="Menu name">

        <!-- Add items to the list -->
        <view name="dashboard2" />
        <view name="dashboard3" />

        <!-- Add a nested list with items -->
        <collection label="Submenu name">
            <view name="dashboard4" />
            <view name="dashboard5" />
        </collection>

    </collection>

Report links

Add links to reports on the app bar using the saved="report_name" tag:

    <!-- Use the saved tag to create a report link -->
    <saved name="report1" />

Specify the dashboard in which to display a report by adding the view="dashboard_name" property. Splunk Enterprise checks for a "view" property attached to the the report in the savedsearches.conf configuration file. If a value is not specified, the report is launched in the Search app's "timeline" view.

    <!-- Display the report in the "mycharts" dashboard -->
    <saved name="report1" view="mycharts" />

External links

Add external links to the app bar using the a tag:

    <!-- This is an external link -->
    <a href="http://dev.splunk.com/">Splunk Developer Portal</a>

Dynamic lists

Generate dynamic lists of all dashboards or all reports that are available to the app using the source="all" property:

    <!-- Dynamically list all available dashboards-->
    <collection label="All dashboards">
        <view source="all" />
    </collection>

    <!-- Dynamically list all available reports-->
    <collection label="All reports">
        <saved source="all" />
    </collection>

Generate a dynamic list of dashboards or reports that contain a substring by using the match="substring" property. This example displays a menu of all dashboards and a menu of all reports that include the word "error" in their name:

    <!-- Dynamically list all dashboards with the word "error"-->
    <collection label="Dashboards (errors)">
        <view source="all" match="error"/>
    </collection>

    <!-- Dynamically list all reports with the word "error"-->
    <collection label="Reports (errors)">
        <saved source="all" match="error"/>
    </collection>

Classified dashboards and reports are those that are explicitly referred to in default.xml using the name="name" property. All other dashboards and reports are unclassified.

Generate a dynamic list of all unclassified dashboards or reports using the source="unclassified" property. This example displays all dashboards except "dashboard1" and all reports except "report1":

    <view name="dashboard1" />
    <saved name="report1" />

    <!-- Dynamically list all unclassified dashboards -->
    <collection label="Others">
        <view source="unclassified" />
    </collection>

    <!-- Dynamically list all unclassified reports -->
    <collection label="Others">
        <saved source="unclassified" />
    </collection>