Have searchbar same as dashboard in my custom kibana react plugin(7.6.2)

Elastic Stack Kibana
1

Hi,
I want to have same searchbar as dashboard in my custom react plugin which I have created using kbn-plugin-generator. Any possible ways it can be done in Kibana 7.6.2?

2

Hi there!

You can use this same search bar! The "data" plugin provides an API for this search bar. To get access to it, you'll first need to add "data" to your list of requiredPlugins in the kibana.json file of your plugin. Then you'll be able to access the component, an example:

// relative paths assume your plugin is in the ./plugins directory
import { DataPublicPluginStart } from '../src/plugins/data/public';

class MyPlugin {
  setup(core) {
    core.application.register({
      id: 'myApp',
      async mount(context) {
        const [coreStart, pluginsStart] = await core.getStartServices();
        const { SearchBar } = pluginsStart.data.ui;
        // Use the SearchBar component in your app
        ReactDOM.render(<SearchBar />, context.element);
        return () => { ReactDOM.unmountComponentAtNode(element); };
      }
    );
  }
}

While we don't have any documentation on this component right now, it is fully typed with TypeScript and the available props are defined here: https://github.com/elastic/kibana/blob/7.6/src/plugins/data/public/ui/search_bar/search_bar.tsx

3

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