Overview of converting to HTML

A Simple XML dashboard consists of different types of visualizations: elements (such as tables, charts, maps, event viewers, and single views) and form inputs (such as radio buttons, text boxes, dropdowns, and time-range pickers). When an XML dashboard is converted into HTML, each visualization's layout, definition, and related searches are separated:

  • The layout is converted into Splunk's styles indicating how to place and format items on the page, similar to Bootstrap's grid system.
  • The definition of each visualization is converted into JavaScript. The code for each visualization includes its properties and an auto-generated ID.
  • Any search that is specified in a visualization is extracted and represented in JavaScript. The code for each search includes its properties and an auto-generated ID.

Here's a simple example that demonstrates the conversion of a visualization from XML to HTML. Let's start with a search that displays a result table:

index=_internal | head 5 | table host, source

When you save this search as a dashboard panel, the XML that is created for the table and title looks like this:

...
<row>
    <table>
        <title>Result table</title>
        <searchString>index=_internal | head 5 | table host, source</searchString>
    </table>
</row>
...

When converted to HTML, a layout is created that uses nested <div> tags to define a row containing a panel. The panel refers to the table's ID ("element1"), indicating that the table is displayed in that panel. The table's heading is also included in the panel. The HTML looks like this:

...
<div class="dashboard-row dashboard-row1">
    <div class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">
            <div class="panel-element-row">
                <!-- Display "element1" in this panel -->
                <div class="dashboard-element table" id="element1" style="width: 100%">
                    <div class="panel-head">
                        <h3>Result table</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
...

The definition of the table and the search that powers it are defined separately in JavaScript. Just as the table ID connects the layout to the table, the search ID ("search1") also connects the table to its search via the table's managerid property. Here's the JavaScript:

...

var search1 = new SearchManager({
    "id": "search1",               // This is the search ID
    "status_buckets": 0,
    "earliest_time": "$earliest$",
    "search": "index=_internal | head 5 | table host, source",
    "latest_time": "$latest$",
    "cancelOnUnload": true,
    "app": utils.getCurrentApp(),
    "auto_cancel": 90,
    "preview": true
}, {tokens: true, tokenNamespace: "submitted"});

...

var element1 = new TableElement({
    "id": "element1",              // This is the table ID
    "managerid": "search1",        // This connects the table to the search
    "el": $('#element1')
}, {tokens: true}).render();

...

Without knowing much more than this, you can edit the HTML to make simple customizations. For example, you can add your own CSS, or change the layout (the default styles and how to use them are described in Splunk dashboard styles). But if you want to customize the way these visualizations behave and interact, you'll need to learn more about the SplunkJS Stack component of the Web Framework.