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]etcadminhtmlsystem.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]BlockSystemConfigExportproduct</frontend_model>
<comment><![CDATA[Your Field Comment Here]]></comment>
</field>
</group>
</section>
</system>
</config>
Then you have to create frontend model file & add the below code:
[Vendor Name][Module Name]BlockSystemConfigExportproduct.php
<?php
namespace [Vendor Name][Module Name]BlockSystemConfig;
/**
* Class Exportproduct
* @package [Vendor Name][Module Name]BlockSystemConfig
*/
class Exportproduct extends MagentoConfigBlockSystemConfigFormField
{
protected $_template = '[Vendor Name]_[Module Name]::system/config/exportproduct.phtml';
public function __construct(
MagentoBackendBlockTemplateContext $context,
array $data = []
) {
parent::__construct($context, $data);
}
public function render(MagentoFrameworkDataFormElementAbstractElement $element)
{
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $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(
'MagentoBackendBlockWidgetButton'
)->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]viewadminhtmltemplatessystemconfigexportproduct.phtml
<?php
/**
* @var [Vendor Name][Module Name]BlockSystemConfigExportproduct $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() ?>
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.
