Adding a button to the system configuration of Magento

If you recently started to learn Magento and presently develop own Magento extensions, one day you will face with Admin’s System Configuration section. This is a place where you can store some settings for your module. There are many tutorials on the web, explaining how to set up different form elements in System Configuration. This article shows how to add a button.

Button in System Config can be used to launch different actions of your extension. In our case, button will call some controller via Ajax and return some result.
Let’s assume that you have already created system.xml file which is used to set Admin system configuration section of your module. Next, we defined “tools” group and inserted a new field:

...
<groups>
    <tools translate="label">
        <label>Tools</label>
        <sort_order>3</sort_order>
        <show_in_default>1</show_in_default>
        <show_in_website>1</show_in_website>
        <show_in_store>1</show_in_store>
        <fields>
            <check translate="label">
                <label>Check</label>
                <frontend_type>button</frontend_type>
                <frontend_model>atwixtweaks/adminhtml_system_config_form_button</frontend_model>
                <sort_order>20</sort_order>
                <show_in_default>1</show_in_default>
                <show_in_website>1</show_in_website>
                <show_in_store>1</show_in_store>
            </check>
        </fields>
    </tools>
</groups>
...

There are two tags that we are interested in:

<frontend_type>

and

<frontend_model>

The first one defines type of the field. The second one frontend_model – is a block class which is used to render element. For ‘button’ field renderer class is required. So, let’s create our field renderer class.

class Atwix_Tweaks_Block_Adminhtml_System_Config_Form_Button extends Mage_Adminhtml_Block_System_Config_Form_Field
{
    /*
     * Set template
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('atwix/system/config/button.phtml');
    }

    /**
     * Return element html
     *
     * @param  Varien_Data_Form_Element_Abstract $element
     * @return string
     */
    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
    {
        return $this->_toHtml();
    }

    /**
     * Return ajax url for button
     *
     * @return string
     */
    public function getAjaxCheckUrl()
    {
        return Mage::helper('adminhtml')->getUrl('adminhtml/adminhtml_atwixtweaks/check');
    }

    /**
     * Generate button html
     *
     * @return string
     */
    public function getButtonHtml()
    {
        $button = $this->getLayout()->createBlock('adminhtml/widget_button')
            ->setData(array(
            'id'        => 'atwixtweaks_button',
            'label'     => $this->helper('adminhtml')->__('Check'),
            'onclick'   => 'javascript:check(); return false;'
        ));

        return $button->toHtml();
    }
}

Note, that _getElementHtml function is required.
Next, create the template file:

<script type="text/javascript">
    //<![CDATA[
    function check() {
        new Ajax.Request('<?php echo $this->getAjaxCheckUrl() ?>', {
            method:     'get',
            onSuccess: function(transport){

            if (transport.responseText){
                alert('Checked')
            }
            }
        });
    }
    //]]>
</script>

<?php echo $this->getButtonHtml() ?>

Here we retrieve button’s HTML and store our JavaScript code to send XMLHttpRequest request.
Also, we need to create controller to receive request and process something. Just one checkAction function is needed for our example.

class Atwix_Tweaks_Adminhtml_AtwixtweaksController extends Mage_Adminhtml_Controller_Action
{
    /**
     * Return some checking result
     *
     * @return void
     */
    public function checkAction()
    {
        $result = 1;
        Mage::app()->getResponse()->setBody($result);
    }
}

That is it. Button click triggers our Ajax request to controller, where we can process something and return the result. The complete code can be found here.
Your feedback is warmly welcome. Stay tuned!