You can easily add a column to the product grid if the values you want to display in the column are product attributes. These are already present in the product grid toolbar under the column controls. Just turn on/off the columns you want to show or remove from the grid. But what if you want to display values that are not product attributes, such as quantities or websites?
Since inventory management can be turned on or off for each product, add a new column to the product grid that displays whether inventory management is on or off.
For all code examples, we created Magento 2 modules. Webkul_custom.
If you want to know how to create a Magento 2 module, check this: How to create a basic module in Magento 2
Magento Magento_Catalog Add this module below the sequence tag as it will be loaded before the module. module.xml File.
app/code/Webkul/Custom/etc/module.xml
<?xml version="1.0"?> <config xmlns:xsi=" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Webkul_Custom" > <sequence> <module name="Magento_Catalog"/> </sequence> </module> </config>
Use in Magento 2 to render product grid list A UI component instance named product list and an XML configuration file for it. You need to create a file inside the module with the same path and name.
app/code/Webkul/Custom/view/adminhtml/ui_component/product_listing.xml
<?xml version="1.0" encoding="utf-8"?> <listing xmlns:xsi=" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <columns name="product_columns"> <column name="manage_stock" component="Magento_Ui/js/grid/columns/select" sortOrder="80"> <settings> <label translate="true">Manage Stock</label> <addField>true</addField> <options class="MagentoConfigModelConfigSourceYesno"/> <filter>select</filter> <dataType>select</dataType> <sortable>false</sortable> </settings> </column> </columns> </listing>
To add a new column you need to reference column UI component named product column Extract from the original configuration file and add new columns to it.named the column Inventory control with label Inventory management.
First, create a field strategy to add inventory management status to your product collection.
WebkulCustomUiDataProviderProductAddManageStockFieldToCollection
<?php namespace WebkulCustomUiDataProviderProduct; class AddManageStockFieldToCollection implements MagentoUiDataProviderAddFieldToCollectionInterface public function addField( MagentoFrameworkDataCollection $collection, $field, $alias = null ) $collection->joinField( 'manage_stock', 'cataloginventory_stock_item', 'manage_stock', 'product_id=entity_id', null, 'left' );
You need to create this filtering strategy in case you want to filter grid data by inventory status.
WebkulCustomUiDataProviderProductAddManageStockFilterToCollection
<?php namespace WebkulCustomUiDataProviderProduct; class AddManageStockFilterToCollection implements MagentoUiDataProviderAddFilterToCollectionInterface public function addFilter( MagentoFrameworkDataCollection $collection, $field, $condition = null ) if (isset($condition['eq'])) $collection->addFieldToFilter($field, $condition);
If you want to use the strategies you just created, put them in product list data provider.do it with di.xml File.
app/code/Webkul/Custom/etc/adminhtml/di.xml
<?xml version="1.0" encoding="utf-8" ?> <config xmlns:xsi=" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="MagentoCatalogUiDataProviderProductProductDataProvider"> <arguments> <argument name="addFieldStrategies" xsi:type="array"> <item name="manage_stock" xsi:type="object">WebkulCustomUiDataProviderProductAddManageStockFieldToCollection</item> </argument> <argument name="addFilterStrategies" xsi:type="array"> <item name="manage_stock" xsi:type="object">WebkulCustomUiDataProviderProductAddManageStockFilterToCollection</item> </argument> </arguments> </type> </config>