Magento 2 Adminhtml spreading forms across multiple tabs

Question

I'm attempting to create a backend module, where in my edit page I use admin-2column-left layout.

I want to have a form on each tab, but I don't know how I can do this.
Ideally, I would like to know how to assign different form uiComponents to different tabs, or how I can define one uiComponent for my form, but be able to assign which field set goes on which tab.

My specific situation, which provokes this question, is that I want to have a standard form on one tab (multiple text inputs), and on another tab, I want to have a dynamicRows UI component. We have called these tabs Main and Line Items.

Currently, I am implementing this as follows: Main is defined in the _prepareForm method within its block, which is a class extension Form\Generic. This form appears and works fine until I add the dynamic rows.

My layout file has code to add the Main tab and assign content block. As well it has a container named line_items, which contains a uiComponent for the form containing dynamic rows.

The Line Items tab is created in the _beforeToHtml method of the Widget\Tab, and its content is assigned by using a call to getChildHtml on a line_items container.

The tab works and is populated with the correct structure, allowing me to add and remove rows.

The issue is that when I submit the page, only the inputs in the Line Items tab are submitted.

So I know I have not set this up correctly, and need some way to instruct it to track and submit all the form elements. Most of this implementation is derived from my attempts to reverse engineer the setup of the Category Product Attributes form, which is similar to what I want to do.

Anyone have idea about it?

Answer 1

Use the following code to create tabs with single form using 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>

Create a form element

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

This code will display 2 tabs on form with the associated form fields.

Hope this solution works for you