MAGENTO: How to add a button in store configuration

For this illustration, we will add a button in store configuration called "Assign Button". When this button is clicked it will call a controller and perform the necessary function. We will first need to have a custom module where we can manage all this code. For this example we will use Namespace_Module .

	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	-->
	<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
	<system>
	<section id="example_id">
	<group id="general">
	<field id="button_category_brands" translate="label" type="button" sortOrder="10" showInDefault="1">
	<label>Assign Button</label>
	<frontend_model>Namespace\Module\Block\Adminhtml\Store\Configuration\Assign</frontend_model>
	</field>
	</group>
	</section>
	</system>
	</config>

view raw system.xml hosted with ❤ by GitHub

	<?php
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	namespace Namespace\Module\Block\Adminhtml\Store\Configuration;
	use Magento\Config\Block\System\Config\Form\Field;
	use Magento\Backend\Block\Template\Context;
	use Magento\Framework\Data\Form\Element\AbstractElement;
	/**
	* Class Assign
	*/
	class Assign extends Field
	{
	protected $_template = 'Namespace_Module::store/configuration/assign.phtml';
	/**
	* Button constructor.
	*
	* @param Context $context
	* @param array $data
	*/
	public function __construct(
	Context $context,
	array $data = []
	) {
	parent::__construct($context, $data);
	}
	/**
	* @param AbstractElement $element
	*
	* @return string
	*/
	public function render(AbstractElement $element)
	{
	$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
	return parent::render($element);
	}
	/**
	* @param AbstractElement $element
	*
	* @return string
	*/
	protected function _getElementHtml(AbstractElement $element)
	{
	return $this->_toHtml();
	}
	/**
	* @return string
	*/
	public function getAjaxUrl()
	{
	return $this->getUrl('<<module-frontname>>/category/assign'); //MAKE SURE TO CHANGE THE FRONTNAME HERE
	}
	/**
	* @return mixed
	* @throws \Magento\Framework\Exception\LocalizedException
	*/
	public function getButtonHtml()
	{
	$button = $this->getLayout()->createBlock(
	'Magento\Backend\Block\Widget\Button'
	)->setData(
	[
	'id' => 'button_category_brands',
	'label' => __('Assign Button')
	]
	);
	return $button->toHtml();
	}
	}

view raw Assign.php hosted with ❤ by GitHub

	<?php
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	/** @var \Namespace\Module\Block\Adminhtml\Store\Configuration\Assign $block */
	/** @var string $controllerUrl */
	$controllerUrl = $block->getAjaxUrl();
	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>
	<script>
	require([
	'jquery',
	'prototype'
	], function(jQuery){
	var collectSpan = jQuery('#collect_span');
	jQuery("#button_category_brands").click(function () {
	var params = {};
	new Ajax.Request("<?php echo $controllerUrl ?>", {
	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);
	}
	});
	});
	});
	</script>

view raw assign.phtml hosted with ❤ by GitHub

	<?php
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	namespace Namespace\Module\Controller\Adminhtml\Category;
	/**
	* Class Assign
	*/
	class Assign extends \Magento\Catalog\Controller\Adminhtml\Category
	{
	/**
	* @var \Namespace\Module\Helper\Data
	*/
	protected $dataHelper;
	/**
	* @var \Magento\Framework\Controller\Result\JsonFactory
	*/
	protected $resultJsonFactory;
	/**
	* Assign constructor.
	*
	* @param \Magento\Backend\App\Action\Context $context
	* @param \Namespace\Module\Helper\Data $dataHelper
	* @param \Magento\Framework\Controller\Result\JsonFactory $jsonFactory
	* @param \Magento\Framework\Stdlib\DateTime\Filter\Date|null $dateFilter
	* @param \Magento\Store\Model\StoreManagerInterface|null $storeManager
	* @param \Magento\Framework\Registry|null $registry
	* @param \Magento\Cms\Model\Wysiwyg\Config|null $wysiwigConfig
	* @param \Magento\Backend\Model\Auth\Session|null $authSession
	*/
	public function __construct(
	\Magento\Backend\App\Action\Context $context,
	\Namespace\Module\Helper\Data $dataHelper,
	\Magento\Framework\Controller\Result\JsonFactory $jsonFactory,
	\Magento\Framework\Stdlib\DateTime\Filter\Date $dateFilter = null,
	\Magento\Store\Model\StoreManagerInterface $storeManager = null,
	\Magento\Framework\Registry $registry = null,
	\Magento\Cms\Model\Wysiwyg\Config $wysiwigConfig = null,
	\Magento\Backend\Model\Auth\Session $authSession = null
	) {
	parent::__construct($context, $dateFilter, $storeManager, $registry, $wysiwigConfig, $authSession);
	$this->dataHelper = $dataHelper;
	$this->resultJsonFactory = $jsonFactory;
	}
	/**
	* @return \Magento\Framework\App\ResponseInterface|\Magento\Framework\Controller\ResultInterface|void
	* @throws \Magento\Framework\Exception\LocalizedException
	*/
	public function execute()
	{
	$this->dataHelper->performAssignmnet(); //Your Business Logic for assign
	$result = $this->resultJsonFactory->create();
	return $result->setData(['success' => true]);
	}
	}

view raw Assign.php hosted with ❤ by GitHub

This will add button in store configuration.