How to add a new page¶
In this document, we will see the basics on how to add a new page in Akeneo PIM. We will - create a new route to this page - fill this page with some information - create a link to this page
Create a new route¶
First, create a new back-end route to access your new page. Even if the routing is done by front-end, we keep the legacy route declarations in the back-end because they still are dumped from it.
# /src/Acme/Bundle/AppBundle/Resources/config/routing.yml
acme_custom_index:
path: /acme/custom/
Create the page content¶
Then, you have to create an empty page as a form extension. This will create a simple view with the default template.
# src/Acme/Bundle/AppBundle/Resources/config/form_extensions/custom-index.yml
extensions:
acme-custom-index:
module: pim/common/simple-view
config:
template: pim/template/common/default-template
Create the controller¶
Then, create your controller and register it. This controller will render a page form extension, with the extension declared above.
// /src/Acme/Bundle/AppBundle/Resources/public/js/controller/custom.js
'use strict';
define(['pim/controller/front', 'pim/form-builder'],
function (BaseController, FormBuilder) {
return BaseController.extend({
renderForm: function (route) {
return FormBuilder.build('acme-custom-index').then((form) => {
form.setElement(this.$el).render();
});
}
});
}
);
# /src/Acme/Bundle/AppBundle/Resources/config/requirejs.yml
config:
paths:
acme/custom: acmeapp/js/controller/custom
config:
pim/controller-registry:
controllers:
acme_custom_index:
module: acme/custom
Note
The name of the controller route (acme_custom_index) you defined in the controller registry has to be the same as the one you declared in back-end routes.
Link it¶
Finally, add a new item in the menu to access your page. You can have more information in How to customize the main menu.
# /src/Acme/Bundle/AppBundle/Resources/config/form_extensions/menu.yml
extensions:
pim-menu-custom:
module: pim/menu/tab
parent: pim-menu
position: 100
targetZone: mainMenu
config:
title: 'Custom'
iconModifier: iconCard
to: acme_custom_index
To view your changes, you have to dump new routes and rebuild assets:
$ bin/console pim:installer:dump-require-paths
$ bin/console pim:install:assets
$ bin/console assets:install --symlink
$ yarn run less
$ yarn run webpack
You will have your new item on the main menu, and when you click on it, it will display an empty page. You can now add some extensions with acme-custom-index as parent to display your custom elements.
Found a typo or a hole in the documentation and feel like contributing?
Join us on Github!