1. Create an app for the tutorial with a Simple XML dashboard

We'll be starting out with a Simple XML dashboard with multiple panels for a dropdown list, radio buttons, a table, and a chart. The dropdown list and radio buttons use token values to power the first search (values for the number of results to display, and the source types to search on).

This tutorial assumes that you're familiar with Simple XML and tokens. To learn more, see the Overview of simple XML in the Splunk Data Visualization Manual.

    Note  You need access to source files on your Splunk instance, so you might need to contact your Splunk administrator for permission and access.

First, we'll create an app for the tutorial:

  1. On the Splunk Web home page, click the Gears icon next to Apps.
  2. Click Create app.
  3. On the Add new page, fill out the properties of the new app:
    • For Name, enter "HTML Dashboard Tutorial".
    • For Folder name, enter "htmldashboardtutorial".
    • Under Template, select "barebones".
  4. Click Save.

Next, we'll add a Simple XML dashboard to our app:

  1. On the Apps page, find the HTML Dashboard Tutorial app in the list and click Launch app. (You can also open the app from the Splunk Web home page.)
  2. On the navigation bar at the top of the page, click Dashboards.
  3. Click Create New Dashboard, then fill out the dashboard properties:
    • For Title, enter "Simple XML".
    • For Permissions, click Shared in App (this keeps the XML file in the app's folder, $SPLUNK_HOME/etc/apps/htmldashboardtutorial).
  4. Click Create Dashboard.
  5. The new Simple XML dashboard is displayed in edit mode.

  6. Click Edit Source.
  7. In the View box, replace the code with the following:
  8. <form>
      <label>Simple XML</label>
      <description>A form with radio buttons, a table, a chart, and tokens</description>
      <fieldset submitButton="true" autorun="true">
        <input type="dropdown" token="headcount">
          <label>Number of Results</label>
          <choice value="1">1</choice>
          <choice value="2">2</choice>
          <choice value="3">3</choice>
          <default>1</default>
        </input>
        <input type="radio" token="sourcetype">
          <label>Source Types</label>
          <choice value="*">All</choice>
          <search>
            <query>index=_internal | head 1000 | top sourcetype</query>
          </search>
          <fieldForLabel>sourcetype</fieldForLabel>
          <fieldForValue>sourcetype</fieldForValue>
          <default>*</default>
        </input>
      </fieldset>
      <row>
        <panel>
          <table>
            <title>index=_internal sourcetype=$sourcetype$ | head $headcount$</title>
            <search>
              <query>index=_internal sourcetype=$sourcetype$ | head $headcount$</query>
              <earliest></earliest>
              <latest></latest>
            </search>
            <option name="showPager">true</option>
          </table>
        </panel>
      </row>
      <row>
        <panel>
          <chart>
            <title>Count by sourcetype</title>
            <search>
              <query>index=_internal | stats count by sourcetype</query>
              <earliest></earliest>
              <latest></latest>
            </search>
            <option name="charting.chart">pie</option>
          </chart>
        </panel>
      </row>
    </form>
    
  9. Click Save, then click Done.

Here's the dashboard:

Simple XML dashboard

As you can see, there are two form inputs and two search-driven panels. However, the searches don't run until you click the Submit button, which submits the dropdown list and radio button choices as token values to the first search. The heading of the table also displays the token values and changes when you select different choices. When you click Submit, the result table displays the updated search results.

Continue to 2: Convert the dashboard to HTML.