Jak mogę dodać niestandardowe pole do formularza administratora w Magento 2?

9

Utworzyłem formularz w adminie przy użyciu składników interfejsu użytkownika, więc w mojej view/adminhtml/ui_component/[module]_[entity]_form.xmlmam następujące:

<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>

Teraz nie chcę, aby ta wartość była textarea, ale chcę utworzyć własną magię HTML w backendie dla tej wartości. Ta „HTML Magic” ostatecznie będzie dużą ilością JS / KnockOut, która pod wodą wciąż wysyła ukryte dane podczas publikowania formularza, więc musi być częścią formularza. Próbowałem dodać renderowany, dodając:

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

Ale nadal renderuje obszar tekstowy. Potem spróbowałem zastąpić formElementklasę niestandardową taką:

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

Ale wtedy pojawia się błąd:

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

Więc 2 pytania tutaj:

  1. Czy to właściwy sposób na dodanie niestandardowego elementu formularza do formularza administratora? (a jeśli tak: jak?)
  2. Niezależnie od wszystkiego: jak mogę dodać implementację? Przeglądam moduł interfejsu użytkownika, aby zobaczyć, jak to zrobili, ale nie mogę nic znaleźć.
Giel Berkers
źródło

Odpowiedzi:

10

Można sprawdzić moduł przykładowy Magento dostarczyły one

<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
źródło
Dzięki! dokładnie odpowiedź, której szukałem! Już szukałem \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()możliwości dodania niestandardowego komponentu za pomocą zdarzenia, ale jest to o wiele, wiele wygodniejsze! Naprawdę powinienem bardziej przyjrzeć się tym przykładom Magento 2.
Giel Berkers,
3

Nie jestem pewien, ale myślę, że shopping cart price ruledam ci podpowiedź, oto przykład

<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>

Aby uzyskać więcej informacji, możesz odwiedzić ten plik

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

Keyur Shah
źródło
Dzięki za wskazówkę! To wydaje się po prostu dodać blok treści HTML. Ale muszę utworzyć złożony element formularza, który ma dużo logiki KnockOut, która jest załadowana XHR.
Giel Berkers,
jak dodać niestandardowe pole do formularza edycji produktu w adminie?
jafar pinjar