Magento 2のボタンを追加する

Question

カスタマーアドレスフォームにボタンを追加しようとしています。しかし、customer_form.xmlファイルからそれをする方法がわかりません。誰かが私を提案してください。

ui_definition.xsdとui_components.xsdファイルにボタン制御を登録しましたが、それでもボタンの代わりにtextboxのように表示されています。

私のコードは

です

Magento / UI / etc / ui_definition.xsd

<xs:complexType name="definition">
        <xs:annotation>
            <xs:appinfo>Registering components in the system and basic setup</xs:appinfo>
            <xs:documentation>Registering components in the system and basic setup</xs:documentation>
        </xs:annotation>
        <xs:all>
            <!-- Components list -->
            <xs:element type="tab" name="tab"/>
            <xs:element type="dataSource" name="dataSource"/>
            <xs:element type="paging" name="paging"/>
            <xs:element type="massaction" name="massaction"/>
            ..... etc
            <!--Custom Button Start-->
            <xs:element type="button" name="button"/>
            <!--Custom Button End-->
        </xs:all>
    </xs:complexType>

.

magento / etc / ui_components.xsd

<!--Custom Button Start-->
    <xs:complexType name="button">
        <xs:complexContent>
            <xs:extension base="ui_element">
                <xs:choice minOccurs="0" maxOccurs="unbounded">
                    <xs:group ref="configurable"/>
                </xs:choice>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>
    <!--Custom Button End-->

.

と私はButton.php

からClass Magento/Ui/Component/Form/Elementを作成しました

<?php

namespace Magento\Ui\Component\Form\Element;

/**
 * Class Button
 */
class Button extends AbstractElement
{
    const NAME = 'button';

    /**
     * Get component name
     *
     * @return string
     */
    public function getComponentName()
    {
        return static::NAME;
    }
}

.

と最後にcustomer_form.xmlファイル

からフィールドを作成しました

<field name="button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">button</item>
                    <item name="formElement" xsi:type="string">input</item>
                </item>
            </argument>
        </field>

.

エラーなしで実行されていますが、ボタンではなくテキストボックスを表示します。私が間違って行ったところを教えてください。

Answer 1

私はそれが正しい方法であるとわからないが、それは私のために働いた

アプリ/コード/ Magento / UI /ビュー/ベース/ Web /テンプレート/ form / components / collection.html

<li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate">
          // put your code here

.

しかし最善の方法はここで直接変更されないのはあなたのカスタムモジュールでこのファイルを上書きすることができます。

このファイルを変更した後に、キャッシュフォルダと静的コンテンツをフラッシュし、grunt exec:backendコマンドを実行するのを忘れないでください。

Answer 2

これは完全な答えではなく、「右」の方向を向いているのが

Magento/Uiシステム内で呼び出すことができる一連の要素があります。これらはapp/code/Magento/Ui/Component/Form/Element/の下にあります。

デフォルトでは表示されます。

1. checkbox.php
2. input.php
3. multiline.php
4. multiselect.php
5. Radio.php
6. range.php
7. select.php
8. textarea.php

これらの要素は定義ファイルapp/code/Magento/Ui/view/base/ui_component/etc/definition.xmlに設定されています。たとえば、チェックボックスは次のようになります。

<checkbox class="Magento\Ui\Component\Form\Element\Checkbox">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/field</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
            </item>
        </item>
    </argument>
</checkbox>

.

私の迅速な周りから見ることができるものから、この種の定義を介してあなた自身のタイプを追加することは可能であるでしょう。ここであなた自身の要素テンプレートを追加する必要があるでしょう、デフォルトはapp/code/Magento/Ui/view/base/web/templates/form/element/*.html

の下にあります。

Definition.xmlファイルが次のようにDIを介して追加されていることがわかります。

<virtualType name="uiDefinitionFileCollector" type="Magento\Framework\View\Element\UiComponent\Config\FileCollector\AggregatedFileCollector">
    <arguments>
        <argument name="searchPattern" xsi:type="string">etc/definition.xml</argument>
    </arguments>
</virtualType>

.

では、独自のDefinition.xmlファイルをモジュールに追加することができ、ピックアップされます。

申し訳ありませんがこれは完全な答えではありませんが、「右」の方向に良いスタートをしてください。

Answer 3

私は今日書かれました。

MixInを設定するには、mixin

をホストするモジュールのビュー/ベースフォルダにrequirejs-config.jsファイルを作成します。

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/form/components/collection': {              
            'Mbs_AddButtonInCustomerAddressForm/js/address/collection':true
            }
        }
    }
}

.

その後、上記のMIXINで定義されているJSファイルでは、モジュールのテンプレートを使用するようにテンプレートを上書きすることができます

JSファイルのサンプルは以下のとおりです。

define([], function () {
    'use strict';

    return function (addressCollection) {
        const orig = addressCollection.defaults;
        orig.template = 'Mbs_AddButtonInCustomerAddressForm/collection';
        orig.buttonExtraLabel = 'Click Me';

        return addressCollection;
    }
});

.

最後にカスタムテンプレートでは、ボタンを追加できます。

このソリューションはMagentoからコアファイルに触れませんので、Magento

からのさらなるリリースに準拠しています。

URLキーとURLの書き換え方法を示すフルコードリポジトリがあります。 https：// bitbucket・.ORG / MAGSTAGING / ADDBUTTONINCUSTOMERADDRESSFORM