2

I want to add UI component Vendor/Module/view/base/web/js/modal.js

define([
    'jquery',
    'Magento_Ui/js/modal/modal'
], function ($, Modal) {
    return Modal.extend({...});
});

directly to the customer edit form (Vendor/Module/view/adminhtml/ui_component/customer_form.xml):

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">    

</form>

What should I write in customer_form.xml in this case?

  • As I know, customer_form.xml is used for Admin. Are you going to change the Admin customer form? – Khoa TruongDinh Nov 11 '17 at 5:55
  • Yes, I want to change admin customer form. I want to add modal component to it. – Alex Gusev Nov 13 '17 at 13:21
2

OK, I have some solution. First off all I need to add new UI component to the page layout:

.../view/adminhtml/layout/customer_index_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="vndr_accounts_customer_modal"/>
        </referenceContainer>
    </body>
</page>

then I should create UI component description:

.../view/adminhtml/ui_component/vndr_accounts_customer_modal.xml

<?xml version="1.0" encoding="UTF-8"?>
<modal xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"
       name="vndr_accounts_customer_modal"
       template="templates/customer/modal">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Vendor_Module/js/customer/accounting</item>
        </item>
    </argument>
    <dataSource name="vndr_accounts_customer_modal_ds">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">\Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">vndr_accounts_customer_moda_ds</argument>
        </argument>
    </dataSource>
</modal>

I need to describe template & data source or I will get an errors on the page.

Template:

.../view/adminhtml/ui_component/templates/customer/modal.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_template.xsd">
    <div id="modal_panel_placeholder"></div>
</div>

HTML from this template will be placed under "Customer Form" code.

JS code for UI component:

.../view/adminhtml/web/js/customer/accounting.js

define([
    'jquery',
    'uiComponent'
], function ($, Component) {
    var result = Component.extend({
        applyAction: function() {
            alert('Done!');
        }
    });
    return result;
});

Add action button to the Customer Form:

.../view/adminhtml/ui_component/customer_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="buttons" xsi:type="array">
            <item name="vndrAccounting" xsi:type="string">Venodr\Module\Block\Customer\Adminhtml\Edit\AccountingButton</item>
        </item>
    </argument>
</form>

Create button itself:

.../Block/Customer/Adminhtml/Edit/AccountingButton.php

class AccountingButton
    extends \Magento\Customer\Block\Adminhtml\Edit\GenericButton
    implements \Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface
{
    public function getButtonData()
    {
        $data = [
            'label' => __('Accounting'),
            'id' => 'customer-edit-vndr-accounting',
            'on_click' => "require('uiRegistry').get('vndr_accounts_customer_modal.vndr_accounts_customer_modal').applyAction()"
                ];
        return $data;
    }
}

I use uiRegistry 'God Object' on the front to get my ui-component and to fire action.

require('uiRegistry').get('vndr_accounts_customer_modal.vndr_accounts_customer_modal').applyAction()

Please, get me know if you have a shorter way to achieve the same result.

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.