# Inject front end code into Discover from custom plugin

**URL:** <https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871>\
**Category:** Kibana\
**Created:** [January 26, 2017, 9:38am UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871 "2017-01-26T09:38:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ccrecana](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ccrecana/32/17142_2.png) [@ccrecana](https://discuss.elastic.co/u/ccrecana)\
**Post date:** [January 26, 2017, 9:38am UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/1 "2017-01-26T09:38:39Z")

</div>

It is possible to add custom functionality to kibana 5 discover within a custom plugin?  
I want to add new buttons in the table view and add logic for that button.

---

<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:54pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/2 "2017-01-26T13:54:03Z")

</div>

Hi Cosmin,

Currently, what you could do via a custom plugin, is to add a new tab for each of the rows in the Discover table. So, in addition to the `Table` and `JSON` tabs, you would be able to introduce a third tab where you could put in whatever UI you want.

I know that may not be ideal UX but if it's something you want to explore, take a look at the code in this core plugin that adds the `Table` and `JSON` tabs, as an example: [https://github.com/elastic/kibana/tree/master/src/core\_plugins/kbn\_doc\_views](https://github.com/elastic/kibana/tree/master/src/core_plugins/kbn_doc_views)

Cheers,

Shaunak

---

<div class="post-metadata">

**Author:** ![algheorghe](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@algheorghe](https://discuss.elastic.co/u/algheorghe)\
**Post date:** [February 6, 2017, 1:55pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/3 "2017-02-06T13:55:30Z")

</div>

Hello Shaunak,

I've been trying to do what you said and it worked fine, until I needed an external module packed with useful services for my plugin. Is there any way to inject custom NPM modules in a docView plugin (e.g.: angular-cookies)?

Thank you,  
Alin

---

<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:** [February 6, 2017, 2:20pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/4 "2017-02-06T14:20:42Z")

</div>

Hi @algheorghe,

I haven't tried this myself but have you tried npm installing your dependencies as part of your plugin's package.json, and then importing any modules from those dependencies in your plugin code? I _think_ Kibana will bundle those and make those available to your plugin.

Shaunak

---

<div class="post-metadata">

**Author:** ![algheorghe](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@algheorghe](https://discuss.elastic.co/u/algheorghe)\
**Post date:** [February 6, 2017, 2:33pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/5 "2017-02-06T14:33:24Z")

</div>

Yes, I did but it doesn't work. I will give you more context:

I am trying to write a docView plugin and I have successfully made my own dummy plugin based on your indications above. The problem I encountered was when I tried to import my own NPM modules which are actually Angular modules. For example, I have a NPM module which contains an Angular module which contains a service that makes http requests to some third-party. Until now, I wrote visTypes plugins and it worked fine since I used uiModules and added the Angular modules to my module dependency, but now it seems I don't have this possibility anymore. I tried to create a module with uiModules and create my docView directive there, but I received an Angular error that states "Unknown provider: $tooltipProvider".

I hope everything is clear now,  
Alin

---

<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, 3:09pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/6 "2017-02-06T15:09:57Z")

</div>

I'm thinking about doing a similar type of injection into the Discover plugin. Looking at this code you linked to, it seems to just export a `docViews` into the uiExports. I'm not familiar with that type [https://www.elastic.co/guide/en/kibana/current/development-uiexports.html](https://www.elastic.co/guide/en/kibana/current/development-uiexports.html) says that it registers with the `doc_views` registry.

I can wrap my head around `hacks`, `visTypes`, and `app`, but the others are somewhat unclear. If this doc viewer registers with `doc_views` registry, would we have to mess with the Discover code directly to add this view as a new tab?

I'm trying to have little to no change within that codebase as much as possible. I was initially planning on doing a `hack` that would search out the specific selectors within Discover and inject a bit of HTML. That way no direct change to Discover is needed.

Could you direct me to some more documentation or a bit of source code around how you would use this `doc_views` thing?

Thanks

---

<div class="post-metadata">

**Author:** ![algheorghe](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@algheorghe](https://discuss.elastic.co/u/algheorghe)\
**Post date:** [February 7, 2017, 7:51am UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/7 "2017-02-07T07:51:45Z")

</div>

Hello Chris,

As Shaunak pointed out, the link for the source code of where this type of plugin is used is: [https://github.com/elastic/kibana/tree/master/src/core\_plugins/kbn\_doc\_views](https://github.com/elastic/kibana/tree/master/src/core_plugins/kbn_doc_views)

There you can see how the `Table` and `JSON` docViews are registered. For start, you can copy-paste the code from one of them into a separate plugin folder and see how it works. From there on, you can make any change you want. It doesn't involve changing anything in the Kibana code and is good to be like that. The directive you register have access to the hole document/event/object and you can make any type of visualisation you would like.

I hope this helps,  
Alin

---

<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 7, 2017, 9:15pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/8 "2017-02-07T21:15:31Z")

</div>

Ah so what I gather is that by having registered a "document view" type of plugin, it'll automatically appear as a tab in Discover.

I assume other plugins also use those types as well. Pretty awesome!

---

<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 7, 2017, 9:15pm UTC](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871/9 "2017-03-07T21:15:31Z")

</div>

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