3

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?

2

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.

| improve this answer | |
  • Indeed, my problem was for Magento 2.1. Haven't tried on 2.2. If it works on 2.2 it's good enough. – Marius Oct 17 '18 at 13:11

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.