Read More
Menu Close

    How to create a Button in Configuration Section in Magento 2.0

    Here we will learn that How to create a button at Store -> Configuration -> yourSection in Magento 2.0.

    Button will looks like as displayed in image.

    1. Open a file Webkul/Addbutton/etc/adminhtml/system.xml

    <config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
            <tab id="webkul" translate="label" sortOrder="10">
            <section id="demomanagement" translate="label" type="text" sortOrder="305" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Demo Management</label>
                <group id="showbutton" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <field id="listbutton" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">

    2. Now create a frontend_model that we have defined in system.xml

    namespace Webkul\Addbutton\Block\System\Config\Form;
    use Magento\Framework\App\Config\ScopeConfigInterface;
    class Button extends \Magento\Config\Block\System\Config\Form\Field
    	 const BUTTON_TEMPLATE = 'system/config/button/button.phtml';
         * Set template to itself
         * @return $this
        protected function _prepareLayout()
            if (!$this->getTemplate()) {
            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
            return parent::render($element);
         * Return ajax url for button
         * @return string
        public function getAjaxCheckUrl()
            return $this->getUrl('addbutton/listdata'); //hit controller by ajax call on button click.
         * Get the button and scripts contents
         * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
         * @return string
        protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
            //$originalData = $element->getOriginalData();
                    'id'        => 'addbutton_button',
                    'button_label'     => _('New Button'),
                    'onclick'   => 'javascript:check(); return false;'
            return $this->_toHtml();

    Now lets create a button.phtml

    Searching for an experienced
    Magento 2 Company ?
    Read More
    <div class="pp-buttons-container">
        <button id="<?php echo $block->getId() ?>" onclick="return false;">
            <span><span><span><?php echo $block->escapeHtml($block->getButtonLabel()); ?></span></span></span>

    Now refresh cache and go to your store->configuration->your_section, you will see a button here.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • Justin
    So I have all this working, but the thing I’m trying to do with this is download a file via a button in the module configuration. When I click this button no file is downloaded, but if I extract the ajax url being called and enter it into a new tab, it works fine. Am I missing something in the phtml file that would let me be able to download a file?
  • Back to Top