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 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62838e969d558407027690/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Hire B. Darji

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