{% load splunkmvc %} Splunk Application Framework Quick Start
Back Next

Splunk Application Framework Quick Start

Add search results to table

Now that you have a search manager, let's show the results in a table. To do that, we'll create a Table view and bind it to the search manager. If the search is modified (for example, by using a SearchBar view to change the search query, or a TimeRange view to change the time range), the Table is notified and updated automatically.

Add a table

Like other views we've looked at so far, you'll add the Table view by using tags in your HTML templates. The view is bound to a search manager by setting its managerid property to the ID of the search manager. Then, the table is populated with the results of that search.

Here's an example:

{% table id="example-table" managerid="example-search" pageSize="5" %} {% searchmanager id="example-search" search="| inputlookup splunkdj.demo.dataset.csv | fields artist_name bytes clientip | rename _time as download_time "%}

Both the table and the search manager are declared in the app's HTML template using template tags:

{% table id="example-table" managerid="example-search" pageSize="5"%}

{% searchmanager id="example-search" search="| inputlookup splunkdj.demo.dataset.csv | fields artist_name bytes clientip | rename _time as download_time"   %} 

If a search bar and a table are bound to the same search manager, results of a search in the search bar will populate the table. Here is a searchbar and table bound to the same search manager. Try searching on your Splunk data and see how the table is updated.

{% searchbar id="example-searchbar" managerid="example-search2" timerange=False %} {% table id="example-table2" managerid="example-search2" pageSize="5" %} {% searchmanager id="example-search2" search="index=_internal | head 100"%}

The code required to do this is simple:

{ % searchbar id="example-searchbar" managerid="example-search" timerange=False % }
{ % table id="example-table" managerid="example-search" pageSize="5" %}
{ % searchmanager id="example-search" search="index=_internal | head 100"% }

<script>
    require(["splunkjs/ready!"], function() {
        var manager = splunkjs.mvc.Components.getInstance("example-search2");
        var searchbar = splunkjs.mvc.Components.getInstance("example-searchbar");
        
        searchbar.on("change", function() {
            manager.settings.unset("search", {silent: true});
            manager.settings.set("search", searchbar.val()); 
        });
    });
</script>
Back Next
{% component_loader %}