Dashboards & Visualizations

How do you add a search bar without Advanced XML?

Communicator

With advanced xml, it was easy to add a search bar by just adding a module:

<view>
  <label>Basic Search View</label>

  <!-- top nav chrome -->
  <module name="AccountBar" layoutPanel="appHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  ### this bit ############
  <!-- This module renders the search box -->
  <module name="SearchBar" layoutPanel="mainSearchControls">
  </module><!-- close SearchBar module -->
  #########################
</view>

So now that Advanced XML has gone byebye, how do you add a search bar? We are not interested in adding a "text field" or pre-defining the search, or re-creating the search bar from js elements, if possible. Does anyone know how to do this?

1 Solution

Path Finder

You can add search bar using SearchBarView either using django bindings (not recomended since it's marked as deprecated - http://docs.splunk.com/Documentation/Splunk/6.3.0/ReleaseNotes/Deprecatedfeatures) or javascript.

Below is the sample with javascript from SearchBarView documentation http://docs.splunk.com/DocumentationStatic/WebFramework/1.0/compref_searchbar.html

<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/searchbarview"
    ];
    require(deps, function(mvc) {
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var SearchBarView = require("splunkjs/mvc/searchbarview");

        // Create the search manager
        var mysearch = new SearchManager({
            id: "example-search",
            status_buckets: 300,
            required_field_list: "*",
            preview: true,
            cache: true,
            autostart: false, // Prevent the search from running automatically
            search: "index=_internal | head 500" 
        });

        // Create the searchbar
        var mysearchbar = new SearchBarView({
            id: "example-searchbar",
            managerid: "example-search",
            el: $("#mysearchbarview")
        }).render();

        // Listen for changes to the search query portion of the searchbar
        mysearchbar.on("change", function() {
            // Update the search query
            mysearch.set("search", mysearchbar.val());

            // Run the search (because autostart=false)
            mysearch.startSearch();
        });

        // Listen for changes to the built-in timerange portion of the searchbar
        mysearchbar.timerange.on("change", function() {
            // Update the time range of the search
            mysearch.search.set(mysearchbar.timerange.val()); 

            // Run the search (because autostart=false)
            mysearch.startSearch();
        })

</script>

View solution in original post

Splunk Employee
Splunk Employee

The Splunk Web Framework Toolkit app has the code and a working example for you to reference. Download and install the app from splunkbase.

Splunk Web Framework Toolkit app

Navigate to ‘Splunk Components’ -> ‘Search manager controls’. The first example shows code and a working search bar with timerange picker. The app also has a ton of other examples to learn from.

Here's the code from the app:

var SearchBarView = require("splunkjs/mvc/searchbarview");
new SearchBarView({
    id: "example-search-bar",
    managerid: "example-bar-search",
    el: $("#divToHangOn")
}).render();

var TableView = require("splunkjs/mvc/tableview");
new TableView({
    id: "example-table",
    managerid: "example-bar-search",
    pageSize: "5",
    el: $("#divToHangOn2") // seperate div
}).render();

var SearchManager = require("splunkjs/mvc/searchmanager");
new SearchManager({
    id: "example-bar-search",
    search: "index=_internal | head 100 | timechart count by sourcetype span=100s",
});    

// Hooking up events (both JavaScript and Django)
var manager = splunkjs.mvc.Components.getInstance("example-bar-search");
var searchbar = splunkjs.mvc.Components.getInstance("example-search-bar");
var timerange = searchbar.timerange;

searchbar.on("change", function() {
    manager.set("search", searchbar.val()); 
});

timerange.on("change", function() {
    manager.search.set(timerange.val()); 
});

Communicator

Thanks! That's really helpful. Definitely helps to have an example.

0 Karma

Path Finder

You can add search bar using SearchBarView either using django bindings (not recomended since it's marked as deprecated - http://docs.splunk.com/Documentation/Splunk/6.3.0/ReleaseNotes/Deprecatedfeatures) or javascript.

Below is the sample with javascript from SearchBarView documentation http://docs.splunk.com/DocumentationStatic/WebFramework/1.0/compref_searchbar.html

<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/searchbarview"
    ];
    require(deps, function(mvc) {
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var SearchBarView = require("splunkjs/mvc/searchbarview");

        // Create the search manager
        var mysearch = new SearchManager({
            id: "example-search",
            status_buckets: 300,
            required_field_list: "*",
            preview: true,
            cache: true,
            autostart: false, // Prevent the search from running automatically
            search: "index=_internal | head 500" 
        });

        // Create the searchbar
        var mysearchbar = new SearchBarView({
            id: "example-searchbar",
            managerid: "example-search",
            el: $("#mysearchbarview")
        }).render();

        // Listen for changes to the search query portion of the searchbar
        mysearchbar.on("change", function() {
            // Update the search query
            mysearch.set("search", mysearchbar.val());

            // Run the search (because autostart=false)
            mysearch.startSearch();
        });

        // Listen for changes to the built-in timerange portion of the searchbar
        mysearchbar.timerange.on("change", function() {
            // Update the time range of the search
            mysearch.search.set(mysearchbar.timerange.val()); 

            // Run the search (because autostart=false)
            mysearch.startSearch();
        })

</script>

View solution in original post

SplunkTrust
SplunkTrust

Unfortunately this is not possible with simple xml. See more details here

http://answers.splunk.com/answers/10746/add-a-search-bar-in-simple-dashboard.html

0 Karma

Communicator

Thanks. I'm not interested in using simpleXML. I should've been more explicit in my question. So is there a JavaScript or python object that you can instantiate to insert a toolbar?

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!