Magento 2: How to Add a Custom Button to Open Custom Popup in Admin Grid

Hello Magento Friends,

In today’s blog, I will explain How to Add a Custom Button to Open a Custom Popup in Magento 2 Admin Grid.

In Magento 2, extending the admin grid functionality can significantly improve the admin experience by making data management more efficient. One useful enhancement is adding a custom button that opens a custom popup. This tutorial will guide you through the process of adding a custom button to an admin grid and configuring it to open a custom popup.

Steps to Add a Custom Button to Open Custom Popup in Magento 2 Admin Grid:

Step 1: Create the customer_listing.xml file in given below path.

{{magento_root}}\app\code\Vendor\Extension\view\adminhtml\ui_component\customer_listing.xml

Then add the code as follows

Step 2: Create a Button.php in the following path.

{{magento_root}}\app\code\Vendor\Extension\Ui\Component\Listing\Columns\Button.php 

Now include the below-mentioned piece of code

Step 3: Create a button.js file in the following path.

{{magento_root}}\app\code\Vendor\Extension\view\base\web\js\grid\columns\button.js

Now add the following code

Step 4: Create a button.html file in the path given below.

{{magento_root}}\app\code\Vendor\Extension\view\base\web\templates\grid\cells\customer\button.html

Now, add the following code

Output:

You can see that the admin grid now contains a custom button.

Clicking on the custom button will open a custom popup as shown below

Conclusion:

By following these steps, you can add a custom button to an admin grid in Magento 2 that opens a custom popup. This enhancement can greatly improve the user experience by providing quick access to additional information or actions without leaving the current page.

For any other customization requirement, connect with experienced Magento Developers.

Happy Coding!