How To

How to Create a Custom tab in Admin Customer Edit page in Magento 2

Requirements vary from business to business. And by default Magento allows store owners to manage several different customer information from the store backend. But it’s not useful to every store owner depending on their business type. At that time instead of manually finding and collecting that information in one place. The best thing we can do is customized our Magento store according to our need and that’s how Magento Custom Development comes in picture.
Recently, one of the customers has asked us about adding a new custom tab in the Magento Customer Edit page. So, he can easily grab all the required information at once place in the store back end. In order to do this, we have created one separate tab in the customer Magento 2 admin. Sharing such useful code with you guys also help you to customize and collect your business information in less than a minute and it will also save your time and efforts that you can use for planning store stuff.
So, let’s get started with these 3 steps tiny guide.
In the first step, we need to create “Customer_index_edit.xml” file inside our layout folder using below code.
app\code\Vendor\Extension\view\adminhtml\layout\customer_index_edit.xml

<pre class="lang:default decode:true">
<?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="customer_form">
            <block class=" Vendor\Extension\Block\Adminhtml\Customeredit\Tab\View" name="customertab_panel">
                <arguments>
                    <argument name="tab_label" xsi:type="string" translate="true"> Custom Tab Label</argument>
                    <argument name="sort_order" xsi:type="number">100</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
</pre>

Now we need to create one Block file “View.php” at the following path.
app\code\Vendor\Extension\Block\Adminhtml\Customeredit\Tab\View.php

<pre class="lang:default decode:true">
<?php

namespace Vendor\Extension\Block\Adminhtml\Customeredit\Tab;

class View extends \Magento\Backend\Block\Template implements \Magento\Ui\Component\Layout\Tabs\TabInterface
{
    protected $_template = 'tab/customtab_view.phtml';//your template file path

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }
    public function getCustomerId()
    {
        return $this->_coreRegistry->registry(\Magento\Customer\Controller\RegistryConstants::CURRENT_CUSTOMER_ID);
    }
    public function getTabLabel()
    {
        return __('Custom Tab');
    }
    public function getTabTitle()
    {
        return __('Custom Tab');
    }

    public function canShowTab()
    {
        if ($this->getCustomerId()) {
            return true;
        }
        return false;
    }
    public function isHidden()
    {
        if ($this->getCustomerId()) {
            return false;
        }
        return true;
    }
    public function getTabClass()
    {
        return '';
    }

    public function getTabUrl()
    {
        return '';
    }
    public function isAjaxLoaded()
    {
        return false;
    }
}
</pre>

In third and last step we need to create “customtab_view.phtml” at below path.
app\code\Vendor\Extension\view\adminhtml\templates\tab\customtab_view.phtml

<pre class="lang:default decode:true">
<div class="fieldset-wrapper customer-information">
    <div class="fieldset-wrapper-title">
        <span class="title"><?php echo __('Customer Custom Tab Information') ?></span>
    </div>
    <table class="admin__table-secondary">
        <tbody>
        <tr>
            <th><?php echo __('Customer ID:') ?></th>
            <td><?php echo $block->getCustomerId(); ?></td>
        </tr>
        <tr>
            <th><?php echo __('Custom Details :') ?></th>
            <td><?php echo __('Customer Details') ?></td>
        </tr>
        </tbody>
    </table>
</div>
</pre>

That’s it. Simply clear cache and you are done with adding your custom tab inside Magento 2 store backend Edit customer page. You can add one or more elements to “customtab_view.phtml” according to your need for collecting information at one place.

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: 9 Average: 4.8]

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.🏏