Magento 2 Adminhtml menyebarkan formulir di banyak tab

42

Saya mencoba membuat modul backend, di mana pada halaman edit saya menggunakan admin-2column-lefttata letak.

Saya ingin memiliki formulir di setiap tab, tetapi saya tidak mengerti bagaimana saya bisa melakukan ini.
Idealnya, saya ingin tahu cara menetapkan formulir yang berbeda uiComponentsuntuk tab yang berbeda, atau bagaimana saya bisa menentukan satu uiComponentuntuk formulir saya, tetapi dapat menetapkan kumpulan bidang mana yang berjalan pada tab mana.

Situasi spesifik saya, yang memancing pertanyaan ini, adalah saya ingin memiliki formulir standar pada satu tab (input teks berganda), dan pada tab lain, saya ingin memiliki dynamicRowskomponen UI. Kami telah menyebut tab ini Item Utama dan Baris.

Saat ini, saya menerapkan ini sebagai berikut: Utama didefinisikan dalam _prepareFormmetode di dalam bloknya, yang merupakan ekstensi kelas Form\Generic. Formulir ini muncul dan berfungsi dengan baik sampai saya menambahkan baris dinamis.

File tata letak saya memiliki kode untuk menambahkan tab Utama dan menetapkan blok konten. Selain itu memiliki wadah bernama line_items, yang berisi uiComponentuntuk formulir yang berisi baris dinamis.

Tab Item Baris dibuat dalam _beforeToHtmlmetode Widget\Tab, dan kontennya ditetapkan dengan menggunakan panggilan ke getChildHtmlpada wadah line_items.

Tab berfungsi dan diisi dengan struktur yang benar, memungkinkan saya untuk menambah dan menghapus baris.

Masalahnya adalah ketika saya mengirimkan halaman, hanya input di tab Item Baris yang dikirimkan.

Jadi saya tahu saya belum mengatur ini dengan benar, dan perlu beberapa cara untuk menginstruksikannya untuk melacak dan mengirimkan semua elemen formulir. Sebagian besar implementasi ini berasal dari upaya saya untuk merekayasa balik pengaturan bentuk Atribut Produk Kategori, yang mirip dengan apa yang ingin saya lakukan.

Adakah yang tahu tentang itu?

magento2 adminhtml uicomponent backend adminform Stephen Fritz
sumber
Apakah Anda pernah memikirkan hal ini?
jamil
1
Stephen - Saya berasumsi bahwa Anda telah menemukan solusi setelah sekian lama? Jika demikian, bisakah Anda memperbarui ini dengan solusi Anda?
brentwpeterson
@Stephen Fritz - Bisakah Anda memberikan tangkapan layar bagaimana yang Anda cari?
Praful Rajput
Bolehkah saya bertanya apakah pertanyaan ini masih membutuhkan jawaban? Jika ya, saya dapat memverifikasi saya memahami masalahnya: apakah kita mencoba membuat layar backend dengan formulir terpisah di dalamnya? atau apakah layar dengan banyak tab (uiComponent fashion) menjadi solusi untuk masalah ini?
Herve Tribouilloy
1
@stephen Fritz - Cobalah untuk mengubah nama fieldset karena itu harus unik mungkin bertentangan di tempat lain. Saya telah menerbitkan dan menyelesaikannya dengan mengubah nama fieldset
Abdul Kadir

Jawaban:

0

Gunakan kode berikut untuk membuat tab dengan formulir tunggal menggunakan UI-Component

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">custom_form.custom_form_data_source</item>
        <!--This is for tab -->
        <item name="deps" xsi:type="string">custom_form.custom_form_data_source</item>
    </item>

    <!--following tag add the tab into form-->
    <item name="label" xsi:type="string" translate="true">Test Details</item>
    <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
   <item name="layout" xsi:type="array">
        <item name="type" xsi:type="string">tabs</item>
        <item name="navContainerName" xsi:type="string">left</item>
    </item>

</argument>

Buat elemen formulir

 <fieldset name="general">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">General Information</item>
        </item>
    </argument>

    <field name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">general</item>
                <item name="label" xsi:type="string">Name</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="dataScope" xsi:type="string">name</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
 </fieldset>
 <fieldset name="address">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Address and Contact</item>
        </item>
    </argument>
    <field name="address_line1">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">address</item>
                <item name="label" xsi:type="string">Address Line1</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="datatype" xsi:type="string">text</item>
                <item name="datascope" xsi:type="string">address_line1</item>
            </item>
        </argument>
    </field>

    <field name="address_line2">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">address</item>
                <item name="label" xsi:type="string">Address Line2</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="datatype" xsi:type="string">text</item>
                <item name="datascope" xsi:type="string">address_line2</item>
            </item>
        </argument>
    </field>
  </fieldset>

Kode ini akan menampilkan 2 tab pada formulir dengan bidang formulir terkait.

Semoga solusi ini berhasil untuk Anda

Mitro
sumber