How can I extend a Ui component JavaScript in Magento 2?

Question

I know there is already a topic about this, as well as a documentation, but I just can't get it to work:

How can I extend Ui Components' JavaScript in Magento 2?

I'm trying to extend Magento_Ui/js/form/form (located in vendor/magento/module-ui/view/base/web/js/form/form.js).

So I added requirejs-config.js In my modules' view/base-folder:

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
        }
    }
};

And in my file base/web/js/form/form.js:

define([
  "Magento_Ui/js/form/form"
], function(FormComponent){
  "use strict";

  /**
   * Rewrite original UI Component:
   */
  return FormComponent.extend({});
});

But for some reason, FormComponent is not the UI Component I'm trying to extends, but undefined.

According to the documentation, this should work, but it doesn't. So what am I missing here?

Please, describe your task, because I think that you don't need to override core form component. Looks like your component require itself because there is map in require config — Max
– Max, Commented Jan 11, 2017 at 20:31
@MaxStsepantsevich Well, it's related to my other question: magento.stackexchange.com/questions/154201/… I have dynamically added upload fields and I want to have those submitted as well when I save my form. — Giel Berkers
– Giel Berkers, Commented Jan 12, 2017 at 8:39

Aaron Allen · Accepted Answer · 2017-01-27 02:56:07Z

This can be accomplished using a requirejs "mixin".

First create Your_Module/view/base/requirejs-config.js with this code:

var config = {
    'config': {
        'mixins': {
            'Magento_Ui/js/form/form': {
                'Your_Module/form-hook': true
            }
        }
    }
};

Now make the file Your_Module/view/base/web/form-hook.js :

define([], function () {
    'use strict';

    return function (Form) {
        return Form.extend({
            initialize: function () {
                this._super();
                console.log('Hello from the mixin!');
            }
        });
    }
});

This example extends the initialize method of the form component.

You can read more about "mixins" here: http://alanstorm.com/the-curious-case-of-magento-2-mixins/

Mykhailo Shatilov · Accepted Answer · 2017-01-26 20:41:30Z

1

I had a similar problem and I solved it.

Try to find declaration of ui component in code and replace it. For example:

Magento_Checkout: LayoutProcessor.php

private function processPaymentConfiguration(array &$configuration, array $elements)

...
$output[$paymentCode . '-form'] = [
    'component' => 'Vendor_Module/js/view/billing-address',

P.S. Don't use this:

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
        }
    }
};

answered Jan 26, 2017 at 20:41

Mykhailo Shatilov

5506 silver badges23 bronze badges

Add a comment |

Rafael Corrêa Gomes · Accepted Answer · 2022-02-02 23:22:35Z

0

The issue seems to be caused by the map in your requirejs-config.js. I follow this method below, mentioned in the DevDocs.

1 - Create your custom Ui Component file

It can be inside one of these folders below, depending on if you're creating a module or theme customization.

Theme: <theme_dir>/web/js or <theme_dir>/<VendorName>_<ModuleName>/web/js

Module: <module_dir>/view/frontend/web/js

2 - Extend the default Ui Component

In your Ui Component, you will have to extend and call the default component, as the code below.

define([
  'Magento_Ui/js/default/component/path/here'
], function(DefaultComponentExample){

  return DefaultComponentExample.extend({

    defaults: { ... }, // properties with default values
    ... // methods of your component
  });
});

answered Feb 2, 2022 at 23:22

Rafael Corrêa Gomes

14k15 gold badges93 silver badges192 bronze badges

Your component code doesn't work because when you replace "Magento_Ui/js/form/form" with "Vendor_Module/js/form/form" in your map, "Magento_Ui/js/form/form" will reference "Vendor_Module/js/form/form" in your JS component. It's a circular reference.

Mark Shust at M.academy
– Mark Shust at M.academy

2022-03-02 17:28:28 +00:00
Commented Mar 2, 2022 at 17:28

Add a comment |

Stack Exchange Network

How can I extend a Ui component JavaScript in Magento 2?

3 Answers 3

1 - Create your custom Ui Component file

2 - Extend the default Ui Component

Your Answer

Linked

Hot Network Questions

How can I extend a Ui component JavaScript in Magento 2?

3 Answers 3

1 - Create your custom Ui Component file

2 - Extend the default Ui Component

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions