How to add products to a custom product link type grid in Magento 2?
The dataprovider is set to $scope . '_product_listing' in vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/Related.php – getGrid($scope) function, we need to create UI component like, so as per our example the custom link type code is ‘parts’ we need to create parts_product_listing.xml UI component.
File Path: app/code/Mage2/CustomProductLink/view/adminhtml/ui_component/parts_product_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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">parts_product_listing.parts_product_listing_data_source</item>
</item>
</argument>
<settings>
<spinner>product_columns</spinner>
<deps>
<dep>parts_product_listing.parts_product_listing_data_source</dep>
</deps>
</settings>
<dataSource name="parts_product_listing_data_source" component="Magento_Ui/js/grid/provider">
<settings>
<storageConfig>
<param name="cacheRequests" xsi:type="boolean">false</param>
</storageConfig>
<updateUrl path="mui/index/render"/>
</settings>
<aclResource>Magento_Catalog::products</aclResource>
<dataProvider class="Magento\Catalog\Ui\DataProvider\Product\Related\RelatedDataProvider" name="parts_product_listing_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<listingToolbar name="listing_top">
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="params" xsi:type="array">
<item name="filters_modifier" xsi:type="array"/>
</item>
<item name="observers" xsi:type="array">
<item name="filters" xsi:type="object">Magento\Catalog\Ui\Component\Listing\Filters</item>
</item>
</item>
</argument>
<settings>
<statefull>
<property name="applied" xsi:type="boolean">false</property>
</statefull>
</settings>
</filters>
<paging name="listing_paging"/>
</listingToolbar>
<columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
<settings>
<childDefaults>
<param name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">partsProductGrid</item>
<item name="target" xsi:type="string">selectProduct</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
</item>
</param>
</childDefaults>
</settings>
<selectionsColumn name="ids" sortOrder="0">
<settings>
<indexField>entity_id</indexField>
<preserveSelectionsOnFilter>true</preserveSelectionsOnFilter>
</settings>
</selectionsColumn>
<column name="entity_id" sortOrder="10">
<settings>
<filter>textRange</filter>
<label translate="true">ID</label>
<sorting>asc</sorting>
</settings>
</column>
<column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail" component="Magento_Ui/js/grid/columns/thumbnail" sortOrder="20">
<settings>
<altField>name</altField>
<hasPreview>1</hasPreview>
<addField>true</addField>
<label translate="true">Thumbnail</label>
<sortable>false</sortable>
</settings>
</column>
<column name="name" sortOrder="30">
<settings>
<addField>true</addField>
<filter>text</filter>
<label translate="true">Name</label>
</settings>
</column>
<column name="attribute_set_id" component="Magento_Ui/js/grid/columns/select" sortOrder="40">
<settings>
<options class="Magento\Catalog\Model\Product\AttributeSet\Options"/>
<filter>select</filter>
<dataType>select</dataType>
<label translate="true">Attribute Set</label>
</settings>
</column>
<column name="attribute_set_text" class="Magento\Catalog\Ui\Component\Listing\Columns\AttributeSetText" sortOrder="41">
<settings>
<label translate="true">AttributeSetText</label>
<visible>false</visible>
</settings>
</column>
<column name="status" component="Magento_Ui/js/grid/columns/select" sortOrder="50">
<settings>
<options class="Magento\Catalog\Model\Product\Attribute\Source\Status"/>
<filter>select</filter>
<dataType>select</dataType>
<label translate="true">Status</label>
</settings>
</column>
<column name="status_text" class="Magento\Catalog\Ui\Component\Listing\Columns\StatusText" sortOrder="51">
<settings>
<label translate="true">StatusText</label>
<visible>false</visible>
</settings>
</column>
<column name="type_id" component="Magento_Ui/js/grid/columns/select" sortOrder="60">
<settings>
<options class="Magento\Catalog\Model\Product\Type"/>
<filter>select</filter>
<dataType>select</dataType>
<label translate="true">Type</label>
</settings>
</column>
<column name="sku" sortOrder="70">
<settings>
<filter>text</filter>
<label translate="true">SKU</label>
</settings>
</column>
<column name="price" class="Magento\Catalog\Ui\Component\Listing\Columns\Price" sortOrder="80">
<settings>
<addField>true</addField>
<filter>textRange</filter>
<label translate="true">Price</label>
</settings>
</column>
</columns>
</listing>
Once you create the above file you need to run the following command:
bin/magento cache:flush
And that’s it, you can add products to custom link type like the following screenshot:

We hope this blog may be understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂

