0

I want to have multiple fieldsets under the same tab using uiComponents. There is something similar under Stores -> Attributes -> Product but it's created using an old deprecated method.

Is there a way to achieve this using uiComponents?

This is what I have until now:

<fieldset name="module_shipping_address">
    <settings>
        <label translate="true">Shipping Address</label>
    </settings>
    <field name="email" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">module_shipping</item>
                <item name="label" xsi:type="string" translate="true">Email</item>
            </item>
        </argument>
        <settings>
            <validation>
                <rule name="validate-email" xsi:type="boolean">true</rule>
                <rule name="required-entry" xsi:type="boolean">true</rule>
            </validation>
            <dataType>text</dataType>
            <visible>true</visible>
        </settings>
    </field>
</fieldset>

If I add a new fieldset a new tab will be created. Is there a way to achieve what I want using uiComponents?

2

The way to achieve this is to wrap your fieldsets inside another <fieldset>

<fieldset name="module">
    <settings>
        <label translate="true">Module</label>
    </settings>
    <fieldset name="module_shipping_address">
        <settings>
            <label translate="true">Shipping Address</label>
        </settings>
        <field name="email" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">module_shipping</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="validate-email" xsi:type="boolean">true</rule>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <visible>true</visible>
            </settings>
        </field>
    </fieldset>
    <fieldset name="module_billing_address">
        <settings>
            <label translate="true">Billing Address</label>
        </settings>
        <field name="email" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">module_billing</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="validate-email" xsi:type="boolean">true</rule>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <visible>true</visible>
            </settings>
        </field>
    </fieldset>
</fieldset>

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.