Merchants may want to view some additional information like comments , reward points etc of a particular customer in the back end. In order to show this, we need to create a tab in the customer admin.
In this blog, we shall see, how to create a new tab in the customer admin and to load custom PHTML into it. Let us say, the tab’s name is “Customer Credit”.
Before creating the customer tab, we need to create a new module. We already have a blog on “How to create a new module in Magento 2?” . Please refer the same for more details.
STEP 1:
To create a new tab in the admin customer edit, create a xml in the following path
/app/code/Vendorname/modulename/view/adminhtml/layout/customer_index_edit.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="customer_form">
<block class="Vendorname\Modulename\Block\Adminhtml\Edit\Tab\Blockname" name="customer_edit_tab_credit" >
<action method="setTabLabel">
<argument name="label" xsi:type="string">Customer Credit</argument>
</action>
</block>
</referenceBlock>
</body>
</page>STEP 2:
Create a block file in the below path to load the contents when the tab is clicked
/app/code/Vendorname/Modulename/Block/Adminhtml/Edit/Tab/Credit.php
<?php
namespace Vendorname \ Modulename \Block\Adminhtml\Edit\Tab;
use Magento\Customer\Controller\RegistryConstants;
use Magento\Ui\Component\Layout\Tabs\TabInterface;
class Credit extends \Magento\Framework\View\Element\Template implements TabInterface
{
/**
* Core registry
*
* @var \Magento\Framework\Registry
*/
protected $_coreRegistry;
/**
* @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(RegistryConstants::CURRENT_CUSTOMER_ID);
}
/**
* @return \Magento\Framework\Phrase
*/
public function getTabLabel()
{
return __(‘Tab label’);
}
/**
* @return \Magento\Framework\Phrase
*/
public function getTabTitle()
{
return __(‘Tab Title’);
}
/**
* @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()
{
//replace the tab with the url you want
return $this->getUrl('credit/*/credit', ['_current' => true]);
}
/**
* Tab should be loaded trough Ajax call
*
* @return bool
*/
public function isAjaxLoaded()
{
return true;
}
}I have the block name as “Credit”. The block implements from TabInterface. The most important function in this class is : getTabUrl() and isAjaxLoaded() :
getTabUrl() contain the code return $this->getUrl(credit/*/credit, [‘_current’ => true]); equal go to action and execute the complete path of your controller in Magento 2.
STEP 3:
Following is the routes.xml for creating a controller to make the url valid.
/app/code/Vendorname/Modulename/etc/adminhtml/routes.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="credit" frontName="credit">
<module name="Vendorname_Modulename" />
</route>
</router>
</config>STEP 4:
Lets now create a controller with the class name Credit in the below path :
/app/code/Vendorname/Modulename/Controller/Adminhtml/Index/Credit.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Vendorname\Modulename\Controller\Adminhtml\Index;
class Credit extends \Magento\Customer\Controller\Adminhtml\Index
{
/**
* Customer compare grid
*
* @return \Magento\Framework\View\Result\Layout
*/
public function execute()
{
$this->initCurrentCustomer();
$resultLayout = $this->resultLayoutFactory->create();
return $resultLayout;
}
}STEP 5:
Create another xml to mention which phtml file has to load
/app/code/Vendorname/Modulename/view/adminhtml/layout/credit_index_credit.xml
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<container name="content" label="Root">
<block class="\Vendorname\Modulename\Block\Adminhtml\Edit\Tab\Tabname" name="Credit.edit.tab.credit" template="Vendorname_Modulename::credit.phtml" />
</container>
</layout>STEP 6:
Finally create the phtml file and type your text or implement your logics with block and controller.
/app/code/Vendorname/Modulename/view/adminhtml/templates/credit.phtml
This is our new tab.
Now clear your cache. System – > Cache Management – > Flush Magento Cache
After clearing you cache, your admin will look like the image below…
customer admin edit magento 2
