In Magento 2, You can add a new custom tab on the Customer Edit page.
If you want to add a new tab in the Customer edit section for your custom requirement, You can add easily a customer tab in the Customer edit section.
You need to create a simple module to add an extra tab in the customer edit section.
Refer to the code snippet for adding an extra tab,
I have taken Rbj as Packagename and CustomerTab as modulename for simplicity.
You need to create the first registration.php and module.xml files to define our module.
Path: app/code/Rbj/CustomerTab/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Rbj_CustomerTab',
__DIR__
);
Create module.xml file, Path: app/code/Rbj/CustomerTab/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_CustomerTab" setup_version="2.0.0">
<sequence>
<module name="Magento_Customer"/>
</sequence>
</module>
</config>
We have added a dependency for the Magento Customer Module to add a new tab on the customer edit page. So we have defined the Magento_Customer module in sequence tag in the above XML file.
Now comes the main entry point of a module,
For Adding a new tab, We must override the customer_index_edit.xml file to add our logic for adding custom tabs.
A referenceBlock customer_form contains the tab lists for the customer edit section page.
We have declared Rbj\CustomerTab\Block\Adminhtml\CustomerEdit\Tab\View.php file as a Block file.
So we need to create a customer_index_edit.xml file in our module below,
Path: app/code/Rbj/CustomerTab/view/adminhtml/layout/customer_index_edit.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="customer_form">
<block class="Rbj\CustomerTab\Block\Adminhtml\CustomerEdit\Tab\View" name="customertab_panel">
<arguments>
<argument name="tab_label" xsi:type="string" translate="true">My Custom New Tab</argument>
<argument name="sort_order" xsi:type="number">100</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
In the above file, We have declared a Block file to set your custom logic, which you want to display in custom tabs of the customer edit page.
Create a New Block PHP file,
Path: app/code/Rbj/CustomerTab/Block/Adminhtml/CustomerEdit/Tab/View.php
<?php
namespace Rbj\CustomerTab\Block\Adminhtml\CustomerEdit\Tab;
class View extends \Magento\Backend\Block\Template implements \Magento\Ui\Component\Layout\Tabs\TabInterface
{
/**
* Template
*
* @var string
*/
protected $_template = 'tab/customer_view.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);
}
/**
* @return string|null
*/
public function getCustomerId()
{
return $this->_coreRegistry->registry(\Magento\Customer\Controller\RegistryConstants::CURRENT_CUSTOMER_ID);
}
/**
* @return \Magento\Framework\Phrase
*/
public function getTabLabel()
{
return __('Custom Tab');
}
/**
* @return \Magento\Framework\Phrase
*/
public function getTabTitle()
{
return __('Custom Tab');
}
/**
* @return bool
*/
public function canShowTab()
{
if ($this->getCustomerId()) {
return true;
}
return false;
}
/**
* @return bool
*/
public function isHidden()
{
if ($this->getCustomerId()) {
return false;
}
return true;
}
/**
* Tab class getter
*
* @return string
*/
public function getTabClass()
{
return '';
}
/**
* Return URL link to Tab content
*
* @return string
*/
public function getTabUrl()
{
return '';
}
/**
* Tab should be loaded trough Ajax call
*
* @return bool
*/
public function isAjaxLoaded()
{
return false;
}
}
Above file, We can declare a template file using the $_template variable.
protected $_template = 'tab/customer_view.phtml' used for template files for our custom tabs.
You can set the Custom Tab label by getTabLabel() and set the title using the getTabTitle() function. You can define a custom function for your requirement in the above file.
If you want to show the content of your custom tab via Ajax, you need to return true for the isAjaxLoaded() function.
You can get Current customer data by calling the Magento\Framework\Registry object.
Now we need to create a template file, Path: app/code/Rbj/CustomerTab/view/adminhtml/templates/tab/customer_view.phtml
<?php
/**
* @var $block \Rbj\CustomerTab\Block\Adminhtml\CustomerEdit\Tab\View
*/
?>
<div class="fieldset-wrapper customer-information">
<div class="fieldset-wrapper-title">
<span class="title"><?php /* @escapeNotVerified */
echo __('Information for new Customer tab') ?></span>
</div>
<table class="admin__table-secondary">
<tbody>
<?php echo $block->getChildHtml(); ?>
<tr>
<th><?php /* @escapeNotVerified */
echo __('Customer ID:') ?></th>
<td><?php echo $block->getCustomerId(); ?></td>
</tr>
<tr>
<th><?php /* @escapeNotVerified */
echo __('Customer History:') ?></th>
<td><?php echo __('History of Customer display') ?></td>
</tr>
</tbody>
</table>
</div>
Now Run the Upgrade command to install our module.
php bin/magento setup:upgrade php bin/magento cache:flush php bin/magento indexer:reindex customer_grid
Now Go To the Admin panel,
Log in with your credentials,
Click on the Left Sidebar, Customers -> All Customers Link,
Click on Any Customer, You can show the tab as your new custom tab on the Customer edit page.
Your new tab will be available on the customer edit page.