The 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.
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="NamespaceModulenameBlockAdminhtmlProductlabelEditBackButton" name="back"/>
<button class="NamespaceModulenameBlockAdminhtmlProductlabelEditDeleteButton" name="delete"/>
<button class="NamespaceModulenameBlockAdminhtmlProductlabelEditSaveButton" name="save"/>
<button class="NamespaceModulenameBlockAdminhtmlProductlabelEditSaveAndContinueButton" 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="NamespaceModulenameModelProductlabelDataProvider" 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.
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 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.
Method 2
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.
Method 3
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.
Method 4
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.
Method 5
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();
Method 6
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?
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0