Magento 2 Add, Edit Or Delete Action

With the support of the new generation of UI grid in Magento 2, you can create or change the gird with XML file which uses external php file for getting all part needed. In this article, I will show you how to add edit or delete action in Magento 2. Specifically, I take the example of the grid action such as edit in catalog product grid or delete preview in pages cms grid.

Let’s explore the process of adding edit or delete action through the below steps!

Step 1: Create or change grid with XML file

The vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml file is responsible for UI grid of product list in backend, and the actions inside this file:

<item name="fieldAction" xsi:type="array">
     <item name="provider" xsi:type="string">product_listing.product_listing.product_columns.actions</item>
             <item name="target" xsi:type="string">applyAction</item>
                   <item name="params" xsi:type="array">
                   <item name="0" xsi:type="string">edit</item>
              <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
     </item>
 </item>

It tells to grid: while the current row gets the URL form edit action, the important part is the last part of file:

        <actionsColumn name="actions" class="Magento\Catalog\Ui\Component\Listing\Columns\ProductActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="sortOrder" xsi:type="number">200</item>
                </item>
            </argument>
        </actionsColumn>

By using the class Magento\Catalog\Ui\Component\Listing\Columns\ProductActions, the UI grid adds all actions related to it to class in path vendor/magento/module-catalog/Ui/Component/Listing/Columns/ProductActions.php.

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $storeId = $this->context->getFilterParam('store_id');
            foreach ($dataSource['data']['items'] as &$item) {
                $item[$this->getData('name')]['edit'] = [
                    'href' => $this->urlBuilder->getUrl(
                        'catalog/product/edit',
                        ['id' => $item['entity_id'], 'store' => $storeId]
                    ),
                    'label' => __('Edit'),
                    'hidden' => false,
                ];
            }
        }
      return $dataSource;
    }

Now, it is time for you to add your action.

Step 2: Add your action

Firstly, you need a grid plugin in your module, add event after and push your action inside Ibnab/CustomAction/etc/adminhtml/di.xml (where Ibnab is YouVendor, CustomAction is YourMode):

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Ui\Component\Listing\Columns\ProductActions">
        <plugin name="prepare_data_source_after" type="Ibnab\CustomAction\Plugin\Adminhtml\ProductActions"/>
    </type>
</config>

Step 3: Create your class

Then, you need to create your class in Ibnab/CustomAction/Plugin/Adminhtml/ProductActions .php and push:

<?php
namespace Ibnab\CustomAction\Plugin\Adminhtml;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\Url;
class ProductActions {
    protected $urlBuilder;
    protected $context;
    public function __construct(
    ContextInterface $context, Url $urlBuilder
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->context = $context;
    }
    public function afterPrepareDataSource($productActions, $result) {
            if (isset($result['data']['items'])) {
                $storeId = $this->context->getFilterParam('store_id');
                 foreach ($result['data']['items'] as &$item) {
                $item[$productActions->getData('name')]['preview'] = [
                    'href' => $this->urlBuilder->getUrl('catalog/product/view', ['id' => $item['entity_id'], '_nosid' => true]),
                    'target' => '_blank',
                    'label' => __('ُPreview'),
                ];
                }
            }   
        return $result;
    }
}

Conclusion

Above are the detailed instructions for adding edit or delete mass actions in Magento 2. I hope that this article will be helpful for you to manage your online store more effectively. If you have any questions or want to give some opinions, feel free to leave a comment below.

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous Magento 2 System Configuration Field Types
Next Five Steps To Add Mass Actions In Magento 2
One Step Checkout for Magento 2 by Mageplaza
x