Magento® – Add Custom Block in Admin Sales Order Page

Sometimes you need to add custom block in the Order view page of Magento admin. You can use this block to show some custom information that you saved with the order. You can also show custom form to edit order information. In this article I will show you how to add Custom Block in Admin Sales Order Page in Magento.

Here is what will you get in the end:

Magento- admin

1. Create the admin layout file for your module in app/design/adminhtml/default/default/layout/mymodule.xml
Dont forget to specify the admin layout file in your module’s config.xml, In this file we will add our custom template in the sales/order/view page

app/design/adminhtml/default/default/layout/mymodule.xml

<?xml version="1.0"?>
<layout version="1.0">
    <!-- Adding the block in sales/order/view page -->
    <adminhtml_sales_order_view>
        <!-- You can change the reference to whatever you like. Look ate layout/sales.xml for more options -->
        <!-- This should be same in Model/Observer.php::getSalesOrderViewInfo() -->
        <reference name="order_info">
            <block type="mymodule/adminhtml_sales_order_view_info_block" name="mymodule.order.info.custom.block" template="mymodule/custom.phtml" before="order_history" />
        </reference>
    </adminhtml_sales_order_view>
</layout>

2. Create the admin template file in app/design/adminhtml/default/default/template/mymodule/custom.phtml

app/design/adminhtml/default/default/template/mymodule/custom.phtml

<?php $order = $this->getOrder() ?>
<div class="entry-edit box-left">
    <div class="entry-edit-head">
        <h4 class="icon-head"><?php echo $this->__('My Custom Block') ?></h4>
    </div>
    <fieldset>
        <div id="mymodule_custom_block">
            Special message
        </div>
    </fieldset>
</div>
<div class="clear"></div>

3. Create the block file for the template at app\code\local\Webspeaks\MyModule\Block\Adminhtml\Sales\Order\View\Info\Block.php

app\code\local\Webspeaks\MyModule\Block\Adminhtml\Sales\Order\View\Info\Block.php

<?php
class Webspeaks_MyModule_Block_Adminhtml_Sales_Order_View_Info_Block extends Mage_Core_Block_Template {
    
    protected $order;
    
    public function getOrder() {
        if (is_null($this->order)) {
            if (Mage::registry('current_order')) {
                $order = Mage::registry('current_order');
            }
            elseif (Mage::registry('order')) {
                $order = Mage::registry('order');
            }
            else {
                $order = new Varien_Object();
            }
            $this->order = $order;
        }
        return $this->order;
    }
}

4. Add event in the moduls’s config.xml. We will capture the core_block_abstract_to_html_after event and call our observer’s method

app/code/local/Webspeaks/MyModule/config.xml

<config>
    <adminhtml>
        <events>
            <core_block_abstract_to_html_after>
                <observers>
                    <mymodule_custom_order_view_info>
                        <class>mymodule/observer</class>
                        <method>getSalesOrderViewInfo</method>
                    </mymodule_custom_order_view_info>
                </observers>
            </core_block_abstract_to_html_after>
        </events>
    </adminhtml>
</config>

5. Add Model/Observer.php

app/code/local/Webspeals/MyModule/Model/Observer.php

<?php
class Webspeaks_MyModule_Model_Observer {

    // This function is called on core_block_abstract_to_html_after event
    // We will append our block to the html
    public function getSalesOrderViewInfo(Varien_Event_Observer $observer) {
        $block = $observer->getBlock();
        // layout name should be same as used in app/design/adminhtml/default/default/layout/mymodule.xml
        if (($block->getNameInLayout() == 'order_info') && ($child = $block->getChild('mymodule.order.info.custom.block'))) {
            $transport = $observer->getTransport();
            if ($transport) {
                $html = $transport->getHtml();
                $html .= $child->toHtml();
                $transport->setHtml($html);
            }
        }
    }
}

Now refresh your sales/order/view page and you should see the new block added there.

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

11 thoughts on “Magento® – Add Custom Block in Admin Sales Order Page

  1. You forgot to mention the layout.xml in your config.xml.

    <layout>
    <updates>
    <my_custom>
    <file>my_layout/custom.xml</file>
    </my_custom>
    </updates>
    </layout>

    1. hi UBONG HANSON,

      ARVIND BHARDWAJ forgot to mention the layout.xml in your config.xml, so please add the layout configuration bellow to your config.xml file:

      <adminhtml>
      <layout>
      <updates>
      <dika_paketid>
      <file> mymodule.xml</file>
      </dika_paketid>
      </updates>
      </layout>
      </adminhtml>

  2. Hi, for the invoice? if add adminhtml_sales_order_invoice_view in the mymodule.xml work but the block class dont retunt the order to the custom.phtml

    in the shipment too! please help

  3. Hi,

    How about if I have a custom field for the order, and it is placed inside the new block. and when the order is submitted/created, the field will also be save into the order

  4. Hi,

    i have added this code :

    <adminhtml>
    <layout>
    <updates>
    <webspeaks>
    <file>mymodule.xml</file>
    </webspeaks>
    </updates>
    </layout>
    </adminhtml>

    in my custom module's config.xml file., i am still unable to see the block in sale order view page in admin, please correct me what i am doing wrong.
    Thank you !

Leave a Reply

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

one × one =