How to Add Custom Button in Magento 2 System Configuration
While developing a Magento 2 extension, you have to follow various requirements and one such that I’m posting the solution for is to add custom button in Magento 2 system configuration.
You would want to create a button in the Magento 2 system configuration for custom functionality or perform an action. For example, call a Helper function or controller action.
I had used this solution to create a button that generates a CSV file for product attributes as shown here:
Check the solution below and do let me know how it was useful to you.
Steps to Add Custom Button in Magento 2 System Configuration:
- Create field in [Vendor]\[Module]\etc\adminhtml\system.xml file
1234<field id="button_id" translate="label" type="button" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"><label>Label Text</label><frontend_model>[Vendor]\[Module]\Block\System\Config\Button</frontend_model></field> - Create Button.php file in [Vendor]\[Module]\Block\System\Config
1234567891011121314151617181920212223242526272829303132<?phpnamespace [Vendor]\[Module]\Block\System\Config;use Magento\Config\Block\System\Config\Form\Field;use Magento\Backend\Block\Template\Context;use Magento\Framework\Data\Form\Element\AbstractElement;class Button extends Field{protected $_template = '[Vendor]_[Module]::system/config/button.phtml';public function __construct(Context $context, array $data = []){parent::__construct($context, $data);}public function render(AbstractElement $element){$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();return parent::render($element);}protected function _getElementHtml(AbstractElement $element){return $this->_toHtml();}public function getCustomUrl(){return $this->getUrl('router/controller/action');}public function getButtonHtml(){$button = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')->setData(['id' => 'btn_id', 'label' => __('Button Label'),]);return $button->toHtml();}} - Create button.phtml file in [Vendor]\[Module]\view\adminhtml\templates\system\config
1234<?php$controller = $block->getCustomUrl();echo $block->getButtonHtml();?>
That was all about creating a button in system configuration in Magento 2 for custom functionality. To make your extensions work expectedly certain configurations are made to have particular values for that you need to set default values for configuration field in Magento 2.
Any doubts yet? Please share them in the Comments section below and I’d be happy to help.
Feel free to share the above solution with fellow developers.
Thanks.
8 Comments
Hey,
I am getting an error i.e. Invalid template file: ‘CustomMyemma\Module::system/config/button.phtml’ in module: ‘CustomMyemma_Module’ block’s name: ‘system\config\button_0’
Where is the problem please suggest
Hey Rashi,
The template name assigned is invalid.
‘CustomMyemma_Module::system/config/button.phtml’ – this is the correct way.
Please check this screenshot – https://drops.meetanshi.com/A8r0RW
Thank you.
I want the button to be able to save some fields into core config table how do i achieve this?
Hey,
You can create a controller and set the value programmatically.
https://drops.meetanshi.com/i/mFyksx
Reference blog – How to Programmatically Set Magento 2 Core Config Data
Thank you.
what is in the scenario if i want to to link that button to google page?
Hello,
Add the following code in phtml file:
require([
'jquery',
'prototype'
], function(jQuery){
jQuery('#btn_id').click(function () {
window.open('google.com', '_blank');
});
});
Thanks.
this button click not export
Hello,
The above code is not for export functionality.
It is a demo code with a reference to generating a CSV.
You can customize the code as per your requirements.
Thanks.