How can I add a button in Magento 2 backend configuration section and call a simple PHP method when clicked the button?
This method call can be an AJAX call.
Add a comment
|
6 Answers
We will describe the solution using our Others Also Bought module as the example, where MageWorx – a vendor name and AlsoBought – a module name:
First, you need to add your button as a field in the configuration file. (mageworx_collect as the example):
app/code/MageWorx/AlsoBought/etc/adminhtml/system.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="mageworx" sortOrder="2001">
<label>MageWorx</label>
</tab>
<section id="mageworx_alsobought" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Also Bought</label>
<tab>mageworx</tab>
<resource>MageWorx_AlsoBought::config</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>General</label>
<field id="mageworx_collect" translate="label comment" type="button" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
<frontend_model>MageWorx\AlsoBought\Block\System\Config\Collect</frontend_model>
<label>Collect all available data (in separate table)</label>
</field>
</group>
</section>
</system>
</config>
To draw this field-button the frontend model MageWorx\AlsoBought\Block\System\Config\Collect will be used. Create it:
app/code/MageWorx/AlsoBought/Block/System/Config/Collect.php
<?php
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
namespace MageWorx\AlsoBought\Block\System\Config;
use Magento\Backend\Block\Template\Context;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;
class Collect extends Field
{
/**
* @var string
*/
protected $_template = 'MageWorx_AlsoBought::system/config/collect.phtml';
/**
* @param Context $context
* @param array $data
*/
public function __construct(
Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
/**
* Remove scope label
*
* @param AbstractElement $element
* @return string
*/
public function render(AbstractElement $element)
{
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
/**
* Return element html
*
* @param AbstractElement $element
* @return string
*/
protected function _getElementHtml(AbstractElement $element)
{
return $this->_toHtml();
}
/**
* Return ajax url for collect button
*
* @return string
*/
public function getAjaxUrl()
{
return $this->getUrl('mageworx_alsobought/system_config/collect');
}
/**
* Generate collect button html
*
* @return string
*/
public function getButtonHtml()
{
$button = $this->getLayout()->createBlock(
'Magento\Backend\Block\Widget\Button'
)->setData(
[
'id' => 'collect_button',
'label' => __('Collect Data'),
]
);
return $button->toHtml();
}
}
?>
This is a typical field model. The button is drawn using the getButtonHtml() method. Use the getAjaxUrl() method to get a URL.
Then, you will need the template:
app/code/MageWorx/AlsoBought/view/adminhtml/templates/system/config/collect.phtml
<?php
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
?>
<?php /* @var $block \MageWorx\AlsoBought\Block\System\Config\Collect */ ?>
<script>
require([
'jquery',
'prototype'
], function(jQuery){
var collectSpan = jQuery('#collect_span');
jQuery('#collect_button').click(function () {
var params = {};
new Ajax.Request('<?php echo $block->getAjaxUrl() ?>', {
parameters: params,
loaderArea: false,
asynchronous: true,
onCreate: function() {
collectSpan.find('.collected').hide();
collectSpan.find('.processing').show();
jQuery('#collect_message_span').text('');
},
onSuccess: function(response) {
collectSpan.find('.processing').hide();
var resultText = '';
if (response.status > 200) {
resultText = response.statusText;
} else {
resultText = 'Success';
collectSpan.find('.collected').show();
}
jQuery('#collect_message_span').text(resultText);
var json = response.responseJSON;
if (typeof json.time != 'undefined') {
jQuery('#row_mageworx_alsobought_general_collect_time').find('.value .time').text(json.time);
}
}
});
});
});
</script>
<?php echo $block->getButtonHtml() ?>
<span class="collect-indicator" id="collect_span">
<img class="processing" hidden="hidden" alt="Collecting" style="margin:0 5px" src="<?php echo $block->getViewFileUrl('images/process_spinner.gif') ?>"/>
<img class="collected" hidden="hidden" alt="Collected" style="margin:-3px 5px" src="<?php echo $block->getViewFileUrl('images/rule_component_apply.gif') ?>"/>
<span id="collect_message_span"></span>
</span>
You will have to rewrite the part of the code according to your needs but I will leave it as an example. The Ajax request method onCreate and onSuccess should suit your needs. Also, you can remove the <span class="collect-indicator" id="collect_span"> element. We use it to display the loading (spinner) and the result of the action.
Also, you will need a controller, where all required operations will be processed, and a router.
app/code/MageWorx/AlsoBought/etc/adminhtml/routes.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="mageworx_alsobought" frontName="mageworx_alsobought">
<module name="MageWorx_AlsoBought" before="Magento_Backend" />
</route>
</router>
</config>
app/code/MageWorx/AlsoBought/Controller/Adminhtml/System/Config/Collect.php
<?php
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
namespace MageWorx\AlsoBought\Controller\Adminhtml\System\Config;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use MageWorx\AlsoBought\Helper\Data;
class Collect extends Action
{
protected $resultJsonFactory;
/**
* @var Data
*/
protected $helper;
/**
* @param Context $context
* @param JsonFactory $resultJsonFactory
* @param Data $helper
*/
public function __construct(
Context $context,
JsonFactory $resultJsonFactory,
Data $helper
)
{
$this->resultJsonFactory = $resultJsonFactory;
$this->helper = $helper;
parent::__construct($context);
}
/**
* Collect relations data
*
* @return \Magento\Framework\Controller\Result\Json
*/
public function execute()
{
try {
$this->_getSyncSingleton()->collectRelations();
} catch (\Exception $e) {
$this->_objectManager->get('Psr\Log\LoggerInterface')->critical($e);
}
$lastCollectTime = $this->helper->getLastCollectTime();
/** @var \Magento\Framework\Controller\Result\Json $result */
$result = $this->resultJsonFactory->create();
return $result->setData(['success' => true, 'time' => $lastCollectTime]);
}
/**
* Return product relation singleton
*
* @return \MageWorx\AlsoBought\Model\Relation
*/
protected function _getSyncSingleton()
{
return $this->_objectManager->get('MageWorx\AlsoBought\Model\Relation');
}
protected function _isAllowed()
{
return $this->_authorization->isAllowed('MageWorx_AlsoBought::config');
}
}
?>
P.S. This is the working example from our MageWorx Others Also Bought module. If you want to study it, you can download it for free.
-
I have used your answer, but how do I call functions defined in
Controller/Adminhtml/System/Config/Collection.php?– CondorCommented Apr 5, 2018 at 12:43
You check it also in vendor/magento/module-customer/etc/adminhtml/system.xml for button. Below code check it in above path. Create frontend_model like this vendor/magento/module-customer/Block/Adminhtml/System/Config/Validatevat.php.
<group id="store_information">
<field id="validate_vat_number" translate="button_label" sortOrder="62" showInDefault="1" showInWebsite="1" showInStore="0">
<button_label>Validate VAT Number</button_label>
<frontend_model>Magento\Customer\Block\Adminhtml\System\Config\Validatevat</frontend_model>
</field>
</group>
Above path for your reference. Now create proper for your own module.
answered Aug 5, 2016 at 5:28
To a add a button in system configuration and run a custom function, you need to create frontend_model to render your button. In template of frontend_model, you can write your ajax logic.
Here is an example:
System.xml
Path: /root_path/magento2/app/code/Skumar/Sync/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="skumar" translate="label" sortOrder="1000">
<label>Skumar Extensions</label>
</tab>
<section id="sync" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Sync</label>
<tab>skumar</tab>
<resource>Skumar_Sync::config</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Configuration</label>
<field id="build_indexes" translate="label comment tooltip" type="button" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Build Search Indexes</label>
<frontend_model>Skumar\Sync\Block\System\Config\Synchronize</frontend_model>
</field>
</group>
</section>
</system>
</config>
Frontend Model
This class will be responsible for rendering the button html. getButtonHtml() function will generate button html.
Path: /{root_path}/magento2/app/code/Skumar/Sync/Block/System/Config/Synchronize.php
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Skumar\Sync\Block\System\Config;
/**
* Synchronize button renderer
*/
class Synchronize extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* @var string
*/
protected $_template = 'Skumar_Sync::system/config/synchronize.phtml';
/**
* @param \Magento\Backend\Block\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
/**
* Remove scope label
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
/**
* Return element html
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
return $this->_toHtml();
}
/**
* Return ajax url for synchronize button
*
* @return string
*/
public function getAjaxSyncUrl()
{
return $this->getUrl('sync/system_config/synchronize');
}
/**
* Generate synchronize button html
*
* @return string
*/
public function getButtonHtml()
{
$button = $this->getLayout()->createBlock(
'Magento\Backend\Block\Widget\Button'
)->setData(
[
'id' => 'synchronize_button',
'label' => __('Synchronize'),
]
);
return $button->toHtml();
}
}
Here, we've our frontend_model to render button. Now, we need to create a controller class that will handle our ajax request.
Synchronize.php
Path: /{root_path}/magento2/app/code/Skumar/Sync/Controller/Adminhtml/System/Config/Synchronize.php
<?php
/**
*
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Skumar\Sync\Controller\Adminhtml\System\Config;
use \Magento\Catalog\Model\Product\Visibility;
class Synchronize extends \Magento\Backend\App\Action
{
/**
* @var \Psr\Log\LoggerInterface
*/
protected $_logger;
/**
* @param \Magento\Backend\App\Action\Context $context
* @param \Psr\Log\LoggerInterface $logger
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Psr\Log\LoggerInterface $logger
) {
$this->_logger = $logger;
parent::__construct($context);
}
/**
* Synchronize
*
* @return void
*/
public function execute()
{
$this->_logger->debug('Sync Starts!!');
// do whatever you want to do
}
}
We've a function getAjaxSyncUrl() in our frontend_model that will return the url of this controller. Also, there is variable $_template in frontend_model that holds the path our template file for our renderer.
synchronize.phtml
Path: /{root_path}/magento2/app/code/Skumar/Sync/view/adminhtml/templates/system/config/synchronize.phtml
<?php /* @var $block \Skumar\Sync\Block\System\Config\Synchronize */ ?>
<script>
require([
'jquery',
'prototype',
], function(jQuery){
function syncronize() {
params = {
};
new Ajax.Request('<?php /* @escapeNotVerified */ echo $block->getAjaxSyncUrl() ?>', {
loaderArea: false,
asynchronous: true,
parameters: params,
onSuccess: function(transport) {
var response = JSON.parse(transport.responseText);
}
});
}
jQuery('#synchronize_button').click(function () {
syncronize();
});
});
</script>
<?php echo $block->getButtonHtml() ?>
You can see in template, on click of button, it will trigger a ajax request to the controller defined in forntend_model.
I hope it will help.
-
hello @Shyam, how to pass the params? I have other two text fields in store config, how can we pass them as params in above approach? Commented Apr 9, 2021 at 8:08
You need to define custom frontend_model for custom render field in configuration. You can take help from this link.
To create a button in backend configuration section, you need to do these steps:
Step 1: Add a field is button in file system.xml like these scripts:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="namespace" translate="label" sortOrder="400">
<label>Namspace Module</label>
</tab>
<section id="section" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Section Name</label>
<tab>tab</tab>
<resource>Namespace_Module::resource</resource>
<group id="group_id" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Group Label</label>
<field id="button" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
<button_label>Button</button_label>
<frontend_model>Namspace\Module\Block\System\Config\Button</frontend_model>
</field>
</group>
</section>
</system>
</config>
Step 2: Create system button Block:
Create file Namspace\Module\Block\System\Config\Button.php:
<?php
namespace Namespace\Module\Block\System\Config;
use Magento\Backend\Block\Template\Context;
use Magento\Customer\Model\Session;
use Magento\Framework\ObjectManagerInterface;
class Button extends \Magento\Config\Block\System\Config\Form\Field {
/**
* Path to block template
*/
const CHECK_TEMPLATE = 'system/config/button.phtml';
public function __construct(Context $context,
$data = array())
{
parent::__construct($context, $data);
}
/**
* Set template to itself
*
* @return $this
*/
protected function _prepareLayout()
{
parent::_prepareLayout();
if (!$this->getTemplate()) {
$this->setTemplate(static::CHECK_TEMPLATE);
}
return $this;
}
/**
* Render button
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
// Remove scope label
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$this->addData(
[
'url' => $this->getUrl(),
'html_id' => $element->getHtmlId(),
]
);
return $this->_toHtml();
}
protected function getUrl()
{
return "url"; //This is your real url you want to redirect when click on button
}
}
Step 3: Create file view/adminhtml/templates/system/config/button.phtml:
<div class="pp-buttons-container">
<p>
<button id="<?php echo $block->getHtmlId() ?>" onclick="setLocation('<?php /* @escapeNotVerified */ echo $block->getUrl() ?>')" type="button">
<?php /* @escapeNotVerified */ echo __('Click Here') ?>
</button>
</p>
</div>
I agree with mageworx, indeed, if you wanna do this module in magento2.3, you 'll need to init Http request class in your controller to enable ajax request and resolve error500 issues.
use Magento\Framework\App\Request\Http;
****
protected $request;
****
public function __construct(
Context $context,
JsonFactory $resultJsonFactory,
Http $request
)
{
$this->resultJsonFactory = $resultJsonFactory;
$this->_request = $request;
parent::__construct($context);
}
****
