Skip to main content
General

How To Create a Tab in Customer Admin Edit in Magento 2 ?

By |August 18, 2016 March 3rd, 2022No Comments

Magento is one of the most popular eCommerce platform. Utilize the full potential of your Magento store by migrating to Magento 2.

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 to the same for more details.

Step 1:

To create a new tab in the admin customer edit, create an XML in the following path

/app/code/Vendorname/modulename/view/adminhtml/layout/customer_index_edit.xml

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

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:

The following are the routes.xml for creating a controller to make the URL valid.

/app/code/Vendorname/Modulename/etc/adminhtml/routes.xml 

 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

Step 5:

Create another XML to mention which phtml file has to load

/app/code/Vendorname/Modulename/view/adminhtml/layout/credit_index_credit.xml

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

Jeyakiruthika

Author Jeyakiruthika

Jeya is a Magento Developer plus and Magento Front End Developer certified Software Engineer. She is self motivated and early adopter to new technologies. She is successful risk taker and a pragmatic developer and a realist. She loves playing with her kid.

More posts by Jeyakiruthika

Discover What You’re Missing

Get the weekly email full of actionable ideas and insights you can use at work and home.