Magento 2 How to add Custom tab to customer edit page

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.

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

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

Custom tab display

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

After applying the sorting for the custom tab

Leave a Comment

Your email address will not be published. Required fields are marked *

14 + six =