Magento 2.2.6 How to add TAB structure in admin UI component form

Question

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.

• magento.stackexchange.com/questions/208308
• community.magento.com
• webkul.com/blog

Any help would be appreciated! Thanks.

Answer 1

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.

• Willian Levinski Keller: Hi Chirag, I'm facing the same issue, however, if I remove the "<item name="template" xsi:type="string">templates/form/collapsible</item>, the form start without any data.
• Iftakharul Alam: Thanks. That's also work for me.
• Chirag Patel: @IftakharulAlam welcome
• Vivek: Thanks it's helpful
• Chirag Patel: Welcome @vivek :)

Answer 2

When you start using tabs in your admin panel the form changes. Until now I have not found an out of the box solution but it appears that the tab is setting a field where Magento looks for data. This is done in

<fieldset name="fieldmapping">
 <settings>
 <label>Field Mapping</label>
 </settings>
</fieldset>

The name of the fieldset provides you the tab, but also Magento looks inside the data for an array named "fieldmapping" so to resolve the issue you must alter your DataProvider.php and add the following code if you have a tab named "fieldmapping"

$this->loadedData[$model->getId()]['fieldmapping'] = $model->getData();

The return $this->loadedData; will now hold an addtional array that will populate your tab correctly.

Hopefully this helps.

Answer 3

Regarding the loader you need to remove in your ui component file

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

If still not working then you can add default instad of collapsible

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

Also regarding the data not fill up in form you need to add fieldset name "general" in your data provider file like this

$this->loadedData[$Id]['general'] = $model->getData();

• Mujahidh: Your answer save my day.

Answer 4

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

Answer 5

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?

• Ronak Chauhan: have you found the issue?
• Willian Levinski Keller: Facing the same issue, how to solve it?
• Krupali: @WillianLevinskiKeller : Have you find any solution ?

Answer 6

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.