0

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>
2
  • Please check what red line you see in console Commented Mar 17, 2021 at 9:45
  • There is no error related to this in console Commented Mar 17, 2021 at 9:46

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.