Magento 2: UI Listing Component Loading Continuously
-
15-04-2021 - |
Pergunta
Magento 2: UI Listing Component Loading Continuously after adding tabs (Works without tabs)
One more question: I want to add data for two different tabs from different model, so how it is possible
<?xml version="1.0" encoding="UTF-8"?>
<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">vtn_investment_edit.vtn_investment_listing_data_source</item>
<item name="deps" xsi:type="string">vtn_investment_edit.vtn_investment_listing_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Investment Information</item>
<item name="reverseMetadataMerge" xsi:type="boolean">true</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">vtn_investment_req</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<settings>
<buttons>
<button name="back" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\BackButton"/>
<button name="delete" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\DeleteButton"/>
<button name="reset" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\ResetButton"/>
<button name="save" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\SaveButton"/>
</buttons>
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
<deps>
<dep>vtn_investment_edit.vtn_investment_listing_data_source</dep>
</deps>
</settings>
<dataSource name="vtn_investment_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vtn\Investment\Model\Investment\DataProvider</argument>
<argument name="name" xsi:type="string">vtn_investment_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="investment/vtn/save" />
</item>
</argument>
</argument>
<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>
</dataSource>
<fieldset name="tabs">
<settings>
<label translate="true">Investment</label>
</settings>
<fieldset name="post">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">Investment Form</item>
</item>
</argument>
<field name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="active">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">3000</item>
<item name="dataType" xsi:type="string">boolean</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="source" xsi:type="string">post</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="label" xsi:type="string" translate="true">Active</item>
<item name="valueMap" xsi:type="array">
<item name="true" xsi:type="string">1</item>
<item name="false" xsi:type="string">0</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
<item name="default" xsi:type="string">0</item>
</item>
</argument>
</field>
<field name="customer_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Email</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_contact">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Contact</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="product_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Product Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="product_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Product Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="sku">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Sku</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="investment_amount">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Investment Amount</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="comment">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Comment</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
</fieldset>
<fieldset name="post">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">Documents</item>
</item>
</argument>
</fieldset>
</fieldset>
</form>
Solução
I just remove this line and works perfectly
<item name="template" xsi:type="string">templates/form/collapsible</item>
Below code works
<?xml version="1.0" encoding="UTF-8"?>
<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">vtn_investment_edit.vtn_investment_listing_data_source</item>
<item name="deps" xsi:type="string">vtn_investment_edit.vtn_investment_listing_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Investment Information</item>
<item name="reverseMetadataMerge" xsi:type="boolean">true</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">vtn_investment_req</item>
</item>
</argument>
<settings>
<buttons>
<button name="back" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\BackButton"/>
<button name="delete" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\DeleteButton"/>
<button name="reset" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\ResetButton"/>
<button name="save" class="Vtn\Investment\Block\Adminhtml\Vtn\Edit\SaveButton"/>
</buttons>
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
<deps>
<dep>vtn_investment_edit.vtn_investment_listing_data_source</dep>
</deps>
</settings>
<dataSource name="vtn_investment_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vtn\Investment\Model\Investment\DataProvider</argument>
<argument name="name" xsi:type="string">vtn_investment_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="investment/vtn/save" />
</item>
</argument>
</argument>
<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>
</dataSource>
<fieldset name="post">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Investment Form</item>
</item>
</argument>
<field name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="active">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">3000</item>
<item name="dataType" xsi:type="string">boolean</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="source" xsi:type="string">post</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="label" xsi:type="string" translate="true">Active</item>
<item name="valueMap" xsi:type="array">
<item name="true" xsi:type="string">1</item>
<item name="false" xsi:type="string">0</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
<item name="default" xsi:type="string">0</item>
</item>
</argument>
</field>
<field name="customer_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Email</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="customer_contact">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Contact</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="product_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Product Id</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="product_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Product Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="sku">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Sku</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="investment_amount">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Investment Amount</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
<field name="comment">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Customer Comment</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
</item>
</argument>
</field>
</fieldset>
<fieldset name="docs">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Documents</item>
</item>
</argument>
</fieldset>
</form>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a magento.stackexchange