Extend a default Ui component in adminhtml

magento.stackexchange https://magento.stackexchange.com/questions/114106

Question

Is there any good example code on how to work with RequireJS and knockoutJS (built into magento2) for adding additional functionality to fields in the admin side? I'm looking for Magento docs and google and this is about only thing I can find:

Extend a default UI component

To extend a default JS UI component, your custom script must contain the following:

define([
  '<component_path>'
], function(<component_alias>){

  return <component_alias>.extend({

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

Thats HARDLY an example. I can find tons of examples for the frontend, but magento backend doesn't rely as heavily on templates. Instead, forms are dynamically generated. I have my module configured, I have the /view/adminhtml/web/myjavascript.js containing the define, but I have no idea really what to inject, nor which functions to return.

EDIT: I'm extending the functionality of the Admin Customer Edit / Add form. I'm not creating new forms or any new areas. I'm trying to add on-blur type functionality to certain fields (name/email address) so our API can be called and check if the customer already exists in our main database and can be imported.

EDIT2:

I've coded the following:

My/Module/view/adminhtml/layout/customer_index.edit.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- add the code to make the customer admin not create dupes -->
        <link src="Stti_Customer::js/customer-admin.js"/>
    </head>
</page>

My/Module/view/adminhtml/web/js/customer-admin.js

require([
    'Stti_Customer/edit/edit-wrapper'
]);

My/Module/view/adminhtml/web/edit/edit-wrapper.js

define(['Magento_Ui/js/lib/core/element/element'],function(Element) {
    var BLAH = Element.extend({
        defaults: {
            test: "SOMEDATA"
        },

        /**
         * Invokes initialize method of parent class,
         * contains initialization logic
         */
        initialize: function () {
            debugger;
            return this;
        }
    });

    return BLAH;
});

When I set a breakpoint in the debugging console on the line declaring BLAH, it stops. The debugger command never runs. I know this define is executing but I am not sure why its never initializing for each Element on the customer form. I've tried abstract as well. I've tried uiComponent, Form, all sorts of injectors.

Was it helpful?

Solution

You are missing this._super(); from your initialize function. This calls the parent's function of the same name, so I believe it will run the initialize function of the UI Component. Without this your script will never initialise.

Example:

initialize: function () {
    this._super();
    debugger;
    return this;
}

See the M2 repo for examples of this.

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