Magento2, We can see order Information, invoice, Credit Memos, Shipment and Comments History, etc. on the admin order view page. Sometimes this tab may not be enough based on the requirements. Add your custom tab in Admin Order View page with just a simple module.
This Blog for Magento version >= 2.4.4 && PHP >= 8.1
Before creating the custom tab, we need to create a new module. You can refer a blog on How to create custom module magento2?. We need to create module.xml and registration.php file.
We need to follow below 3 easy step to add custom tab.
Step 1: Add Tab in Layout
We need to add tab in sales_order_view.xml. Create file at path app/code/MageDad/Module/view/adminhtml/layout/sales_order_view.xml with the following code.
<?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="addTabAfter">
<argument name="name" xsi:type="string">custom_tab</argument>
<argument name="block" xsi:type="string">MageDad\Module\Block\Adminhtml\Order\View\Tab\CustomTab</argument>
<argument name="after" xsi:type="string">order_history</argument>
</action>
</referenceBlock>
</body>
</page>
The above file declares block for set custom tab logic. addTabAfter is a method. Added tab after order_history tab.
Step 2: Create a Block
We need to create CustomTab.php block at path app/code/MageDad/Module/Block/Adminhtml/Order/View/Tab/CustomTab.php with the following code.
<?php
declare(strict_types=1);
namespace MageDad\Module\Block\Adminhtml\Order\View\Tab;
use Magento\Backend\Block\Template;
use Magento\Backend\Block\Template\Context;
use Magento\Backend\Block\Widget\Tab\TabInterface;
use Magento\Framework\Registry;
class CustomTab extends Template implements TabInterface
{
protected $_template = 'MageDad_Module::order/view/tab/customtab.phtml';
public function __construct(
Context $context,
public Registry $registry,
array $data = [],
) {
parent::__construct($context, $data);
}
/**
* {@inheritdoc}
*/
public function getTabLabel()
{
return __('Custom Tab Name');
}
/**
* {@inheritdoc}
*/
public function getTabTitle()
{
return __('Custom Tab Title');
}
/**
* {@inheritdoc}
*/
public function canShowTab()
{
return true;
}
/**
* {@inheritdoc}
*/
public function isHidden()
{
return false;
}
}Above code in, We add some mendatory methods because we implimented TabInterface so we need to add those methods.
Step 3: Create a template
To display HTML in main section. We need to create template at path app/code/MageDad/Module/view/adminhtml/templates/order/view/tab/customtab.phtml
<?php
/** @var $block \MageDad\Module\Block\Adminhtml\Order\View\Tab\CustomTab */
?>
<div class="fieldset-wrapper order-information">
<div class="fieldset-wrapper-title">
<span class="title"><?= \__('This is custom Tab') ?></span>
</div>
<br>
<?= \__('Display your custom data here') ?>
</div>After add above code we need to run cache flush layout commad.php bin/magento cache:flush layout
Output:
Our aims to write quality blog with tested code so we add this code to GitHub
You can see this GitHub commit of add custom tab in order view page.
I hope this blog is useful to add custom tab in order view page magento2. In case, I missed anything or need to add some more information, Don’t heisted to leave a comment in this blog, I’ll get back with some positive approach.
Keep loving ❤️ Keep inspiring 🤩 Keep liking 👍 No sharing 😂