Magento 2 How to add Custom tab to customer edit page

Magento 2 How to add Custom tab to customer edit page

September 25, 2018
Magento
0 Comments
Ramesh

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.

<?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>

<?xml version="1.0" encoding="UTF-8"?>

<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

<?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;
    }	
   }

100

101

102

103

104

105

106

<?php

/**

* 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

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

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

Custom tab display

Suppose in Case if you need to move the tab position, we can achieve this by modifying the customer_form.xml

<?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>

<?xml version="1.0" encoding="UTF-8"?>

</arguments>

</htmlContent>

</form>