Magento 2.2.6 – How to Add TAB Structure in Admin UI Component Form

adminformmagento2.2.6tabsui-formuicomponent

I am trying to create a TAB in admin UI component form in my custom module, TAB is showing but page is loading continuously, please see attached screen-shoot.

enter image description here

Here is my code.

Namespace/Modulename/view/adminhtml/ui_component/managelabels_productlabel_form.xml

<?xml version="1.0" ?>
<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="js_config" xsi:type="array">
                <item name="provider" xsi:type="string">managelabels_productlabel_form.productlabel_form_data_source</item>
        </item>
        <item name="label" translate="true" xsi:type="string">General Information</item>
        <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
                <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\BackButton" name="back"/>
                <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\DeleteButton" name="delete"/>
                <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\SaveButton" name="save"/>
                <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\SaveAndContinueButton" name="save_and_continue"/>
        </buttons>        
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
        <deps>
            <dep>managelabels_productlabel_form.productlabel_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="productlabel_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <settings>
            <validateUrl path="customer/index/validate"/>
            <submitUrl path="*/*/save"/>
        </settings>
        <dataProvider class="Namespace\Modulename\Model\Productlabel\DataProvider" name="productlabel_form_data_source">
            <settings>
                <requestFieldName>productlabel_id</requestFieldName>
                <primaryFieldName>productlabel_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="general">
        <settings>
            <label translate="true">General Info</label>
        </settings>
        <field formElement="input" name="image" sortOrder="10">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                        <item name="source" xsi:type="string">Productlabel</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">image</label>
                <visible>false</visible>                
            </settings>
        </field>
        <field name="firstname" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">customer</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
            </settings>
        </field>
    </fieldset>
</form>

My layout file where I defined page layout 2- column

Namespace/Modulename/view/adminhtml/layout/managelabels_productlabel_new.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="admin-2columns-left">
        <update handle="managelabels_productlabel_edit"/>
</page>

Am I missing something in my code? I don't know what is the problem.

Here what I tried or took reference.

Any help would be appreciated! Thanks.

Best Answer

I found my problem, i used argument item <item name="template" xsi:type="string">templates/form/collapsible</item> it is used to display for collapsible structure.

After remove this line of code is working fine. i think this error is occurred because we can not use tab structure and collapsible structure in single UI component form.

Related Topic