Magento – Magento 2.2.5: How to create Grid in Tabs

gridmagento-2.2.5tabs

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

Best Answer

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>
Related Topic