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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
        <system>
            <tab id="webkul" translate="label" sortOrder="10">
                <label>Webkul</label>
            </tab>
            <section id="demomanagement" translate="label" type="text" sortOrder="305" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Demo Management</label>
                <tab>webkul</tab>
                <resource>Webkul_Addbutton::config_addbutton</resource>
                <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">
                        <frontend_model>Webkul\Addbutton\Block\System\Config\Form\Button</frontend_model>
                    </field>
                </group>
            </section>
        </system>
    </config>
    
    

    2. Now create a frontend_model that we have defined in system.xml
    Webkul/Addbutton/Block/System/Config/Form/Button.php

    <?php
    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()
        {
            parent::_prepareLayout();
            if (!$this->getTemplate()) {
                $this->setTemplate(static::BUTTON_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);
        }
        /**
         * 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();
            $this->addData(
                [
                    'id'        => 'addbutton_button',
                    'button_label'     => _('New Button'),
                    'onclick'   => 'javascript:check(); return false;'
                ]
            );
            return $this->_toHtml();
        }
    }
    
    
    
    

    Now lets create a button.phtml
    Webkul/Addbutton/view/adminhtml/templates/system/config/button/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>
        </button>
    </div>
    
    
    
    

    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*


    1 comments

  • 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