How to Add Mass Action in UI Component Grid in Magento 2
Tags
magento development magento admin magento 2 magento

When developing an eCommerce website using Magento 2, it is essential to provide a seamless user experience for managing large amounts of data. One common requirement is to allow users to perform bulk actions on multiple items displayed in a grid. Magento 2 provides a powerful UI component grid system that can be customized to incorporate mass actions. In this blog post, we will explore how to add mass action functionality to a UI component grid in Magento 2, enabling users to perform actions on multiple items with ease.

Prerequisites:

Before we dive into the implementation, make sure you have the following prerequisites in place:

  1. A working installation of Magento 2.
  2. Basic knowledge of Magento 2 module development.
  3. Familiarity with PHP, XML, and JavaScript.

 

Step 1: Create a Custom Module
To add mass action functionality, we need to create a custom Magento 2 module. Start by creating the necessary files and folders in the app/code directory of your Magento installation. We'll name our module "Mageefy_MassAction" for the purpose of this tutorial.

Step 2: Define the Mass Action Configuration Next, we need to define the mass action configuration in our module. Create a file named massaction.xml under Mageefy/MassAction/etc/adminhtml and add the following code:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <massaction name="listing.massaction">
        <action name="mass_delete">
            <settings>
                <type>delete</type>
                <label translate="true">Delete</label>
                <url path="massaction/grid/massDelete"/>
                <confirm>
                    <message translate="true">Are you sure you want to delete the selected items?</message>
                    <title translate="true">Delete items</title>
                </confirm>
            </settings>
        </action>
    </massaction>
</config>

In this example, we have defined a mass action called "mass_delete" with the label "Delete." It specifies the URL that will handle the mass action and a confirmation message.

Step 3: Create the Mass Action Controller Now, let's create the controller that will handle the mass action. Create a file named MassDelete.php under Mageefy/MassAction/Controller/Adminhtml/Grid and add the following code:

<?php

namespace Mageefy\MassAction\Controller\Adminhtml\Grid;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;

class MassDelete extends Action
{
    public function __construct(Context $context)
    {
        parent::__construct($context);
    }

    public function execute()
    {
        // Implement your mass delete logic here
        $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
        $resultRedirect->setPath('module/grid/index');
        return $resultRedirect;
    }
}

Step 4: Configure the Grid UI Component Finally, we need to configure the UI Component Grid to include the mass action. Create a file named listing.xml under Mageefy/MassAction/view/adminhtml/ui_component and add the following code:

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <listingToolbar name="listing_top">
        <massaction name="listing.massaction">
            <action name="mass_delete">
                <settings>
                    <confirm>
                        <message translate="true">Are you sure you want to delete the selected items?</message>
                        <title translate="true">Delete items</title>
                    </confirm>
                    <url path="massaction/grid/massDelete"/>
                    <type>delete</type>
                    <label translate="true">Delete</label>
                </settings>
            </action>
        </massaction>
    </listingToolbar>
</listing>

In this XML configuration, we include the mass action "mass_delete" in the listingToolbar section of the UI Component Grid.

Step 5: Clear Cache and Test After completing the above steps, clear the Magento cache by running the following command from your Magento root directory:

php bin/magento cache:clean

Once the cache is cleared, navigate to the grid page in the Magento admin panel where you want to add the mass action. You should now see a new "Delete" option in the grid's toolbar. Select the desired records and click on the "Delete" action to trigger the mass deletion.

Conclusion:

Adding a mass action in the UI component grid in Magento 2 provides a convenient way to perform bulk operations on data. By following the steps outlined in this blog post, you can enhance the functionality of your Magento 2 store's admin interface and improve the efficiency of data management.

Remember to follow Magento 2 best practices and ensure that your customizations are compatible with future upgrades and changes in the platform. With the power of mass actions, you can streamline your admin workflow and save valuable time when dealing with large amounts of data in your Magento 2 store.