MAGENTO 2 : How to Add New Custom Action In Sales Order

Hello, Magento Folks,

Last time I explained how you can Remove Item from cart automatically after 30 minutes in Magento 2.

Today, we are going to learn how you can add a new custom action in the sales order grid in Magento 2.

For Store Magento 2 store owners, it is the most essential part to fulfil the customer’s orders throughout the journey, which start from placing an order to receiving it. In Magento 2, it has become so easy to order with its easy checkout process.

By default, Magento2 provides view action in admin order’s grid, and with the help of that we can view particular order details. But what if we want to add some custom actions with view action?

Like, reorder functionality directly from the grid.

No worries, with the help of below codes you can add custom actions (one or more) as per your requirement.

So, Let’s get started,

Step 1: To do this, create sales_order_grid.xml file inside app\code\Vendor\Extension\view\adminhtml\ui_component\ folder and add this code:

<?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">
        <actionsColumn name="actions" class="Vendor\Extension\Ui\Component\Listing\Column\ViewAction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="viewUrlPath" xsi:type="string">sales/order/view</item>
                    <item name="urlEntityParamName" xsi:type="string">order_id</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>

Step 2: Next, create ViewAction.php file inside app\code\Vendor\Extension\Ui\Component\Listing\Column\ folder and add this code:

<?php
namespace Vendor\Extension\Ui\Component\Listing\Column;

use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;

class ViewAction extends Column
{
    protected $urlBuilder;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                if (isset($item['entity_id'])) {
                    $viewUrlPath = $this->getData('config/viewUrlPath') ?: '#';
                    $urlEntityParamName = $this->getData('config/urlEntityParamName') ?: 'entity_id';
                    $item[$this->getData('name')] = [
                        'view' => [
                            'href' => $this->urlBuilder->getUrl(
                                $viewUrlPath,
                                [
                                    $urlEntityParamName => $item['entity_id']
                                ]
                            ),
                            'label' => __('View')
                        ],
                        'reorder' => [
                            'href' => $this->urlBuilder->getUrl(
                                "sales/order_create/reorder",
                                [
                                    $urlEntityParamName => $item['entity_id']
                                ]
                            ),
                            'label' => __('Reorder')
                        ]
                    ];
                }
            }
        }
        return $dataSource;
    }
}

Step 3: And finally refresh the cache.

So, this is it. From now on, you are able to add custom actions in the sales grid of Magento 2. You are free to implement these codes if you face any issues while implementations, then contact our Support team for help.

Lastly, if you found this article helpful, then let us know in the comments below. Also, don’t forget to share this with your Magento partners and colleagues.

Happy Coding?