Magento 2 Add, Edit Or Delete Action

June 15, 2021 The Online Helper

There are three steps to add edit or delete action:

Step1

This file is responsible for the UI grid of the product list in the backend and the action inside this file.

vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml

<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>

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 Magento\Catalog\Ui\Component\Listing\Columns\ProductActions, the Ui grid adds all actions in path related to it to class

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;
    }

Step 2

Create the grid plugin in your module, add event after and add your action in:

VendorName/ModuleName/etc/adminhtml/di.xml

Content for this file

<?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="VednorName\ModuleName\Plugin\Adminhtml\ProductActions"/>
    </type>
</config>

Step3

Create the class in,

VendorName/ModuleName/Plugin/Adminhtml/ProductActions .php

Content for this file

<?php
namespace VendorName\ModuleName\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;
    }
}

If you are looking to hire Magento Developer, visit Magento Web Agency.

Magento 2 Add, Edit Or Delete Action

Step1

Step 2

Step3

Recent post