Plugin as navbarExtension

[valereds]

Hi all,
I' m trying to make a navbarExtension plugin but don't know why I can't see it in the localMenu.
The structure of plugins is:

Inside my index.js I'm going to return a navbarExtensions plugin, like this:

export default function (kibana) {
  return new kibana.Plugin({
    uiExports: {
      navbarExtensions: ['plugins/my-navbar-ext/zoom']
    }
  });
};

And in my zoom.js file I'm going to register it:

const navbarExtensions = require('ui/registry/navbar_extensions');

function ZoomButtonProvider() {
  return {
    appName: 'my-navbar-ext',
    key: 'zoom-out-button',
    label: 'Zoom Out',
    run: () => { alert('This is a test'); },
  };
}

navbarExtensions.register(ZoomButtonProvider);

Can anyone help me?

ps. I'm using Kibana 5.1.2 version

[Joe_Fleming]

I posted this a while ago as a reply to another question, which is a pretty comprehensive guide to creating navbarExtensions: Dev on Kibana plugin: navbar icon disappear when switching tabs. Your code here looks almost exactly the same as what I posted there, so perhaps you already found that ;).

The problem here is with the appName in your provider. From that thread:

You will need to define, at a minimum, an appName (the name of the app to inject into), a unique key, and I'd encourage you to add a label too since it'll display that text then, which can be more user-friendly.

appName is actually the name of the app you are trying to inject the button into, not the name of your app. So, for example, if you are trying to add a button to the Discover app, you would use discover, as that's the name attribute used in the kbn-top-nav directive. If you'd like to inject a navbar button into another app, refer to its kbn-top-nav use, and set the appName in your provider to match the name used in the template.

Most of the names are exactly what you would expect them to be. discover, visualize, dashboard, devtools... and it's pretty easy to look up by just searching the codebase for the kbn-top-nav directive. Just keep in mind that you have to register a nav control for every app you want to put a button in.

[valereds]

Hi @Joe_Fleming, in fact after debuggin my code I found that the problem was appName.
Changed it to dashboard and I have it on the dashboard app navbar.
Thank you again for the answer, hope this will be helpfull for someone in the future.

[whoami]

@valereds

const navbarExtensions = require('ui/registry/navbar_extensions');

function ZoomButtonProvider() {
return {
appName: 'my-navbar-ext',
key: 'zoom-out-button',
label: 'Zoom Out',
run: () => { alert('This is a test'); },
};
}

navbarExtensions.register(ZoomButtonProvider);

hi @valereds I try this in kibana 5.4, but I did not see any navbar in dashboard. could you please post a gif to explain where is the navbar

[valereds]

Hi @whoami,
this is the navbar in dashboard, with my zoom-out button.

[whoami]

@valereds thanks very much, could you please give a full example of this demo zoom-out plugin

[whoami]

everything is ok, thanks anymore. seems i have to clean the bundles optimized,

[valereds]

Yes you're right. Firstclean the optimized bundles if you make changes...