Magento 2 - How to Add a Custom Filed in Order Grid
In this article we'll explain you how to extend the functionality of the order grid in Magento 2. Adding a custom column to the Order Grid in Magento 2 you need to follow the several steps.
Before we start I assume, you have already created a custom module. If you don't have it or don't know how to create it then check out our other article How To Create a Magento 2 Module.
Step 1: Create sales_order_grid.xml at app/code/Vendor/ModuleName/view/adminhtml/ui_component/ and paste the below code. You need to change the code as per your requirement.
saveCopyzoom_out_map<?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">
<columns name="sales_order_columns">
<column name="your_custom_field_name" class="Devhooks\ModuleName\Ui\Component\Listing\Column\AddCustomField">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">Your Custom Field Name</item>
</item>
</argument>
<settings>
<sortable>false</sortable>
</settings>
</column>
</columns>
</listing>
In above code, we've used the your_custom_field_name
name as a field name and defind the Devhooks\ModuleName\Ui\Component\Listing\Column\AddCustomField
class to get the custom column value in order grid. So, now we need to create the AddCustomField
class file.
Step 2: Create AddCustomField.php at app/code/Devhooks/ModuleName/Ui/Component/Listing/Column/ and paste the below code. You need to change the code as per your requirement.
saveCopyzoom_out_map
<?php
namespace Devhooks\ModuleName\Ui\Component\Listing\Column;
use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;
class AddCustomField extends Column
{
protected $_orderRepository;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param OrderRepositoryInterface $orderRepository
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
OrderRepositoryInterface $orderRepository,
array $components = [],
array $data = []
) {
$this->_orderRepository = $orderRepository;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
$order = $this->_orderRepository->get($item["entity_id"]);
$customFieldName = $order->getData("your_custom_field_name");
$item[$this->getData('name')] = $customFieldName;
}
}
return $dataSource;
}
}
In the above code, you need to replace your_custom_field_name
name with your custom filed name.
Step 3: Cache Clean
After making these changes, clear the Magento cache and refresh the admin order grid page to see the custom column.
saveCopyzoom_out_mapphp bin/magento cache:clean
Bingo!! we are done all steps.
We hope this Magento article helped you to know How to Add a Custom Column in Order Grid in Magento 2.
Bookmark it for your future reference. Do comment below if you have any other questions or doubts.
P.S. Do share this post with your team.
Review other articles maybe it'll help you too.
- How to Add a Custom Link in Admin Product Listing Grid Page in Magento 2
- How to Add Image Uploader on Store Configuration in Magento 2
- How to Add Custom Select/MultiSelect Options on Store Configuration in Magento 2
- How to Add Dynamic Row on Store Configuration in Magento 2
- How to Add Date & time Picker on Store Configuration in Magento 2
- How to Use Javascript Mixins in Magento 2
- How to Add Custom Validation Rule in Magento 2
- How to Setup Magento 2 PWA Studio
- How to Get Current Product
- Get Product Collection with Filters
- How to Create/Use Message Queue in Magento 2
- How to Run Direct SQL Query in Magento 2
- How to create JSON controller in Magento 2
- How to Perform 3rd party API operations in your Magento 2 using GuzzleHttp