Wie kann ich einem Administrationsformular in Magento 2 ein benutzerdefiniertes Feld hinzufügen?

9

Ich habe im Administrator ein Formular mit UI-Komponenten erstellt, daher habe view/adminhtml/ui_component/[module]_[entity]_form.xmlich Folgendes:

<field name="configuration">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Configuration</item>
            <item name="formElement" xsi:type="string">textarea</item>
            <item name="source" xsi:type="string">form</item>
            <item name="sortOrder" xsi:type="number">30</item>
            <item name="dataScope" xsi:type="string">configuration</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Jetzt möchte ich nicht, dass dieser Wert ein Wert ist textarea, aber ich möchte meine eigene HTML-Magie im Backend für diesen Wert erstellen. Diese 'HTML-Magie' wird irgendwann eine Menge JS / KnockOut sein, die unter Wasser beim Posten des Formulars immer noch einige versteckte Daten sendet, daher muss es Teil des Formulars sein. Ich habe versucht, ein gerendertes hinzuzufügen, indem ich Folgendes hinzufügte:

<item name="renderer" xsi:type="object">Vendor\Module\Block\Adminhtml\Renderer\Configurator</item>

Dies macht aber immer noch den Textbereich. Dann habe ich versucht, die formElementdurch eine benutzerdefinierte Klasse wie folgt zu ersetzen :

<item name="formElement" xsi:type="object">Vendor\Module\Component\Form\Element\Configurator</item>

Aber dann bekomme ich den Fehler:

The requested component ("Vendor\Module\Component\Form\Element\Configurator") is not found. Before using, you must add the implementation.

Also 2 Fragen hier:

Ist dies der richtige Weg, um einem Administratorformular ein benutzerdefiniertes Formularelement hinzuzufügen? (und wenn ja: wie?)
Unabhängig davon: Wie kann ich die Implementierung hinzufügen? Ich stöbere im UI-Modul, um zu sehen, wie sie es gemacht haben, aber ich kann nichts finden.

— Giel Berkers
quelle

10

Sie können das von ihnen bereitgestellte Magento-Beispielmodul überprüfen

<field name="color">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <!--component constructor-->
            <item name="component" xsi:type="string">Magento_SampleForm/js/form/element/color-select</item>
            <!--main template for form field that renders elementTmpl as a child template-->
            <item name="template" xsi:type="string">ui/form/field</item>
            <!--customized form element template that will show colors-->
            <item name="elementTmpl" xsi:type="string">Magento_SampleForm/form/element/color-select</item>
            <item name="label" xsi:type="string">Autumn colors</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">sampleform</item>
        </item>
    </argument>
</field>

— Priyank
quelle

Vielen Dank! genau die Antwort, die ich gesucht habe! Ich habe bereits \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()versucht, mithilfe eines Ereignisses eine benutzerdefinierte Komponente hinzuzufügen, aber das ist viel, viel bequemer! Ich sollte mir diese Magento 2-Beispiele wirklich genauer ansehen.

— Giel Berkers

3

Ich bin mir nicht sicher, aber ich denke, ich shopping cart price rulewerde Ihnen einen Hinweis dazu geben. Hier ist das Beispiel

<field name="stop_rules_processing">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">boolean</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="source" xsi:type="string">sales_rule</item>
                    <item name="prefer" xsi:type="string">toggle</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">0</item>
                    </item>
                    <item name="default" xsi:type="number">0</item>
                    <item name="label" xsi:type="string" translate="true">Discard subsequent rules</item>
                </item>
            </argument>
        </field>
        <container name="actions_apply_to" >
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">Magento\SalesRule\Block\Adminhtml\Promo\Quote\Edit\Tab\Actions</argument>
            </htmlContent>
        </container>

Für weitere Details können Sie diese Datei besuchen

\vendor\magento\module-sales-rule\view\adminhtml\ui_component\sales_rule_form.xml

— Keyur Shah
quelle

Danke für den Tipp! Dies scheint nur einen Block von HTML-Inhalten hinzuzufügen. Aber ich muss ein komplexes Formularelement erstellen, das viel KnockOut-Logik enthält, die mit XHR geladen ist.

— Giel Berkers

Wie füge ich ein benutzerdefiniertes Feld zum Produktbearbeitungsformular in admin hinzu?

— Jafar Pinjar