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.
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid