7

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.

Improve this question

6 Answers 6

Reset to default
12

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.

Improve this answer
6
  • 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. Commented Apr 2, 2020 at 3:45
  • 1
    Thanks. That's also work for me. Commented Apr 25, 2020 at 22:16
  • @IftakharulAlam welcome Commented Apr 27, 2020 at 4:49
  • 1
    Thanks it's helpful Commented Jun 29, 2021 at 9:57
  • Welcome @vivek :) Commented Jun 29, 2021 at 10:05
5

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.

Improve this answer
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();
Improve this answer
1
  • Your answer save my day. Commented Jan 17, 2023 at 6:09
3

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

Improve this answer
1

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?

Improve this answer
3
  • 1
    have you found the issue? Commented Feb 18, 2019 at 15:29
  • Facing the same issue, how to solve it? Commented Apr 2, 2020 at 4:24
  • @WillianLevinskiKeller : Have you find any solution ? Commented Jan 30, 2024 at 10:56
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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.