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.

Magento 2 convert registered customer order to guest order after placing order
create the event.xml on your module under the Vendor/Module/etc/event.xml and...
Magento 2 : How to add custom meta tag in product view page?
If you need a custom meta tag for a specific...
Magento 2: How to set load custom font as preload?
Generally, if you load font as preload, it will load...
Magento 2 – how to show including & excluding tax price on product option?
Step 1: First you need to add di.xml in the...
Magento 2 add the product description or custom attribute in order email
Override the vendor/magento/module-sales/view/frontend/templates/email/items/order/default.phtml file on your theme and add the...

Author Info

Magento Developer

Hire S. Gorjia

Fill the form & Get Installation Support

Magento 2 add button in configuration setting with controller action

Recent Articles

Author Info

Get a Free Quote

Connect With Us

Fill the form & Get Installation Support

Let us code, you focus on sales and marketing

Magento 2 add button in configuration setting with controller action

Recent Articles

Author Info

Get a Free Quote

Connect With Us