# Adding management plugin
**URL:** https://discuss.elastic.co/t/adding-management-plugin/102561
**Category:** Kibana
**Created:** [October 3, 2017, 1:25pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561 "2017-10-03T13:25:42Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@ENG618](https://discuss.elastic.co/u/ENG618)
#### Post date: [October 3, 2017, 1:25pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/1 "2017-10-03T13:25:42Z")
I'm trying to add a section to the management landing page. Similar to how xpack adds sections there with there own configuration pages. I could not find any documentation or examples of there. Something similar to the highlighted section below.
Is there somewhere I can read up on this and figure out how to do this?
I have seen [Stack Management | Kibana Guide [8.11] | Elastic](https://www.elastic.co/guide/en/kibana/current/management.html) which states
> This section is pluginable, so in addition to the out of the box capabitilies, packs such as X-Pack can add additional management capabilities to Kibana.
---
### Author:  [@lukas](https://discuss.elastic.co/u/lukas)
#### Post date: [October 4, 2017, 4:01pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/2 "2017-10-04T16:01:14Z")
We make no guarantees on this plugin API, but here's how you can currently do it:
In your plugin's index.js, under `uiExports`, add the following:
```auto
uiExports: {
managementSections: ['path/to/your/file']
}
```
Then inside this file, do something like the following:
```auto
import { management } from 'ui/management';
import routes from 'ui/routes';
management
.getSection('section')
.register('subsection', {
display: 'SubSection',
order: 5,
url: '#/management/section/subsection/'
});
routes.when('/management/section/subsection', {
controller: function () {
// ...
}
});
```
Let me know if that works!
---
### Author:  [@ENG618](https://discuss.elastic.co/u/ENG618)
#### Post date: [October 4, 2017, 10:46pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/3 "2017-10-04T22:46:03Z")
Looks like that is how it should be done, but it looks like the `section` isn't getting created with `management.getSection`
I'm getting an error in the browser of `Error: Uncaught TypeError: Cannot read property 'register' of undefined`
---
### Author:  [@ENG618](https://discuss.elastic.co/u/ENG618)
#### Post date: [October 5, 2017, 5:17pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/4 "2017-10-05T17:17:01Z")
Okay, ended up getting it to work by adding:
```auto
management.register('section', {
display: 'Section',
order: 40
});
```
prior to attempting to register the **subsection**
---
### Author:  [@ENG618](https://discuss.elastic.co/u/ENG618)
#### Post date: [October 10, 2017, 7:47pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/5 "2017-10-10T19:47:44Z")
What about adding the icon to the heading. I have tried passing in an icon when registering the management section but nothing ever displays there.
```auto
management.register('section', {
display: 'Section',
order: 40,
icon: 'plugins/plugin/assets/section_icon.svg'
});
```
---
### Author:  [@ENG618](https://discuss.elastic.co/u/ENG618)
#### Post date: [October 10, 2017, 8:23pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/6 "2017-10-10T20:23:40Z")
So ended up drilling down enough to figure out that it was set dynamically for the service in less.
so I added a less file with
```auto
.management-panel__heading-icon--section {
background-image: url("~plugins/plugin/assets/section_icon.svg");
}
```
where `section` is what was registered to management.
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [November 7, 2017, 8:24pm UTC](https://discuss.elastic.co/t/adding-management-plugin/102561/7 "2017-11-07T20:24:22Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.