Add Custom Buttons to Order View Pages in Magento

24th August 2016

This article demonstrates how to add custom buttons to order view pages in Magento.

Within the order, invoice and shipment view pages in the admin, the orange buttons located at the top are located within a form container template that is rendered by one of Magento’s default form container blocks.

A lot of posts online involving adding custom buttons to these pages include complicate rewrites of the form container block and subsequently adding code into the local/Mage directory.

An easy solution to add custom buttons is through the use of observers.

Magento has its very own adminhtml_widget_container_html_before event that we can attach an observer to.

Let’s demonstrate this through the use of a module.

To start with, a module declaration file needs to be added.

<?xml version="1.0"?>
<config>
    <modules>
        <Siphor_Custombuttons>
            <codePool>local</codePool>
            <active>true</active>
        </Siphor_Custombuttons>
    </modules>
</config>

Add the module’s config.xml configuration file, and include the following contents.

<?xml version="1.0"?>
<config>
    <global>
        <models>
            <custombuttons>
                <class>Siphor_Custombuttons_Model</class>
            </custombuttons>
        </models>
    </global>
    <adminhtml>
        <events>
            <adminhtml_widget_container_html_before>
                <observers>
                    <custombuttons>
                        <class>custombuttons/observer</class>
                        <type>singleton</type>
                        <method>addButtons</method>
                    </custombuttons>
                </observers>
            </adminhtml_widget_container_html_before>
        </events>
    </adminhtml>
</config>

Now the Observer.php file needs to be created.

<?php
class Siphor_Custombuttons_Model_Observer
{
    public function addButtons($observer)
    {
        $block = $observer->getBlock();

        if ($block instanceof Mage_Adminhtml_Block_Sales_Order_View) {
            $message = Mage::helper('core')->__('Are you sure you want to do this?');
            $block->addButton('custom_button', array(
                'label'     => Mage::helper('core')->__('Custom Button'),
                'onclick'   => "confirmSetLocation('{$message}', '{$block->getUrl('*/custombuttons/somecontroller/someaction')}')",
                'class'     => 'go'
            ));
        }
    }
}

If you then head to edit an order within your Magento admin area and head to the view order page, you should see the custom button appear.

The button won’t actually go anywhere as we haven’t added a controller for this article. However you should now be able to implement your own logic to hook up the custom button.

You can also add custom buttons to the view invoice and view shipment pages.

<?php
class Siphor_Custombuttons_Model_Observer
{
    public function addButtons($observer)
    {
        $block = $observer->getBlock();

        if ($block instanceof Mage_Adminhtml_Block_Sales_Order_View) {
            $message = Mage::helper('core')->__('Are you sure you want to do this?');
            $block->addButton('custom_button', array(
                'label'     => Mage::helper('core')->__('Custom Button'),
                'onclick'   => "confirmSetLocation('{$message}', '{$block->getUrl('*/custombuttons/somecontroller/someaction')}')",
                'class'     => 'go'
            ));
        }

        if ($block instanceof Mage_Adminhtml_Block_Sales_Order_Invoice_View) {
            // Your code
        }

        if ($block instanceof Mage_Adminhtml_Block_Sales_Order_Shipment_View) {
            // Your code
        }
    }
}

This solution provides a clean way of adding buttons into the admin without having to copy core classes or rewrite form container classes.

Note: This article is based on Magento Community/Open Source version 1.9.