Admin form using tabs

Question

I'm trying to create an admin form in Magento 2 using UI-components and I want to make it have the M1 look with tabs instead of collapsible fieldsets.
I did some digging and found that there are 2 types of layouts defined.

• generic (collapsible fieldsets)
• tabs.

They are defined in the di.xml of the module Magento_Ui.

<type name="Magento\Framework\View\Layout\Pool">
    <arguments>
        <argument name="types" xsi:type="array">
            <item name="generic" xsi:type="array">
                <item name="class" xsi:type="string">Magento\Framework\View\Layout\Generic</item>
                <item name="template" xsi:type="string">templates/layout/generic</item>
            </item>
            <item name="tabs" xsi:type="array">
                <item name="class" xsi:type="string">Magento\Ui\Component\Layout\Tabs</item>
                <item name="template" xsi:type="string">templates/layout/tabs</item>
            </item>
        </argument>
    </arguments>
</type>

I found also that by adding this inside of my ui component file, changes something but the form does not load.

<item name="layout" xsi:type="array">
    <item name="type" xsi:type="string">tabs</item>
</item>

Also I did not find the template referenced by the di.xml mentioned above called templates/layout/tabs.
Am I missing something or is this an unfinished feature?

Answer 1

This is possible. My answer is for Magento 2.2. I assume that, using Magento 2.1 syntax, it would work there.

Step #1

It comes down to configuration, as do most things with UI Components, and there are some specific and vague requirements. The following are the necessary requirements for making a UI Component with tabs work:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Referral</item>
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">referral_form.referral_form_data_source</item>
        </item>
    </argument>
    <settings>
        <layout>
            <!-- I assume there are other options; set the layout handle accordingly -->
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
        <deps>
            <dep>referral_form.referral_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="referral_form_data_source">
        <!-- ... -->
    </dataSource>
    <fieldset name="referral_fieldset">
        <settings>
            <label translate="true">General Info</label>
        </settings>

        <!-- Each fieldset is a new tab -->
    </fieldset>
</form>

Step #2

Set the layout on the page in the layout XML file: <page layout="admin-2columns-left"/>

---

Magento_Customer/view/base/ui_component/customer_form.xml is a good example in the core.