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

Was it helpful?

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');
    },

The result: enter image description here

Some additional options that you may think of:

  1. Replace this button for your own with a js-component expanding this button. Hence, you'll get full control over it.
  2. Use simple events like click for home-elements (probably, not the best decision).
  3. 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.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top