Dashboards & Visualizations

How do you add a search bar without Advanced XML?

proletariat99
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

piUek
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

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

proletariat99
Communicator

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

0 Karma

piUek
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>

somesoni2
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

proletariat99
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
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...