43

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?

  • Did you ever figure this out? – jamil Feb 19 '18 at 22:51
  • 1
    Stephen - I am assuming that you have found a solution after all this time? If so can you please update this with your solution? – brentwpeterson Mar 11 '18 at 13:45
  • @Stephen Fritz - Could you please provide an screenshot how do you looking for ? – Praful Rajput Apr 6 '18 at 11:18
  • May I ask whether this question still needs an answer? If it does, I might verify I understand the problem: are we trying to build a backend screen with separate forms in it? or is a screen with multiple tabs (uiComponent fashion) be a solution to this issue? – Herve Tribouilloy Jun 18 '18 at 11:48
  • 1
    @stephen Fritz - Please try to change fieldset name because it must be unique may be its conflicting somewhere else. i have same issued and its solve by changing fieldset's name – Abdul Kadir Mar 14 at 4:50
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.