3

I'm looking for the way to do Grid in Tabs in Magento 2.2.5, I have searched a lot, but almost what I found is from 2016 and so on.

Doesn't match with Magento 2.2.5 anymore.

Ok so what I need to do is look like this.

enter image description here

I'm after this but not working. http://www.codextblog.com/magento-2/how-to-add-custom-grid-into-a-custom-tab-in-product-edit-page-in-magento-2-admin/

EDIT 1:

Here is my ui-component banner_form.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">banner_form.banner_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>

    <settings>
        <buttons>
            <button name="save_and_continue" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\SaveAndContinueButton"/>
            <button name="save" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\SaveButton"/>
            <button name="reset" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\ResetButton"/>
            <button name="delete" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\DeleteButton"/>
            <button name="back" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\BackButton"/>
        </buttons>
        <namespace>banner_form</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>banner_form.banner_form_data_source</dep>
        </deps>
    </settings>

    <dataSource name="banner_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>
            <submitUrl path="banner/manage/save"/>
        </settings>
        <dataProvider class="Aht\BannerSlider\Model\Banner\DataProvider" name="banner_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

    <fieldset name="general">
        <settings>
            <label/>
        </settings>
        <field name="id" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">banner</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <visible>false</visible>
                <dataScope>id</dataScope>
            </settings>
        </field>
        <field name="name" sortOrder="20" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">banner</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Banner Name</label>
                <dataScope>name</dataScope>
            </settings>
        </field>
    </fieldset>
</form>

EDIT 2:

I've followed @Rutvee Sojitra solution and get this result.

enter image description here

5

Add this code on your form code where you want to add innerlisting

<insertListing>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="autoRender" xsi:type="boolean">true</item>
                <item name="ns" xsi:type="string">Name_of_listing_file</item>
            </item>
        </argument>
    </insertListing>

Make your banner_form.xml file like below:
  <?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">banner_form.banner_form_data_source</item>
    </item>
    <item name="label" xsi:type="string" translate="true">General Information</item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>

<settings>
    <buttons>
        <button name="save_and_continue" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\SaveAndContinueButton"/>
        <button name="save" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\SaveButton"/>
        <button name="reset" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\ResetButton"/>
        <button name="delete" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\DeleteButton"/>
        <button name="back" class="Aht\BannerSlider\Block\Adminhtml\Banner\Edit\BackButton"/>
    </buttons>
    <namespace>banner_form</namespace>
    <dataScope>data</dataScope>
    <deps>
        <dep>banner_form.banner_form_data_source</dep>
    </deps>
</settings>

<dataSource name="banner_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>
        <submitUrl path="banner/manage/save"/>
    </settings>
    <dataProvider class="Aht\BannerSlider\Model\Banner\DataProvider" name="banner_form_data_source">
        <settings>
            <requestFieldName>id</requestFieldName>
            <primaryFieldName>id</primaryFieldName>
        </settings>
    </dataProvider>
</dataSource>

<fieldset name="general">
    <settings>
        <label/>
    </settings>
    <field name="id" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">banner</item>
            </item>
        </argument>
        <settings>
            <dataType>text</dataType>
            <visible>false</visible>
            <dataScope>id</dataScope>
        </settings>
    </field>
    <field name="name" sortOrder="20" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">banner</item>
            </item>
        </argument>
        <settings>
            <validation>
                <rule name="required-entry" xsi:type="boolean">true</rule>
            </validation>
            <dataType>text</dataType>
            <label translate="true">Banner Name</label>
            <dataScope>name</dataScope>
        </settings>
    </field>
</fieldset>
  <fieldset name="banner_information" sortOrder="10">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Banner Information</item>
            <item name="collapsible" xsi:type="boolean">false</item>
        </item>
    </argument>
    <insertListing>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="autoRender" xsi:type="boolean">true</item>
                <item name="ns" xsi:type="string">banner_listing</item>
            </item>
        </argument>
    </insertListing>
</fieldset>

I have added below code:

 <fieldset name="banner_information" sortOrder="10">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Banner Information</item>
            <item name="collapsible" xsi:type="boolean">false</item>
        </item>
    </argument>
    <insertListing>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="autoRender" xsi:type="boolean">true</item>
                <item name="ns" xsi:type="string">banner_listing</item>
            </item>
        </argument>
    </insertListing>
</fieldset>
  • What does this code do? I should put it on the ui-component file? Which is C:\xampp\htdocs\magento\app\code\Aht\BannerSlider\view\adminhtml\ui_component\banner_form.xml ? – fudu Aug 2 '18 at 4:24
  • Yes right add this code in banner_for.xml and if your innerlisting name <item name="ns" xsi:type="string">banner_listing </item> then create banner_listing file – Rutvee Sojitra Aug 2 '18 at 4:26
  • Ohh... I already have banner_listing.xml file, but i dont want to do "grid in tabs" in there, its perfect now. What i need is only "grid in tabs" in banner_form.xml. Hmm .. i'm gonna try it now. Thanks, i will report for you later :) – fudu Aug 2 '18 at 4:30
  • You can accept this answer if you get solution, so it will help to other to reach there solution – Rutvee Sojitra Aug 2 '18 at 5:29
  • I cant put it in my banner_form.xml file, it throw an error : Invalid XML file. Where should i put it? I've tried every where in banner_form.xml :( – fudu Aug 2 '18 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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