Example: Search controls using tokens in HTML dashboards

Was this page helpful?

On this page

Splunk does not recommend converting Simple XML dashboards to HTML. This documentation is provided for legacy apps.

This example uses a converted HTML Dashboard to sync search controls to a search manager using token variables.

example

This example shows the modified code (which is highlighted) for a converted HTML dashboard, and the Simple XML code for the original dashboard.

To view this dashboard:

Copy the HTML code, find and replace "APP_NAME" with your app name, then save the HTML file under an existing app in $SPLUNK_HOME/etc/apps/<app_name>/local/data/ui/html/.
Refresh the Splunk Web server by going to http://<localhost:port>/debug/refresh and clicking Refresh.
In Splunk Web, view the dashboard in your app. For example, to view myexample.html in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.

To recreate the example:

Save the XML file under an existing app in $SPLUNK_HOME/etc/apps/<app_name>/local/data/ui/views/.
Refresh the Splunk Web server by going to http://<localhost:port>/debug/refresh and clicking Refresh.
In Splunk Web, open the dashboard in your app. For example, to view myexample.xml in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.
Click ..., then click Convert to HTML.
Click Shared for Permissions, click Convert Dashboard, then click Edit HTML.
Modify the HTML as shown in the example code, then click Save.

searchcontroltokens_html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Search controls, tokens (HTML, after2)</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@f4c1eb50e0f3/css/build/bootstrap.min.css" />
...

searchcontroltokens.xml

<dashboard>
  <label>Search controls, tokens</label>
  <row>
    <panel>
      <table>
        <search>
          <query>index=_internal | head 100</query>
          <earliest>0</earliest>
...