Form examples

A form is similar to a dashboard, but provides an interface for users to supply values to one or more search terms, typically using text boxes, dropdown menus, or radio buttons. A form shields users from the details of the underlying search. Forms allow users to focus only on the terms for which they are searching and the results. The results can be displayed in tables, event listings, or any of the visualizations available to dashboards.

This topic contains basic examples that show how to create forms. The examples show how to use tokens to pass values in forms. See Token usage in dashboards for details on token implementation.

Basic form example

The user input to a form defines tokens for the selected values of the input. A search in the form uses the tokens to specify the values to use in the search. The search accesses the value for the token using the '$...$' as a delimiter for the token value.

For example, the following code snippet defines a dropdown that uses the sourcetype_tok token to represent the selection by the user. It also defines the choices for the dropdown.

    <input type="dropdown" token="sourcetype_tok">
      <label>Select a source type</label>
      <default>splunkd</default>
      <choice value="splunkd">splunkd</choice>
      <choice value="splunk_web_access">splunk_web_access</choice>
      <choice value="splunkd_ui_access">splunkd_ui_access</choice>
    </input>

The search in the form references the token. In the following code snippet, $sourcetype_tok$ represents the value from the dropdown choice.

       <search>
         <query>
           index = _internal sourcetype=$sourcetype_tok$ 
           | timechart count by sourcetype
         </query>
           <earliest>-7d</earliest>
           <latest>-0d</latest>
       </search>

7.1 Form time chart.png

Here is the simple XML implementing the form.

<form>
  <label>Form example: source type time chart</label>

  <!--autoRun means the search runs as soon as it is loaded. -->
  <!-- Do not need a submit button                           -->
  <fieldset autoRun="true" submitButton="false">
    <input type="dropdown" token="sourcetype_tok">
      <label>Select a source type</label>
      <default>splunkd</default>
      <choice value="splunkd">splunkd</choice>
      <choice value="splunk_web_access">splunk_web_access</choice>
      <choice value="splunkd_ui_access">splunkd_ui_access</choice>
    </input>
  </fieldset>

  <row>
    <panel>
      <chart>
        <search>
          <query>
            index = _internal sourcetype=$sourcetype_tok$ 
            | timechart count by sourcetype
          </query>
            <earliest>-7d</earliest>
            <latest>-0d</latest>
        </search>
      </chart>
    </panel>
  </row>
</form>

Form with time inputs example

You can add one or more time inputs to a form. If you add a single time input, a token for the time input is not necessary. The time input drives the data for all searches in the form.

However if you add additional time inputs to a form, specify a token for each time input. The searches in the form reference the tokens to indicate which time input to use.

The following code snippet creates a time input that defines a token for local use.

      <input type="time" token="time_tok" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>

Use the earliest and latest modifiers to the time input token when accessing the local time input.

       <search>
         <query>
           index=_internal sourcetype=$sourcetype_tok$ 
           | stats count as sourcetype</query>
         <earliest>$time_tok.earliest$</earliest>
         <latest>$time_tok.latest$</latest>
       </search>

The following example uses a global timer that drives the Source Type Timechart panel. The Source Type Event Counter panel contains a local time for that panel only.

7.1 form add time pickers.png

<form>
  <label>Form example: add time pickers</label>
  <fieldset autoRun="true" submitButton="false">
    <input type="dropdown" token="sourcetype_tok">
      <label>Select a source type</label>
      <default>splunkd</default>
      <choice value="splunkd">splunkd</choice>
      <choice value="splunk_web_access">splunk_web_access</choice>
      <choice value="splunkd_ui_access">splunkd_ui_access</choice>
    </input>

    <!-- Global timer. Not token is necessary -->
    <input type="time" searchWhenChanged="true">
      <label>Select time range</label>
      <default>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </default>
    </input>

  </fieldset>
  <row>
    <panel>
      <title>Source type time chart</title>
      <chart>
        <search>
          <query>index = _internal sourcetype=$sourcetype_tok$ 
            | timechart count by sourcetype</query>
        </search>
      </chart>
    </panel>
    <panel>
      <title>Source type event counter</title>

      <!-- Local timer. Use tokens to access selected time. -->
      <input type="time" token="time_tok" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>

      <single>
        <search>
          <query>
             index=_internal sourcetype=$sourcetype_tok$ 
             | stats count as sourcetype</query>

          <!-- Use the earliest and latest modifiers to the time input token -->
          <earliest>$time_tok.earliest$</earliest>
          <latest>$time_tok.latest$</latest>

        </search>
      </single>
    </panel>
  </row>
</form>

Static and dynamic inputs to forms

The following form inputs require multiple choices for selection by the user. You can statically define the inputs or use a search to dynamically populate the inputs to a form.

  • Check box
  • Dropdown
  • Multiselect
  • Radio

The search in the following example compares static and dynamic definition for choices. The dropdown uses a populating search to define the choices.

  • Populating <search>
    Returns fields to use for the label and value of the choices.
  • <fieldForLabel> <fieldForValue>
    Child elements to the <input> element. These specify the fields to use to populate choices for the dropdown.

7.1 populate an input.png

<form>
  <label>Populate an input with a search</label>
  <description>Events Filtered by User and Sourcetype</description>
  <!-- Do not need a Search Button. Inputs search when changed -->
  
  <fieldset autoRun="true" submitButton="false">
    
    <!-- Static definition of choices -->
    <input type="radio" token="username_tok" searchWhenChanged="true">
      <label>Select a User:</label>
      
      <!-- Define the default value -->
      <default>All</default>

      <!-- Hard-code the choices -->
      <choice value="*">All</choice>
      <choice value="-">-</choice>
      <choice value="admin">Admin</choice>
      <choice value="nobody">Nobody</choice>
      <choice value="splunk-system-user">Splunk System User</choice>
    </input>
    
    <!-- Dynamic definition of choices -->
    <input type="dropdown" token="sourcetype_tok" searchWhenChanged="true">
      <label>Select a Sourcetype:</label>
      <prefix>sourcetype="</prefix>
      <suffix>"</suffix>
      
      <!-- Define the default value -->
      <default>splunkd</default>
      
      <!-- Hard-code the choice for "All" -->
      <choice value="*">All</choice>
      
      <!-- Define the other choices with a populating search -->
      <search>
        <query>
          index=_internal | stats count by sourcetype
        </query>
      </search>
      <fieldForLabel>sourcetype</fieldForLabel>
      <fieldForValue>sourcetype</fieldForValue>
    </input>
    
  </fieldset>
  <row>
    <panel>
      <!-- Use tokens from the <input> elements in the panel title -->
      <title>
        Input selections: (radio) "$username_tok$", (dropdown) $sourcetype_tok$
      </title>
      
      <chart>
        
        <!-- search for the visualization, references the input tokens-->
        <search>
          <query>
            index=_internal user=$username_tok$ $sourcetype_tok$ | timechart count
          </query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
       </chart>
      
    </panel>
  </row>
</form>

Create a form with a global search