Magento 2: UI Listing Component Loading Continuously

magento.stackexchange https://magento.stackexchange.com/questions/332969

  •  15-04-2021
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top