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:

], 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.


I've coded the following:


<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"
        <!-- add the code to make the customer admin not create dupes -->
        <link src="Stti_Customer::js/customer-admin.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 () {
            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
    Commented May 5, 2016 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
    Commented May 5, 2016 at 13:53
  • 1
    Check this -> github.com/magento/magento2-samples/tree/master/…
    – Sohel Rana
    Commented May 5, 2016 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
    Commented May 5, 2016 at 14:46

1 Answer 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.


initialize: function () {
    return this;

See the M2 repo for examples of this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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