How to add custom tab in admin Sales Order view magento 2?

In Magento 2, Sales Order Page in the admin panel, Many Tabs are available by native like Information, Invoices, Shipments, Credit Memos, Transactions and comment history.

For your custom requirement, you need to add extra tab in Order page, You can add your custom tab in Admin Order View page by just simple module.

You need to create simple module for add extra tab.

Refer below code snippet for add extra tab,
I have taken Rbj as Package name and OrderTab as Modulename for simplicity.
You need to create first registration.php and module.xml file for defining our module.

Path: app/code/Rbj/OrderTab/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Rbj_OrderTab',
    __DIR__
);

Create module.xml file, Path: app/code/Rbj/OrderTab/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Rbj_OrderTab" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

We have added the dependency on Magento Sales Module to add the new tab. So we have defined the Magento_Sales module in sequence tag in the above XML file.

Now comes to the main entry point of a module,
For Add new tab, We must override the sales_order_view.xmlfile to add our logic of add custom tabs.

A Reference block sales_order_tabs contains the tab lists. so we need to create sales_order_view.xmlfile in our module at below path,

Path: app/code/Rbj/OrderTab/view/adminhtml/layout/sales_order_view.xml

<?xml version="1.0"?>

<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">Rbj\OrderTab\Block\Adminhtml\OrderEdit\Tab\View</argument>
            </action>
        </referenceBlock>
    </body>
</page>

In the above file, We have declared Block file for set your custom logic, you want to display in custom tabs.

Create a New Block PHP file, Path: app/code/Rbj/OrderTab/Block/Adminhtml/OrderEdit/Tab/View.php

<?php
namespace Rbj\OrderTab\Block\Adminhtml\OrderEdit\Tab;

/**
 * Order custom tab
 *
 */
class View extends \Magento\Backend\Block\Template implements \Magento\Backend\Block\Widget\Tab\TabInterface
{
    protected $_template = 'tab/view/my_order_info.phtml';

    /**
     * View constructor.
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }

    /**
     * Retrieve order model instance
     *
     * @return \Magento\Sales\Model\Order
     */
    public function getOrder()
    {
        return $this->_coreRegistry->registry('current_order');
    }

    /**
     * Retrieve order model instance
     *
     * @return \Magento\Sales\Model\Order
     */
    public function getOrderId()
    {
        return $this->getOrder()->getEntityId();
    }

    /**
     * Retrieve order increment id
     *
     * @return string
     */
    public function getOrderIncrementId()
    {
        return $this->getOrder()->getIncrementId();
    }

    /**
     * {@inheritdoc}
     */
    public function getTabLabel()
    {
        return __('My Custom Tab');
    }

    /**
     * {@inheritdoc}
     */
    public function getTabTitle()
    {
        return __('My Custom Tab');
    }

    /**
     * {@inheritdoc}
     */
    public function canShowTab()
    {
        return true;
    }

    /**
     * {@inheritdoc}
     */
    public function isHidden()
    {
        return false;
    }
}

Above file, We can declare a template file using a $_template variable.

protected $_template = 'tab/view/my_order_info.phtml' used for a template file for our custom tabs.

You can set Custom Tab label by getTabLabel() and set title by getTabTitle() function. You can define a custom function for your requirement in the above file.

You can get Current order data by calling Magento\Framework\Registry object.

Now we need to create a template file,
Path: app/code/Rbj/OrderTab/view/adminhtml/templates/tab/view/my_order_info.phtml

<?php
/**
 * @var $block \Rbj\OrderTab\Block\Adminhtml\OrderEdit\Tab\View
 */
?>

<div class="fieldset-wrapper order-information">
    <div class="fieldset-wrapper-title">
        <span class="title"><?php /* @escapeNotVerified */
            echo __('Information for new Order tab') ?></span>
    </div>
    <table class="admin__table-secondary">
        <tbody>
        <?php echo $block->getChildHtml(); ?>
        <tr>
            <th><?php /* @escapeNotVerified */
                echo __('Order ID:') ?></th>
            <td><?php echo $block->getOrderIncrementId(); ?></td>
        </tr>
        <tr>
            <th><?php /* @escapeNotVerified */
                echo __('Last History:') ?></th>
            <td><?php echo __('History of order') ?></td>
        </tr>
        </tbody>
    </table>
</div>

Now Run Upgrade command to install our module.

php bin/magento setup:upgrade
php bin/magento cache:flush

Now Go To Admin panel, login with your credentials,
Click on Left Sidebar, Sales -> Order Link,
Click on Any Order, You can get the last tab as your new custom tab in Order View page.

Check the Custom tab in Sales Order Page,

You can also add Extra button on Toolbar by, Add custom button on the sales order view admin page.

Share this:

Related