Magento 2 add button in configuration setting with controller action

In Magento there are so many default field types available for configuration settings field, but no type is provided for the button,

To add button in configuration setting, we have to process via custom frontend model.

First we have to put button setting in existing module system.xml or create new module by adding the below code:

[Vendor Name]\[Module Name]\etc\adminhtml\system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
    <tab id="tab_id" translate="label" sortOrder="1000">
        <label>Your Tab Title</label>
    </tab>
    <section id="yoursection_id" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>Section Label</label>
        <tab>tab_id</tab>
        <resource>[your resource name]</resource>
        <group id="scheduler_export_product" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Export Products Scheduler Options</label>
            <field id="export_all_product" translate="label comment" type="button" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>Export All Products</label>
                <frontend_model>[Vendor Name]\[Module Name]\Block\System\Config\Exportproduct</frontend_model>
                <comment><![CDATA[Your Field Comment Here]]></comment>
            </field>
        </group>
    </section>
</system>
</config>

<?xml version="1.0"?>

<label>Your Tab Title</label>

</tab>

<label>Section Label</label>

<resource>[your resource name]</resource>

<label>Export Products Scheduler Options</label>

<label>Export All Products</label>

<frontend_model>[Vendor Name]\[Module Name]\Block\System\Config\Exportproduct</frontend_model>

</field>

</group>

</section>

</system>

</config>

Then you have to create frontend model file & add the below code:

[Vendor Name]\[Module Name]\Block\System\Config\Exportproduct.php

<?php
namespace [Vendor Name]\[Module Name]\Block\System\Config;

/**
 * Class Exportproduct
 * @package [Vendor Name]\[Module Name]\Block\System\Config
 */
class Exportproduct extends \Magento\Config\Block\System\Config\Form\Field
{
    protected $_template = '[Vendor Name]_[Module Name]::system/config/exportproduct.phtml';

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
        return parent::render($element);
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        return $this->_toHtml();
    }

    public function getAjaxUrl()
    {
        return $this->getUrl('loyalty/export/allproducts'); //Put your controller action URL here
    }

    public function getButtonHtml()
    {
        $button = $this->getLayout()->createBlock(
            'Magento\Backend\Block\Widget\Button'
            )->setData(
            [
                'id' => 'exportbtn',
                'label' => __('Export All Products'),
            ]
        );
        return $button->toHtml();
    }
}

<?php

namespace [Vendor Name]\[Module Name]\Block\System\Config;

/**

* Class Exportproduct

* @package [Vendor Name]\[Module Name]\Block\System\Config

class Exportproduct extends \Magento\Config\Block\System\Config\Form\Field

{

protected $_template = '[Vendor Name]_[Module Name]::system/config/exportproduct.phtml';

public function __construct(

\Magento\Backend\Block\Template\Context $context,

array $data = []

) {

parent::__construct($context, $data);

}

public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)

{

$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();

return parent::render($element);

}

protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)

{

return $this->_toHtml();

}

public function getAjaxUrl()

{

return $this->getUrl('loyalty/export/allproducts'); //Put your controller action URL here

}

public function getButtonHtml()

{

$button = $this->getLayout()->createBlock(

'Magento\Backend\Block\Widget\Button'

)->setData(

[

'id' => 'exportbtn',

'label' => __('Export All Products'),

]

);

return $button->toHtml();

}

Now you have to create button related template file & add the below code:

[Vendor Name]\[Module Name]\view\adminhtml\templates\system\config\exportproduct.phtml

<?php
/**
 * @var \[Vendor Name]\[Module Name]\Block\System\Config\Exportproduct $block
 */
?>
<script>
    require([
        'jquery',
        'prototype',
    ], function ($) {
        function exportAllProducts() {
            params = {};
            new Ajax.Request('<?php echo $block->getAjaxUrl() ?>', {
                loaderArea: true,
                asynchronous: true,
                parameters: params,
                onSuccess: function (transport) {
                    var response = JSON.parse(transport.responseText);
                    $('#messages .message-success span.message-text').text('Your Controller Action Success Message Here');
                    $('#messages .message-success').show();
                    $('#messages .message-success').delay(8000).fadeOut();
                },
                onFailure: function() {               
                    $('#messages .message-error span.message-text').text('Your Controller Action Failure Message Here');
                    $('#messages .message-error').show();
                    $('#messages .message-error').delay(8000).fadeOut();
                    return false;
                }
            });
        }
        $('#exportbtn').click(function () {
            exportAllProducts();
        });
    });
</script>

<div id="messages" >
    <div class="messages">
        <div class="message message-success success" style="display: none;">
            <div data-ui-id="messages-message-success">
                <span class="message-text"></span>
            </div>
        </div>
        <div class="message message-error error" style="display: none;">
            <div data-ui-id="messages-message-error">
                <span class="message-text"></span>
            </div>
        </div>
    </div>
</div>
<?php echo $block->getButtonHtml() ?>

<?php

/**

* @var \[Vendor Name]\[Module Name]\Block\System\Config\Exportproduct $block

require([

'jquery',

'prototype',

], function ($) {

function exportAllProducts() {

params = {};

new Ajax.Request('<?php echo $block->getAjaxUrl() ?>', {

loaderArea: true,

asynchronous: true,

parameters: params,

onSuccess: function (transport) {

var response = JSON.parse(transport.responseText);

$('#messages .message-success span.message-text').text('Your Controller Action Success Message Here');

$('#messages .message-success').show();

$('#messages .message-success').delay(8000).fadeOut();

onFailure: function() {

$('#messages .message-error span.message-text').text('Your Controller Action Failure Message Here');

$('#messages .message-error').show();

$('#messages .message-error').delay(8000).fadeOut();

return false;

}

});

}

$('#exportbtn').click(function () {

exportAllProducts();

});

</script>

</div>

</div>

<?php echo $block->getButtonHtml() ?>

In the end, you have to create your controller action file with your logic & return Json response as per your requirement.

After doing all the above steps run php bin/magento cache:flush command and verify that whether your admin configuration settings display button in your section as shown below or not.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-641f0f0455eef078732420/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire B. Darji

Let’s have a call

Fill the form & Get Installation Support