How To

How to add a Custom tab in Admin Sales Order view Magento 2

Customizing Magento Store is primarily a process of tailoring, amending or modifying Magento e-Commerce store and shopping cart in such a way that it meets your business requirements. Magento Backend is already packed with several options that allow you to manage store functionalities efficiently. Because every business is different in its requirements are deferred too.
In Ecommerce, an order is a key part of Business and the number of orders you have, the more information is gathered and stored inside your Magento database that you can easily access via the store backend. To collect only the required information in one place make your task easy. Recently, one of our customers wants to do the same where he wants to add the custom tab in the admin Sales Order view of Magento 2 and here is how we did it.
In the first step, we have to create “sales_order_view.xml” file inside our custom extension layout folder using below code.
app\code\Vendor\Extension\view\adminhtml\layout\

<pre class="lang:default decode:true">
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="sales_order_tabs">
         <action method="addTab">
             <argument name="name" xsi:type="string">custom_tabs</argument>
             <argument name="block" xsi:type="string">Vendor\Extension\Block\Adminhtml\Orderedit\Tab\View</argument>
         </action>
        </referenceBlock>
    </body>
</page>
</pre>

Now, we need to create one more file “View.php” using below code at this path.
app\code\Vendor\Extension\Block\Adminhtml\Orderedit\Tab

<pre class="lang:default decode:true">
<?php
namespace Vendor\Extension\Block\Adminhtml\Orderedit\Tab;
 
class View extends \Magento\Backend\Block\Template implements \Magento\Backend\Block\Widget\Tab\TabInterface
{
    protected $_template = 'tab/view/myorderinfo.phtml';
 
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }
    public function getOrder()
    {
        return $this->_coreRegistry->registry('current_order');
    }
    public function getOrderId()
    {
        return $this->getOrder()->getEntityId();
    }
    public function getOrderIncrementId()
    {
        return $this->getOrder()->getIncrementId();
    }
    public function getTabLabel()
    {
        return __('My Custom Tab');
    }
    public function getTabTitle()
    {
        return __('My Custom Tab');
    }
    public function canShowTab()
    {
        return true;
    }
    public function isHidden()
    {
        return false;
    }
}
</pre>

In the third and last step, we need to create a “Myorderinfo.phtml” file inside our view folder.
app\code\Vendor\Extension\view\adminhtml\templates\tab\view\

<pre class="lang:default decode:true">
<div class="fieldset-wrapper order-information">
    <div class="fieldset-wrapper-title">
        <span class="title"><?php echo __('Information for Custom Order tab') ?></span>
    </div>
    <table class="admin__table-secondary">
        <tbody>
        <tr>
         <th><?php echo __('Order ID:') ?></th>
         <td><?php echo $block->getOrderIncrementId(); ?></td>
        </tr>
        <tr>
         <th><?php echo __('History:') ?></th>
         <td><?php echo __('History of Order') ?></td>
        </tr>
        </tbody>
    </table>
</div>
</pre>

That’s it. Simply clear cache and you are done with adding custom tab in your Magento 2 Admin Sales Order View page.

That’s it for today, Let us know if you are facing an issue while implementing using this code by commenting below.

Happy Coding!

Click to rate this post!

[Total: 7 Average: 5]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏