topic How do you add a search bar without Advanced XML? in Dashboards & Visualizations

How do you add a search bar without Advanced XML?

proletariat99 — Fri, 02 Oct 2015 17:22:15 GMT

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?

Re: How do you add a search bar without Advanced XML?

somesoni2 — Fri, 02 Oct 2015 18:15:32 GMT

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

Re: How do you add a search bar without Advanced XML?

proletariat99 — Fri, 02 Oct 2015 21:35:08 GMT

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?

Re: How do you add a search bar without Advanced XML?

piUek — Mon, 05 Oct 2015 10:36:35 GMT

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>

Re: How do you add a search bar without Advanced XML?

shaskell_splunk — Thu, 08 Oct 2015 17:49:45 GMT

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()); 
});

Re: How do you add a search bar without Advanced XML?

proletariat99 — Fri, 09 Oct 2015 14:42:34 GMT

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