# How to acess search bar query string in kibana custom plugin

**URL:** <https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864>\
**Category:** Kibana\
**Created:** [January 26, 2017, 8:27am UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864 "2017-01-26T08:27:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [January 26, 2017, 8:27am UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/1 "2017-01-26T08:27:22Z")

</div>

Hi to all,  
I have been learning kibana visualization development from @timroes and @JuanCarniglia blogs and plugin.  
I am currently developing kibana-4.4.1 visualization plugin and i need to apply big search bar (at the top on kibana dashoard and above filter\_bar) query string and also extract date range filter applied on a kibana dashboard. Anyone please help.

---

<div class="post-metadata">

**Author:** ![shaunak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/shaunak/32/6643_2.png) [@shaunak](https://discuss.elastic.co/u/shaunak)\
**Post date:** [January 26, 2017, 1:29pm UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/2 "2017-01-26T13:29:38Z")

</div>

Hi @tarun_kumar,

About the search bar, may I ask why you are unable to simply use the filter bar itself? It is also capable of doing text searches. Providing two search/filter bars on the same page might be a confusing UX for the user.

To extract the date range filter applied to the dashboard, look into using the [`timefilter`](https://github.com/elastic/kibana/blob/master/src/ui/public/timefilter/timefilter.js) Angular service provided by Kibana. Once injected, you can call its [`getBounds`](https://github.com/elastic/kibana/blob/master/src/ui/public/timefilter/timefilter.js#L96) method to get an object with `min` and `max` properties. You can see an example usage [here](https://github.com/elastic/kibana/blob/master/src/ui/public/courier/fetch/strategy/search.js#L25-L26).

---

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [January 27, 2017, 8:26am UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/3 "2017-01-27T08:26:17Z")

</div>

Hi @shaunak sir,  
Thanks a lot for your reply. I am sorry I couldn't put my question correctly.  
What I actually meant was that I wish to extract/retrieve existing search bar query string and date range filter into my visualization plugins so that I could use them to get filtered response from REST service that I am using to populate my kibana plugin visualizations.

I wish I am clear enough this time.

Best regards  
Tarun kumar

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [February 6, 2017, 2:58pm UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/4 "2017-02-06T14:58:57Z")

</div>

I haven't attempted to reuse the search bar yet, but I have reused the date/time picker. You will want to dive into the Kibana code and look closely at what it needs to work correctly. Everything I know is from looking at the Discover built-in plugin.

Basically you will want to use the kbn-top-nav directive:

```auto
<kbn-top-nav name="myapp" config="ctrl.topNavMenu">

```

I have my configuration unset, but you can look at the Discover plugin to see what that sends in. The one hidden nugget is that directive needs something in $scope of it's parent (sad day Angular again).

First inject the `timefilter` dependency into your controller. Attach that to scope: `$scope.timefilter = timefilter`. That will expose things that the directive needs. You can then get the time range from that timefilter:

In my case I do gte and lte for all picks:

```auto
import dateMath from '@elastic/datemath';
...
    this.timeRange = {
      gte: dateMath.parse(this.timefilter.time.from),
      lte: dateMath.parse(this.timefilter.time.to, true)
    };

```

For specifics you need to look at the code base for that directive directly. Basically reverse engineer it to see what it needs and what it returns.

I haven't found much documentation around these super internal bits of the codebase. So guess/check and experimentation is the best way. And no one will slap your hand if you copy/paste things that work from the built in plugins 🙂

---

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [February 9, 2017, 4:18pm UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/5 "2017-02-09T16:18:45Z")

</div>

Thanks a lot @Kikketer and @shaunak  
With your help I am now able to extract timefilter by injecting timefilter into controller and getBounds() gives me from & to time as well.  
But I am still not able to exract query in search bar.  
Mean time i would extract query from window.location.href and apply a watcher on it.  
But thats a bad solution sadly.  
@spalger would you please help me extracting search query in search bar in my visualization.

---

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [February 13, 2017, 12:17pm UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/6 "2017-02-13T12:17:29Z")

</div>

Thanks a lot all,  
Below is solution for query\_string from query Search field. state.query would give me the query\_string as :

> ```
> $scope.$watch(getAppState, function (appState) {
> $scope.state = appState;
> 
> ```

> ```
> console.log("printing $state here WATCHER...");
> console.log($scope.state);
> console.log($scope.state.query.query_string.query);
> console.log();
> },true);
> 
> ```

getAppState service would be needed to injected to Controller like timefilter.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 13, 2017, 12:17pm UTC](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/7 "2017-03-13T12:17:40Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.