How to add custom Js code in a “dynamic-rows” component?
-
03-10-2020 - |
Question
I'm creating a module that uses a dynamic-rows
component similar to the one used for advanced pricing in the product add/edit form.
I need to add some custom javascript code when the new row is added to the list of existing rows (Add button is clicked).
A simple alert('Good Job!')
should do it. I can take it from there.
I don't want to bore you with my custom code because that's not important for now.
So I am asking...
How can I add a js alert when pressing the add button?
I don't mind if your recommendations suggest a core edit. I know how to adapt it to my own module (I think).
I just need a place to start.
[Edit].
I realized I didn't add any code.
The code for the advanced pricing dynamic rows can be found here
Solution
First, we decided to use events that can be activated on a button hit. However, nothing happened when we added a child. We checked this by adding the event console.log() class to the static:
pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/core/events.js
/**
* Calls callback when name event is triggered.
* @param {String} events
* @param {Function} callback
* @return {Object} reference to this
*/
on: function (events, callback, ns) {
var iterator;
if (arguments.length < 2) {
ns = callback;
}
console.log('events: ');
console.log(events);
iterator = addHandler.bind(null, this, ns);
_.isObject(events) ?
_.each(events, iterator) :
iterator(callback, events);
return this;
},
and added a log to the processingAddChild dynamic-rows
method:
pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/dynamic-rows/dynamic-rows-grid.js
processingAddChild: function (ctx, index, prop) {
console.log('processingAddChild fire');
if (this._elems.length > this.pageSize) {
return false;
}
this.showSpinner(true);
this.addChild(ctx, index, prop);
console.log('processingAddChild END\'S');
},
Some additional options that you may think of:
- Replace this button for your own with a js-component expanding this button. Hence, you'll get full control over it.
- Use simple events like click for home-elements (probably, not the best decision).
- Replace a js-component for a dynamic row for your own and add the
code you need at the beginning of the
processingAddChild
method processing and then call the parent method(this._super())
.
The first and third options look like the best solution if you need to add your own elements and not to modify the existing Magento code.