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– Sohel Rana2016年05月05日 13:49:59 +00:00Commented 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– CarComp2016年05月05日 13:53:19 +00:00Commented May 5, 2016 at 13:53
-
1Check this -> github.com/magento/magento2-samples/tree/master/…Sohel Rana– Sohel Rana2016年05月05日 13:55:32 +00:00Commented 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– CarComp2016年05月05日 14:46:38 +00:00Commented 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.
Example:
initialize: function () {
this._super();
debugger;
return this;
}
See the M2 repo for examples of this.
Explore related questions
See similar questions with these tags.