How to add an action button or meta data to the product edit form¶
In this cookbook, we will go through each step needed to achieve this task. Our scenario will be pretty simple: we need to add a button to download our product in csv (like an extra small quick export on the grid). We will assume that we can call a backend action performing this action for us.
Ok? Let’s go!
How to add a button¶
First, we need to create our button:
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 28 29 30 31 32 | 'use strict';
/*
* /src/Acme/Bundle/EnrichBundle/Resources/public/js/product/form/export-csv.js
*/
define(
[
'underscore',
'pim/form',
'text!pim/template/product/export-csv',
'routing'
],
function (
_,
BaseForm,
template,
Routing
) {
return BaseForm.extend({
className: 'btn-group',
template: _.template(template),
render: function () {
this.$el.html(
this.template({
path: Routing.generate('acme_csv_product_export', {id: this.getFormData().meta.id})
})
);
return this;
}
});
}
);
|
With its attached template:
1 2 3 4 5 | # /src/Acme/Bundle/EnrichBundle/Resources/public/templates/product/export-csv.html
<a class="btn no-hash btn-download" href="<%= path %>">
<i class="icon-csv"></i>
<%= _.__('pim_enrich.entity.product.btn.csv_export') %>
</a>
|
Now we need to register it in the requirejs configuration:
1 2 3 4 5 6 | # /src/Acme/Bundle/EnrichBundle/Resources/config/requirejs.yml
config:
paths:
pim/product-edit-form/export-csv: pimacme/js/product/form/export-csv
pim/template/product/export-csv: pimacme/templates/product/export-csv.html
|
And add it to our product form:
1 2 3 4 5 6 7 8 | # /src/Acme/Bundle/EnrichBundle/Resources/config/form_extensions/product_edit.yml
extensions:
pim-product-edit-form-export-csv: # The form extension code (can be whatever you want)
module: pim/product-edit-form/export-csv # The requirejs module we just created
parent: pim-product-edit-form # The parent extension in the form where we want to be registered
targetZone: buttons
position: 90 # The extension position (lower will be first)
|
You can now clear your cache and admire your brand new button!
How to add a meta section¶
The process of adding a meta information in the product edit form is really similar to adding a button:
As before, we will add our meta section and register it:
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 28 29 | 'use strict';
/*
* /src/Acme/Bundle/EnrichBundle/Resources/public/js/product/form/meta/export-status.js
*/
define(
[
'underscore',
'pim/form'
],
function (
_,
BaseForm
) {
return BaseForm.extend({
tagName: 'span',
template: _.template('<span><%= exportStatus %></span>'),
render: function () {
this.$el.html(
this.template({
//let's asume that export_status is provided by the backend during normalization for example
exportStatus: this.getFormData().meta.export_status
})
);
return this;
}
});
}
);
|
Now, we need to register it in the requirejs configuration:
1 2 3 4 | # /src/Acme/Bundle/EnrichBundle/Resources/config/requirejs.yml
config:
paths:
pim/product-edit-form/meta/export-status: pimacme/js/product/form/meta/export-status
|
And add it to our product form:
1 2 3 4 5 6 7 8 | # /src/Acme/Bundle/EnrichBundle/Resources/config/form_extensions/product_edit.yml
extensions:
pim-product-edit-form-meta/export-status: # The form extension code (can be whatever you want)
module: pim/product-edit-form/meta/export-status # The requirejs module we just created
parent: pim-product-edit-form # The parent extension in the form where we want to be regisetred
targetZone: meta
position: 90 # The extension position
|
As always, don’t forget to clear your cache to see your new metadata!