Magento 2 Adding Edit Or Delete Action

With the support of the new generation of UI grid in Magento 2, you can create or change 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:

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 our action.

Step 2:

Firstly, you need 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:

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

Enjoyed the tutorial? Spread it to your friends!