2

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.

  • Show your form class. – Sohel Rana May 5 '16 at 13:49
  • I'm extending the functionality of the admin customer form. I'm not creating a new one. This also compounds the problem. I updated my question to include what i'm attempting to accomplish. – CarComp May 5 '16 at 13:53
  • 1
    Check this -> github.com/magento/magento2-samples/tree/master/… – Sohel Rana May 5 '16 at 13:55
  • That is the best example I've seen so far. I'm running into issues getting my initialize function to run for Abstract.Extend. The debugger does trigger my breakpoint on the .Extend, but none of the functions run. I have a feeling I have a lot of learning to do. – CarComp May 5 '16 at 14:46
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.