In Magento 2 to add a custom tab to customer edit page in Admin panel we need to follow the below approach.
The solution approach is slightly different when compared to Magento 1.X version, here we will be using the UI Component.
First create a file called customer_form.xml in Mydons/CustomTab/view/base/view/base/ui_component/customer_form.xml
(file name should be customer_form.xml as this is a convention).
Inside this file we can create and include the custom block under htmlContent Component
HtmlContent Component Overview
The htmlContent UI component will provide the ability to process and render a layout structure or place a Magento block directly inside a UI component configuration.
As per the above Definition we can define our custom block inside the htmlContent UI Component.
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <htmlContent name="customtab_content"> <block class="Mydons\CustomTab\Block\Adminhtml\CustomTab" name="customtab" template="Mydons_CustomTab::tab/customtab.phtml"> </htmlContent> </form> |
Creating the custom block and template
In Order to render the custom tab, we need to create the custom block first.
The CustomTab Class should implement the TabInterface methods like getTabLabel etc.
File Path: Mydons/CustomTab/Block/Adminhtml/CustomTab.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ namespace Mydons\CustomTab\Block\Adminhtml; use Magento\Ui\Component\Layout\Tabs\TabInterface; use Magento\Customer\Controller\RegistryConstants; /** * Class CustomTab */ class CustomTab extends \Magento\Backend\Block\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); } /** * @inheritdoc */ public function canShowTab() { return $this->_coreRegistry->registry(RegistryConstants::CURRENT_CUSTOMER_ID); } /** * Return Tab label * * @return \Magento\Framework\Phrase */ public function getTabLabel() { return __('Mydons Custom Tab'); } /** * Return Tab Title * * @return \Magento\Framework\Phrase */ public function getTabTitle() { return __('Mydons Custom Tab'); } /** * @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; } } |
Template file creation for custom block
Create the Template file for displaying the actual contents.
File Path: Mydons/CustomTab/view/adminhtml/templates/tab/customtab.phtml
|
1 2 3 4 5 6 7 8 |
<div class="fieldset-wrapper"> <div class="fieldset-wrapper-title"> <span class="title">Custom Tab Content</span> </div> <div> <strong><span style="color:red">Mydons Custom tab</span> contents in Customer Edit Profile</strong> </div> </div> |
Custom tab display
Suppose in Case if you need to move the tab position, we can achieve this by modifying the customer_form.xml
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <htmlContent name="customtab_content"> <block class="Mydons\CustomTab\Block\Adminhtml\CustomTab" name="customtab" template="Mydons_CustomTab::tab/customtab.phtml"> <arguments> <argument name="sort_order" xsi:type="number">12</argument> </arguments> </htmlContent> </form> |
After applying the sorting for the custom tab
