How to Add Custom Button in the Admin Product UI-Component Form in Magento 2
Magento 2 allows the admin to create different product types and edit them from the backend Catalog > Products > Product edit form.
With innovations in E-commerce, the default features may not be enough to meet the business requirements. However, Magento 2 flexible to tweak or add new features, buttons, forms, or any components.
Today, I’ll show one such method to add a custom button in the admin product UI-component form in Magento 2. Likewise after done with this you can also learn to create a custom tab and call custom Phtml in product UI component form in Magento 2.
Using the below code, the admin can use custom buttons in the product edit form in the backend. For example, generate a barcode for the product, or check the preview of the product frontend.
For example,
Method to add custom button in the admin product UI-component form in Magento 2:
Create a product_form.xml file at app/code/Vendor/Extension/view/adminhtml/ui_component directory
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <!--For custom button--> <argument name="data" xsi:type="array"> <item name="buttons" xsi:type="array"> <item name="customButton" xsi:type="string"> Vendor\Extension\Block\Adminhtml\Product\Edit\Button\CustomButton </item> </item> </argument> </form> |
Next you have to create a CustomButton.php file in app/code/Vendor/Extension/Block/Adminhtml/Product/Edit/Button directory
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php namespace Vendor\Extension\Block\Adminhtml\Product\Edit\Button; class CustomButton extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Generic { public function getButtonData() { return [ 'label' => __('Custom Button'), 'class' => 'action-secondary', 'on_click' => 'alert("Hello World")', 'sort_order' => 10 ]; } } |
add-custom-button-in-the-admin-product-ui-component-form-in-magento-2That’s it.
Any doubts in the above solution can be mentioned in the Comments section below.
Also, do share the solution with the Magento Community via social media.
Thank you.
Related Post – How to Add Custom Button in Magento 2 System Configuration
Prev
How to Configure Shipment Emails in Magento 2
Magento 2.4.1 – Improvements in Performance & Security
Next