Design the user interfaces
#How to add custom information to a field
Natively we add a lot of related information to product edit fields: data coming from a variant group, validation errors, etc. As an integrator, you can also add custom information for your own needs and we will go through each step to achieve this in this cookbook.
Let’s say that we want to display the minimum and maximum values allowed for a number field, for that we need to create a form extension listening to the pim_enrich:form:field:extension:add event:
'use strict';
/**
* src/Acme/Bundle/CustomBundle/Resources/public/js/product/form/attributes/number-min-max.js
*/
define(
[
'jquery',
'underscore',
'pim/form'
],
function ($, _, BaseForm) {
return BaseForm.extend({
configure: function () {
this.listenTo(this.getRoot(), 'pim_enrich:form:field:extension:add', this.addFieldExtension);
return BaseForm.prototype.configure.apply(this, arguments);
},
addFieldExtension: function (event) {
//The event contains the field and an array of promises. The field will wait for all the promises to be resolved before rendering.
//You can add a promise to this array to be sure that the field will wait for it before rendering itself
event.promises.push($.Deferred().resolve().then(function () {
var field = event.field;
if ('pim_catalog_number' === field.attribute.type) {
if (!_.isNull(field.attribute.number_min) && !_.isEmpty(field.attribute.number_min)) {
//To add html or a DOM element to a field, you can add the addElement method:
// addElement: function (position, code, element)
field.addElement(
'footer',
'number_min',
'<span>Min value: ' + field.attribute.number_min + '</span>'
);
}
if (!_.isNull(field.attribute.number_max) && !_.isEmpty(field.attribute.number_max)) {
//To add html or a DOM element to a field, you can add the addElement method:
// addElement: function (position, code, element)
field.addElement(
'footer',
'number_max',
'<span>Max value: ' + field.attribute.number_max + '</span>'
);
}
//You can also disable the field with the setEditable method of the field
//field.setEditable(false);
}
}.bind(this)).promise());
return this;
}
});
}
);
|
You can now register it in the requirejs configuration file:
# Acme/Bundle/CustomBundle/Resources/config/requirejs.yml
config:
paths:
acme/product-edit-form/attributes/number-min-max: acmecustom/js/product/form/attributes/number-min-max
And register your extension to the product edit form:
# Acme/Bundle/CustomBundle/Resources/config/form_extensions.yml
extensions:
pim-product-edit-form-number-min-max:
module: acme/product-edit-form/attributes/number-min-max
parent: pim-product-edit-form-attributes
targetZone: self
position: 100
To see your changes you need to clear the PIM cache and run webpack again:
rm -rf ./var/cache/*
yarn run webpack
Found a typo or a hole in the documentation and feel like contributing?
Join us on Github!