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