3

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.

4

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.

1

As per my case, We have to update both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.

0

If we remove the item "template" this does resolve the issue.

Remove:

<item name="template" xsi:type="string">templates/form/collapsible</item>

After this is removed and the following is added within the "settings" node:

<layout>
    <navContainerName>left</navContainerName>
    <type>tabs</type>
</layout>

My form fields were no longer populating with the default data drawn from my model (db data). Also if I fill in the form and save it, the fields are not auto-populated.

Anyone experience the same issue?

0

I was facing the same issue either my Tabs were showing or Collapsable forms were showing.

Case 1. If you want to show left tabs then you need to remove "templates/form/collapsible" from your form's xml file on all places

Case 2. If you want to show only collapsible form in the form and you do not want left side tabs then remove below code from your form's XML file left tabs and add "templates/form/collapsible" to each fieldset

Conclusion: You can not use both templates simultaneously (either collapsible or tabs).

Remove collapsable setting from your argument section of the form see the attached image for reference.

enter image description here

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.