Magento 2 Adminhtml การกระจายแบบฟอร์มในหลายแท็บ


43

ฉันกำลังพยายามสร้างโมดูลแบ็กเอนด์ซึ่งในหน้าแก้ไขของฉันฉันใช้admin-2column-leftเลย์เอาต์

ฉันต้องการมีแบบฟอร์มในแต่ละแท็บ แต่ฉันไม่เข้าใจว่าฉันจะทำสิ่งนี้ได้อย่างไร
โดยหลักการแล้วฉันต้องการทราบวิธีการกำหนดฟอร์มuiComponentsที่แตกต่างให้กับแท็บที่แตกต่างกันหรือฉันจะกำหนดหนึ่งuiComponentสำหรับฟอร์มของฉันได้อย่างไร แต่สามารถกำหนดชุดฟิลด์ใดให้ไปที่แท็บใดได้บ้าง

สถานการณ์เฉพาะของฉันซึ่งกระตุ้นคำถามนี้คือฉันต้องการมีแบบฟอร์มมาตรฐานในแท็บหนึ่ง (อินพุตข้อความหลายรายการ) และอีกแท็บหนึ่งฉันต้องการมีdynamicRowsองค์ประกอบ UI เราได้เรียกแท็บเหล่านี้เป็นรายการหลักและรายการโฆษณา

ขณะนี้ฉันกำลังดำเนินการดังต่อไปนี้: หลักถูกกำหนดไว้ใน_prepareFormวิธีการที่อยู่ในบล็อกของ บริษัท Form\Genericซึ่งเป็นส่วนขยายชั้นเรียน แบบฟอร์มนี้ปรากฏขึ้นและทำงานได้ดีจนกว่าฉันจะเพิ่มแถวแบบไดนามิก

ไฟล์เลย์เอาต์ของฉันมีรหัสเพื่อเพิ่มแท็บหลักและกำหนดบล็อกเนื้อหา เช่นกันมันมีชื่อคอนเทนเนอร์line_itemsซึ่งมีuiComponentรูปแบบที่มีแถวแบบไดนามิก

แท็บรายการโฆษณาถูกสร้างขึ้นใน_beforeToHtmlวิธีการของWidget\Tabและเนื้อหาที่ได้รับมอบหมายโดยใช้การโทรไปยังgetChildHtmlภาชนะ line_items

แท็บทำงานและบรรจุด้วยโครงสร้างที่ถูกต้องทำให้ฉันสามารถเพิ่มและลบแถวได้

ปัญหาคือเมื่อฉันส่งหน้าเฉพาะอินพุตในแท็บรายการโฆษณาเท่านั้นที่จะถูกส่ง

ดังนั้นฉันรู้ว่าฉันยังไม่ได้ตั้งค่าอย่างถูกต้องและต้องการวิธีที่จะสอนให้ติดตามและส่งองค์ประกอบแบบฟอร์มทั้งหมด การใช้งานส่วนใหญ่มาจากความพยายามของฉันในการย้อนกระบวนการออกแบบการตั้งค่าของหมวดหมู่คุณสมบัติผลิตภัณฑ์แบบฟอร์มซึ่งคล้ายกับสิ่งที่ฉันต้องการจะทำ

ใครมีความคิดเกี่ยวกับมัน


คุณเคยคิดเรื่องนี้ไหม?
jamil

1
สตีเฟ่น - ฉันสมมติว่าคุณได้พบทางออกหลังจากเวลานี้ทั้งหมดหรือไม่ ถ้าเป็นเช่นนั้นคุณสามารถอัปเดตสิ่งนี้ด้วยโซลูชันของคุณได้ไหม?
brentwpeterson

@Stephen Fritz - คุณช่วยระบุภาพหน้าจอที่คุณต้องการได้อย่างไร?
Rajput น่ายกย่อง

ฉันขอถามได้ไหมว่าคำถามนี้ยังต้องการคำตอบไหม? ถ้าเป็นเช่นนั้นฉันอาจยืนยันว่าฉันเข้าใจปัญหา: เรากำลังพยายามสร้างหน้าจอส่วนหลังที่มีรูปแบบแยกกันหรือไม่ หรือหน้าจอที่มีหลายแท็บ (uiComponent fashion) เป็นวิธีแก้ปัญหานี้หรือไม่?
Herve Tribouilloy

1
@stephen Fritz - โปรดลองเปลี่ยนชื่อ fieldset เพราะมันจะต้องไม่ซ้ำกันอาจเป็นความขัดแย้งที่อื่น ฉันได้ออกมาเหมือนกันและแก้ปัญหาโดยการเปลี่ยนชื่อ fieldset
Abdul Kadir

คำตอบ:


0

ใช้รหัสต่อไปนี้เพื่อสร้างแท็บที่มีรูปแบบเดียวโดยใช้ 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>

สร้างองค์ประกอบแบบฟอร์ม

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

รหัสนี้จะแสดง 2 แท็บในแบบฟอร์มที่มีช่องแบบฟอร์มที่เกี่ยวข้อง

หวังว่าวิธีนี้จะเหมาะกับคุณ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.