Bagaimana saya bisa menambahkan bidang khusus ke formulir admin di Magento 2?

9

Saya telah membuat formulir di admin menggunakan komponen UI, jadi di saya, view/adminhtml/ui_component/[module]_[entity]_form.xmlsaya memiliki yang berikut:

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

Sekarang saya tidak ingin nilai ini menjadi textarea, tetapi saya ingin membuat sihir HTML saya sendiri di backend untuk nilai ini. 'HTML Magic' ini pada akhirnya akan menjadi banyak JS / KnockOut yang di bawah air masih mengirimkan beberapa data tersembunyi saat memposting formulir, sehingga harus menjadi bagian dari formulir. Saya mencoba menambahkan yang diberikan dengan menambahkan:

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

Tapi ini masih membuat textarea. Lalu saya mencoba mengganti formElementdengan kelas kustom seperti:

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

Tapi kemudian saya mendapatkan kesalahan:

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

Jadi 2 pertanyaan di sini:

  1. Apakah ini cara yang tepat untuk menambahkan elemen formulir kustom ke formulir admin? (dan jika demikian: bagaimana?)
  2. Apa pun yang terjadi: bagaimana saya bisa menambahkan implementasinya? Saya menggali melalui modul UI untuk melihat bagaimana mereka melakukannya, tetapi saya tidak dapat menemukan apa pun.
magento2 adminhtml uicomponent ui-form Giel Berkers
sumber

Jawaban:

10

Anda dapat memeriksa modul sampel magento yang telah mereka sediakan

<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
sumber
Terima kasih! persis jawaban yang saya cari! Saya sudah mencari \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()untuk menambahkan komponen khusus dengan menggunakan suatu acara, tetapi ini jauh, jauh lebih nyaman! Saya benar-benar harus melihat lebih dalam contoh-contoh Magento 2 itu.
Giel Berkers
3

Saya tidak yakin, tapi saya pikir shopping cart price ruleakan memberi Anda beberapa petunjuk tentang ini, di sini adalah contohnya

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

Untuk detail lebih lanjut Anda dapat mengunjungi file ini

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

Keyur Shah
sumber
Terima kasih atas tipnya! Ini sepertinya hanya menambah blok konten HTML. Tapi saya perlu membuat elemen bentuk kompleks yang memiliki banyak logika KnockOut di dalamnya yang dimuat dengan XHR.
Giel Berkers
cara menambahkan bidang khusus ke formulir edit produk di admin?
jafar pinjar