Let’s initiate a discussion!!
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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> |
Then you have to create frontend model file & add the below code:
[Vendor Name]\[Module Name]\Block\System\Config\Exportproduct.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?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() ?> |
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.
[crayon-641f0f0455eef078732420/] Using above fucntion Images can be imported directly from...
Override view block using di.xml and add the below code...
You can check a list of called layout XML for...
Follow the below steps to install and set up PWA...
If you want to remove all leading zero's from order,...
Let our Magento expert connect to discuss your requirement.
We offer Magento
certified developers.
Our Magento clientele
is 500+.
We sign NDA for the
security of your projects.
We’ve performed 100+
Magento migration projects.
Free quotation
on your project.
Three months warranty on
code developed by us.