Kdjykuj

How to add a custom grid in a new tab in product edit page using UI_Component method?

This custom grid fetches collection from a custom table.

You can add it using modifier and UI component. Let's say my module name is Codextblog/Customtab. Detail post is published here https://goo.gl/cU679F

Add Modifier
app/code/Codextblog/Customtab/etc/adminhtml/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<virtualType name="MagentoCatalogUiDataProviderProductFormModifierPool">

    <arguments>

        <argument name="modifiers" xsi:type="array">

            <item name="custom-tab-with-content" xsi:type="array">

                <item name="class" xsi:type="string">CodextblogCustomtabUiDataProviderProductFormModifierCustomTab</item>

                <item name="sortOrder" xsi:type="number">10</item>

            </item>

        </argument>

    </arguments>

</virtualType>

</config>

Add custom tab

<?php

namespace CodextblogCustomtabUiDataProviderProductFormModifier;



use MagentoCatalogModelLocatorLocatorInterface;

use MagentoCatalogUiDataProviderProductFormModifierAbstractModifier;

use MagentoFrameworkStdlibArrayManager;

use MagentoFrameworkUrlInterface;

use MagentoUiComponentContainer;

use MagentoUiComponentFormFieldset;





class CustomTab extends AbstractModifier

{



const SAMPLE_FIELDSET_NAME = 'custom_fieldset';

const SAMPLE_FIELD_NAME = 'is_custom';





protected $_backendUrl;

protected $_productloader;

protected $_modelCustomtabFactory;



/**

 * @var MagentoCatalogModelLocatorLocatorInterface

 */

protected $locator;



/**

 * @var ArrayManager

 */

protected $arrayManager;



/**

 * @var UrlInterface

 */

protected $urlBuilder;



/**

 * @var array

 */

protected $meta = ;



/**

 * @param LocatorInterface $locator

 * @param ArrayManager $arrayManager

 * @param UrlInterface $urlBuilder

 */

public function __construct(

    LocatorInterface $locator,

    ArrayManager $arrayManager,

    UrlInterface $urlBuilder,

    MagentoCatalogModelProductFactory $_productloader,

    MagentoBackendModelUrlInterface $backendUrl

) {

    $this->locator = $locator;

    $this->arrayManager = $arrayManager;

    $this->urlBuilder = $urlBuilder;

    $this->_productloader = $_productloader;

    $this->_backendUrl = $backendUrl;

}



public function modifyData(array $data)

{

    return $data;

}



public function modifyMeta(array $meta)

{

    $this->meta = $meta;

    $this->addCustomTab();



    return $this->meta;

}



protected function addCustomTab()

{

    $this->meta = array_merge_recursive(

        $this->meta,

        [

            static::SAMPLE_FIELDSET_NAME => $this->getTabConfig(),

        ]

    );

}



protected function getTabConfig()

{

    return [

        'arguments' => [

            'data' => [

                'config' => [

                    'label' => __('Custom Tab'),

                    'componentType' => Fieldset::NAME,

                    'dataScope' => '',

                    'provider' => static::FORM_NAME . '.product_form_data_source',

                    'ns' => static::FORM_NAME,

                    'collapsible' => true,

                ],

            ],

        ],

        'children' => [

            static::SAMPLE_FIELD_NAME => [

                'arguments' => [

                    'data' => [

                        'config' => [

                            'autoRender' => true,

                            'componentType' => 'insertListing',

                            'dataScope' => 'custom_listing',

                            'externalProvider' => 'custom_listing.custom_listing_data_source',

                            'selectionsProvider' => 'custom_listing.custom_listing.product_columns.ids',

                            'ns' => 'custom_listing',

                            'render_url' => $this->urlBuilder->getUrl('mui/index/render'),

                            'realTimeLink' => false,

                            'behaviourType' => 'simple',

                            'externalFilterMode' => true,

                            'imports' => [

                                'productId' => '${ $.provider }:data.product.current_product_id'

                            ],

                            'exports' => [

                                'productId' => '${ $.externalProvider }:params.current_product_id'

                            ],



                        ],

                    ],

                ],

                'children' => ,

            ],

        ],

    ];

}



}

Add dataprovider file app/code/Codextblog/Customtab/Ui/Dataprovider/Product/CustomDataProvider.php

<?php



namespace CodextblogCustomtabUiDataProviderProduct;



use MagentoFrameworkAppRequestInterface;

use MagentoUiDataProviderAbstractDataProvider;

use CodextblogCustomModelResourceModelCustomCollectionFactory;

use CodextblogCustomModelResourceModelCustomCollection;

use CodextblogCustomModelCustom;





class CustomDataProvider extends AbstractDataProvider

{

/**

 * @var CollectionFactory

 */

protected $collectionFactory;



/**

 * @var RequestInterface

 */

protected $request;



/**

 * @param string $name

 * @param string $primaryFieldName

 * @param string $requestFieldName

 * @param CollectionFactory $collectionFactory

 * @param RequestInterface $request

 * @param array $meta

 * @param array $data

 */

public function __construct(

    $name,

    $primaryFieldName,

    $requestFieldName,

    CollectionFactory $collectionFactory,

    RequestInterface $request,

    array $meta = ,

    array $data = 

) {

    parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);

    $this->collectionFactory = $collectionFactory;

    $this->collection = $this->collectionFactory->create();

    $this->request = $request;

}



/**

 * {@inheritdoc}

 */

public function getData()

{

    $this->getCollection();



    $arrItems = [

        'totalRecords' => $this->getCollection()->getSize(),

        'items' => ,

    ];



    foreach ($this->getCollection() as $item) {

        $arrItems['items'] = $item->toArray();

    }



    return $arrItems;

}



/**

 * {@inheritdoc}

 */

public function addFilter(MagentoFrameworkApiFilter $filter)

{

    $field = $filter->getField();







    if (in_array($field, ['title', 'nickname', 'detail'])) {

        $filter->setField($field);

    }



    parent::addFilter($filter);

}

}

Here CodextblogCustomModelResourceModelCustomCollectionFactory is the collection of a module which grid will be display in a custom tab.

Create ui component app/code/Codextblog/Customtab/view/adminhtml/ui_component/custom_listing.xml

<?xml version="1.0" encoding="UTF-8"?>



<listing 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">custom_listing.custom_listing_data_source</item>

        <item name="deps" xsi:type="string">custom_listing.custom_listing_data_source</item>

    </item>

    <item name="spinner" xsi:type="string">custom_columns</item>

</argument>

<dataSource name="custom_listing_data_source">

    <argument name="dataProvider" xsi:type="configurableObject">

        <argument name="class" xsi:type="string">CodextblogCustomtabUiDataProviderProductCustomDataProvider</argument>

        <argument name="name" xsi:type="string">custom_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="component" xsi:type="string">Magento_Ui/js/grid/provider</item>

                <item name="update_url" xsi:type="url" path="mui/index/render"/>

                <item name="storageConfig" xsi:type="array">

                    <item name="cacheRequests" xsi:type="boolean">false</item>

                </item>

            </item>

        </argument>

    </argument>

</dataSource>

<listingToolbar name="listing_top">

    <filters name="listing_filters">

        <argument name="data" xsi:type="array">

            <item name="config" xsi:type="array">

                <item name="statefull" xsi:type="array">

                    <item name="applied" xsi:type="boolean">false</item>

                </item>

                <item name="params" xsi:type="array">

                    <item name="filters_modifier" xsi:type="array"/>

                </item>

            </item>

        </argument>

    </filters>

    <paging name="listing_paging"/>

</listingToolbar>

<columns name="custom_columns" class="MagentoUiComponentListingColumns">

    <argument name="data" xsi:type="array">

        <item name="config" xsi:type="array">

            <item name="childDefaults" xsi:type="array">

                <item name="fieldAction" xsi:type="array">

                    <item name="provider" xsi:type="string">customGrid</item>

                    <item name="target" xsi:type="string">selectReview</item>

                    <item name="params" xsi:type="array">

                        <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>

                    </item>

                </item>

            </item>

        </item>

    </argument>

    <column name="id">

        <argument name="data" xsi:type="array">

            <item name="config" xsi:type="array">

                <item name="filter" xsi:type="string">textRange</item>

                <item name="sorting" xsi:type="string">asc</item>

                <item name="label" xsi:type="string" translate="true">ID</item>

                <item name="sortOrder" xsi:type="number">0</item>

            </item>

        </argument>

    </column>

    <column name="name">

        <argument name="data" xsi:type="array">

            <item name="config" xsi:type="array">

                <item name="filter" xsi:type="string">text</item>

                <item name="label" xsi:type="string" translate="true">Name</item>

                <item name="sortOrder" xsi:type="number">30</item>

                <item name="truncate" xsi:type="number">50</item>

                <item name="nl2br" xsi:type="boolean">true</item>

                <item name="escape" xsi:type="boolean">true</item>

            </item>

        </argument>

    </column>

</columns>

</listing>

Here is the detailed post on the same https://goo.gl/cU679F