Magento 2 Adminhtml跨多个选项卡分布表单


43

我正在尝试创建一个后端模块,其中在我的编辑页面上使用admin-2column-left布局。

我想在每个选项卡上都有一个表格,但是我不知道该怎么做。
理想情况下,我想知道如何将不同的表单分配uiComponents给不同的选项卡,或者如何uiComponent为表单定义一个表单,但是能够分配哪个字段集位于哪个选项卡上。

我的具体情况引发了这个问题,我想在一个选项卡上使用标准格式(多个文本输入),而在另一个选项卡上使用dynamicRowsUI组件。我们将这些标签称为“主要”和“订单项”。

目前,我正在按以下方式实现此目标:Main _prepareForm在其块中的方法中定义,该块是class extension Form\Generic。在添加动态行之前,此表单将显示并正常工作。

我的布局文件具有添加“主要”选项卡和分配内容块的代码。它还有一个名为的容器line_items,其中包含一个uiComponent用于包含动态行的表单的。

“订单项”标签是使用的_beforeToHtml方法创建的Widget\Tab,其内容是通过使用getChildHtml对line_items容器的调用来分配的。

该选项卡有效,并以正确的结构填充,使我可以添加和删除行。

问题是,当我提交页面时,仅提交了“行项目”选项卡中的输入。

所以我知道我没有正确设置它,需要某种方式来指示它跟踪和提交所有表单元素。此实现的大部分源于我对“类别产品属性”表单的设置进行反向工程的尝试,这与我想要执行的操作类似。

有人对此有想法吗?


你有没有解决这个问题?
jamil

1
斯蒂芬-我假设您在所有这些时间之后都找到了解决方案?如果可以,请使用您的解决方案对此进行更新?
brentwpeterson

@Stephen Fritz-您能提供一个屏幕截图吗?
Praful Rajput,

请问这个问题是否还需要答案?如果是这样,我可能会验证我理解问题所在:我们是否正在尝试构建包含单独表单的后端屏幕?还是具有多个选项卡的屏幕(uiComponent形式)可以解决此问题?
Herve Tribouilloy

1
@stephen Fritz-请尝试更改字段集名称,因为它必须是唯一的,否则可能会与其他地方发生冲突。我通过更改字段集的名称发布和解决该问题
Abdul Kadir

Answers:


0

使用以下代码使用UI组件以单一形式创建选项卡

<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个选项卡以及相关的表单字段。

希望这个解决方案对您有用

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.