How to add a new tab in System / ConfigurationΒΆ
To add or override a tab in the System Configuration page, you can use our form extensions system. The first step is to create a form extension in your custom bundle. This new extension defines and registers a tab with a label and some content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 'use strict';
/*
* /src/Acme/Bundle/BlogBundle/Resources/public/js/configuration/tab.js
*/
define(['pim/form'],
function (BaseForm) {
return BaseForm.extend({
configure: function () {
this.trigger('tab:register', {
code: this.code,
isVisible: this.isVisible.bind(this),
label: 'My tab'
});
return BaseForm.prototype.configure.apply(this, arguments);
},
render: function () {
this.$el.html('<br> Hello world');
return this;
},
isVisible: function () {
return true;
}
});
}
);
|
Once you create your new tab extension, you have to register it in the requirejs.yml file for your bundle:
1 2 3 4 5 | # /src/Acme/Bundle/BlogBundle/Resources/config/requirejs.yml
config:
paths:
pim/configuration/tab: acme/js/configuration/tab
|
Now that your file is registered, you can add the extension to the Configuration page:
1 2 3 4 5 6 7 8 | # /src/Acme/Bundle/BlogBundle/Resources/config/form_extensions.yml
extensions:
oro-system-config-tab-acme:
module: pim/configuration/tab
parent: oro-system-config-tabs
targetZone: container
position: 110
|
To see your new tab in the Configuration page your need to clear the PIM cache and run webpack:
rm -rf ./var/cache/*
yarn run webpack
Found a typo or a hole in the documentation and feel like contributing?
Join us on Github!