Dynamic drilldown in dashboards and forms

Link to custom destinations and content when users click on elements in a dashboard or form. You can use dynamic drilldown to capture information from a source dashboard or form and pass it to a target. The target can be another dashboard or form, or a page within your Splunk deployment. You can also link to an external website.

Example dynamic drilldown
This dashboard shows sourcetype throughput in a table.

The drilldown is configured to link to a form. To show customized content in the form, the drilldown also captures values from the source dashboard and/or elements that users click. For example, when users click the splunk_web_service sourcetype in the table, this form opens.

When the form opens, the splunk_web_service sourcetype populates the form input and causes the form to show customized content for this sourcetype.

Building a dynamic drilldown

Start building a dynamic drilldown by putting a <drilldown> element in a table or chart.

Specify a drilldown target

Inside the <drilldown> element, use a <link> element to indicate the drilldown target and to customize content in a target dashboard or form.

<drilldown>
   <link>...</link>
</drilldown>

The <link> element contains a path to the target and any token values that you are passing from the source to the target. These examples show you the syntax for specifying the target path and passing values.

Target and behavior	Syntax
Link to a dashboard in your Splunk deployment.	Use a relative path that includes the dashboard or form id. <link> [relative path]/[dashboard or form id] </link>
Link to a form in your Splunk deployment. Show customized content in the form by passing a token value captured from the source. Use the token value to populate a form input.	Add a ? symbol after the relative path. Set tokens in the target to values passed from the source. This example sets a token in a target form to a value from the source. Prefix tokens in the target form with form., as shown here. <link> [relative path]/[dashboard or form id]?form.[target_token_name]=[$source_value$] </link>
Pass the <earliest> and <latest> time range modifiers from the source search to a search in the target.	Add &earliest=$earliest$&latest=$latest$ to the target path and token values. Use the <![CDATA[ ... ]]> wrapper to make sure that the & symbol is interpreted correctly. <link> <![CDATA[ [relative path]/[dashboard or form id]?form.[target_token_name]=[$source_value$]&earliest=$earliest$&latest=$latest$ ]]> </link>
Use a URL and query argument to pass a value to a target web page.	<link>[target_URL]?q=[$source_value$] </link>

Syntax for specifying destinations

The syntax for specifying destinations varies, depending on the type of chart you are using and the destination you choose. Refer to the entries for <drilldown> element and <link> element in the Simple XML Reference. See also Token usage in dashboards to review available token filters.

Conditional linking

When configuring a drilldown, you can capture token values from a source dashboard or form. You can use these values to configure the target dashboard or form and show users customized content.

You might want to configure conditional linking to different targets depending on the specific elements that users click in the source dashboard or form. To do this, add a <condition> element to the <drilldown>. The <condition> element contains the conditional <link> target and values to use.

A table field or chart series attribute in the <condition> indicates the field or series value to evaluate for conditional linking.

Examples

A dashboard includes a table with columns A, B, and C. Here are some examples of conditional drilldown linking.

Set a form value
If a user clicks a value in column A, open a form with a token set to the captured value. If users click values in columns B or C, use default drilldown behavior.

<drilldown>

 <condition field="A">
   <link> [relative_path]/[target_form_id]?form.[target_token]=$[value_from_source]$ </link>
 </condition>

</drilldown>

Pass a query string parameter to a URL
If a user clicks a value in column B, the drilldown passes the value as a query string parameter to a target web page. If users click values in column A or C, use default drilldown behavior.

<drilldown>

 <condition field="B">
   <link>[target_URL]?q=$[value_from_source]$</link>
 </condition>

</drilldown>

Open the target in another browser window

By default, drilldown targets open in the same browser window as the source dashboard or form. You can add a target="blank" attribute to the drilldown element to make the target open in a new browser window.

Example source code

<dashboard>
  <label>Dynamic drilldown example</label>
  
  <row>
    <panel> 
      <table>

      <title>Sourcetypes by source (Dynamic drilldown to a form)</title>
      <search>
        <query>
        index="_internal" | stats dc(sourcetype) by sourcetype, source
        </query>
      <earliest>-60m</earliest>
      <latest>now</latest>
      </search>
      <option name="count">15</option>
      <option name="displayRowNumbers">false</option>
      <option name="showPager">true</option>

      <drilldown target="blank">
       <!-- Access the input on the target form, which is in the same app  -->
       <!-- sourcetype.tok is the token for an input to the target form    -->
       <link>
          form_for_drilldown?form.sourcetype_tok=$click.value$
        </link>
      </drilldown>   

      </table>
    </panel>
  </row>  
</dashboard>

Dynamic drilldown examples

These examples show you how to build dynamic drilldown into dashboards and forms.

Target form

If you are linking to a target dashboard or form, make sure that it is configured to receive any token values that you are setting in the drilldown.

This form is the target for all of the following drilldown examples. The relative path for the form is /app/search/form_for_drilldown.

The form has a dropdown input that lets users select a sourcetype value. The input uses the sourcetype token to represent the selected value. This token is used in a search that generates a chart showing results for this sourcetype.

<form>
  <label>Destination form for drilldown</label>
  <fieldset autorun="true" submitButton="false">
    <input type="dropdown" token="sourcetype">
      <label>Select a source type</label>
      <default>splunkd</default>
      <search>
        <query>
          index = _internal | stats count by sourcetype
        </query>
      </search>
      <fieldForLabel>sourcetype</fieldForLabel>
      <fieldForValue>sourcetype</fieldForValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>index = _internal sourcetype=$sourcetype$ 
            | timechart count by sourcetype</query>
          <earliest>-7d</earliest>
          <latest>-0d</latest>
        </search>
      </chart>
    </panel>
  </row>
</form>

Dashboard linking to a form

This example shows you how to set up a drilldown that links dashboard users to a form. When users click on a table row in the dashboard, the form opens to show customized content.

Drilldown source code
This drilldown uses the <link> element to indicate the form to open and to set token values in the form.

<drilldown>
<link>
<![CDATA[
  /app/search/form_for_drilldown?form.sourcetype=$row.sourcetype$&earliest=$earliest$&latest=$latest$
]]>
</link>
</drilldown>

In the <link> element, the following drilldown components configure linking and token setting when users click on a table row in the dashboard.

Component	Drilldown behavior that this component configures	Details
Target form path	Indicates the form to open when the user clicks on a table row	/app/search/form_for_drilldown
Token names and values	Tokens customize form content based on the table row that users click in the dashboard.	To pass token values from the source dashboard to the target form, query string parameters are included in the path after the ? symbol. form.sourcetype=$row.sourcetype$ When a user clicks a table row in the dashboard, pass the sourcetype value from this row to the form. Set the form.sourcetype token in the form to the $row.sourcetype$ value from the table row that the user clicked. earliest=$earliest$&latest=$latest$ Set the earliest and latest time range modifiers in the form to the $earliest$ and $latest$ values from the source dashboard. The <![CDATA[...]]> tag makes sure that the & character is interpreted correctly.

Complete dashboard source code

<dashboard>
 <label>Dashboard with dynamic drilldown to a form</label>
  <row>

    <table>
      <search>
        <query>
           index="_internal" group="per_sourcetype_thruput" |
           chart sum(kbps) over series
        </query>
        <earliest>-60m</earliest>
        <latest>now</latest>
      </search>
      <title>Top sourcetypes (drilldown example)</title>
      <option name="count">15</option>
      <option name="displayRowNumbers">false</option>
      <option name="showPager">true</option>
      
     <drilldown>
       <link>
        <![CDATA[
          /app/search/form_for_drilldown?form.sourcetype=$row.sourcetype$&earliest=$earliest$&latest=$latest$
         ]]>
       </link>
     </drilldown>      
    </table>

  </row>
</dashboard>

Form linking to an external website

Link users who click an element in a chart to relevant search results on the Splunk Answers community forum.

Drilldown

<link>
  http://answers.splunk.com/search.html?q=$click.value$
</link>

This drilldown includes the following components in the <link> element.

Component	Drilldown behavior that this component configures	Details
URL for the external website	In this example, the URL points to a Splunk Answers search.	http://answers.splunk.com/search.html
Token names and values	Capture the clicked value from the chart and pass it to the website as a URL query string parameter.	?q=$click.value$ The $click.value$ predefined token captures the clicked value from the chart. This value passes to the Answers search URL, meaning that it is used as a search term on the Answers site. When the user clicks a value and the Answers site loads, users see search results for this value.

Complete form source code

<form>
  <label>Form Search</label>
  
  <fieldset>
     <!-- Use the html tag to specify text to display -->
     <html>
       <p>Enter a sourcetype in the field below. This view returns the most recent 1000 events for that sourcetype.</p>
       <p>In the Matching Events, click in the series column to open the value clicked in a new form</p>
     </html>

     <!-- The default input is a text box with no initial value -->
     <input token="sourcetype" />
    
     <!-- Include a time picker -->
     <input type="time">
        <default>Last 30 days</default>
      </input>
  </fieldset>
  
  <row>
    <panel>
      <!-- output the results as a 50 row events table -->
      <table>
         <title>Matching events</title>

        <!-- search with replacement token delimited with $ -->
        <search>
          <query>
            index="_internal" group="per_sourcetype_thruput" series=$sourcetype$ 
            | chart sum(kbps) over series
          </query>
        </search>

         <option name="count">50</option>
        
         <!-- $click.value$ captures the value clicked by the user -->
         <!-- and passes it to the website as a query parameter -->
         <drilldown>          
           <link>
                http://answers.splunk.com/search.html?q=$click.value$
           </link>
         </drilldown>
       </table>
    </panel>
  </row>
  
</form>

Dashboard linking to a multivalue field

You might have a dashboard that includes multivalue fields. Multivalue fields can appear multiple times in an event. Each time this field type appears in an event, it can have a different value. You can configure a drilldown to link to specific targets depending on the value that users click.

See Configure multivalue fields in the Knowledge Manager Manual for more information on working with multivalue fields in your data.

Capture a clicked value from a multivalue field
When setting up a drilldown from a table, you typically use $click.name$ or $click.name2$ to capture the value that users click in a column or row. However, when working with multivalue fields, use $click.value2$ to capture the selected value for the drilldown. Use a <condition> element with a field attribute to limit the column selection to the multivalue field.

Example
A dashboard includes a multivalue badges field representing user checkins to a conference event. This drilldown captures a clicked value from the badges field.

<drilldown>

 <condition field="badges">
    <link>
      /app/foursquare_vegas/vegas_badge_1?form.badge=$click.value2$
   </link>
 </condition>

</drilldown>

The drilldown includes the following components to set a target and capture the clicked value.

Component	Drilldown behavior that this component configures	Details
field attribute in the <condition> element	Limits the selection to this field.	<condition field="badges">
Target form path	Open this form when users click a badges value in the source dashboard.	/app/foursquare_vegas/vegas_badge_1/
Token names and values	Show customized content in the target form.	?form.badge=$click.value2$ Set the form.badge token in the target form to the multivalue field $click.value2$ that the user clicks in the source dashboard.

Complete dashboard source code

<dashboard>
  <label>Demo: drilldown</label>
  <row>
    <panel>
    <table>
      <searchString>
        index=foursquare checkin.primarycategory.nodename=*
        | spath output=venue path=checkin.venue.name
        | spath output=badges path=checkin.badges{}.name
        | eval link="Yelp Search"
        | stats count as checkins sparkline values(badges)
              as "badges" values(link) as "links" by venue
        | sort -checkins
      </searchString>
      
      <format field="sparkline" type="sparkline">
        <option name="type">bar</option>
        <option name="height">30</option>
        <option name="barColor">green</option>
        <option name="colorMap">
          <option name="5:9">yellow</option>
          <option name="10:">red</option>
        </option>
      </format>
      <title>Top Venues</title>

      <drilldown>

         <!-- Mulitvalue field drilldown -->
         <condition field="badges">
           <link >
             /app/foursquare_vegas/vegas_badge_1?form.badge=$click.value2$
           </link>
         </condition>   
   
         <condition field="venue">
           <link>
             /app/foursquare_vegas/vegas_venue_1?form.venue=$row.venue$
           </link>
         </condition>   

         <condition field="links">
          <link>
            http://www.yelp.com/search?find_desc=$row.venue$&find_loc=Las+Vegas,+NV
          </link>
         </condition>   
      </drilldown>
      
    </table>
    </panel>
  </row>  
</dashboard>

Most of the searches access data available from the Search Tutorial. If you want to download the data from the Search Tutorial to create the dashboards from these examples, see Get the tutorial data into your Splunk deployment.