{"id":1738,"date":"2021-04-29T12:39:31","date_gmt":"2021-04-29T12:39:31","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/create-a-tab-and-load-grid-in-magento-2-customer-admin-edit-page\/"},"modified":"2025-07-16T17:57:53","modified_gmt":"2025-07-16T12:27:53","slug":"create-a-tab-and-load-grid-in-magento-2-customer-admin-edit-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/create-a-tab-and-load-grid-in-magento-2-customer-admin-edit-page\/","title":{"rendered":"How to Create a Tab and Load Grid in Magento 2 Customer Admin Edit Page"},"content":{"rendered":"\n

Store owners try to get maximum information about their customers in order to understand their purchase behaviour, the pattern of thinking, and purchase power. It helps craft an effective marketing strategy that benefits the business.<\/p>\n\n\n\n

Similarly,\u00a0Magento 2\u00a0store owners try to get customer information while registering or checkout process.<\/p>\n\n\n\n

However, the story does not end here. The admin may want to operate on these details or in some cases, update them from the backend.<\/p>\n\n\n\n

You can create Custom Tab to Product Page<\/a> in order to include detailed product specifications, customer reviews, and frequently asked questions, making it easy for customers to understand without overcrowding the main description of products.<\/p>\n\n\n\n

For example, if the admin wants to get the list of all the products purchased in the store till now, and based on order total, update the customer group from the backend, he may need to create a tab and load grid in Magento 2 customer admin edit page. Likewise you can also hide unnecessary tabs in product page frontend to not let your visitors distract from their main goal, for that you need to hide empty custom tab in Magento 2<\/a>.<\/p>\n\n\n\n

Doing so makes it easier for the admin to check and update the customer details of any particular customer from the backend.<\/p>\n\n\n\n

The below solution shows how to do the same for any custom fields added on the checkout page or any page in the store frontend that is responsible to collect customer data.<\/p>\n\n\n\n

Get that customer data in the grid of the customer admin edit page under the custom tab you create using the below method:<\/p>\n\n\n\n

Method to Create a Tab and Load Grid in Magento 2 Customer Admin Edit Page<\/h2>\n\n\n\n

1. Create registration.php<\/strong> file at app\\code\\Vendor\\Module<\/strong><\/strong> and use the below code.<\/p>\n\n\n\n

<?php\n\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);<\/pre>\n\n\n\n
2. Create module.xml<\/strong> file at app\\code\\Vendor\\Module\\etc<\/strong><\/strong> <\/strong><\/strong>and paste the below code.<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"Vendor_Module\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
3. Create customer_index_edit.xml<\/strong> file at app\/code\/Vendor\/Module\/view\/adminhtml <\/strong>and use the below code.<\/p>\n\n\n\n
<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"admin-2columns-left\"\nxsi:noNamespaceSchemaLocation=\"..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n           <referenceBlock name=\"customer_form\">\n             <block class=\"Vendor\\Module\\Block\\Adminhtml\\Edit\\Tab\\Custom\" name=\"customer_edit_tab\">\n              <action method=\"setTabLabel\">\n                  <argument name=\"label\" xsi:type=\"string\">Custom Tab<\/argument>\n              <\/action>\n            <\/block>\n          <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
4. Create Custom.php<\/strong> file at app\/code\/Vendor\/Module\/Block\/Adminhtml\/Edit\/Tab<\/strong> directory.<\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml\\Edit\\Tab;\n\nuse Magento\\Customer\\Controller\\RegistryConstants;\nuse Magento\\Ui\\Component\\Layout\\Tabs\\TabInterface;\n\nclass Custom extends \\Magento\\Backend\\Block\\Template implements TabInterface\n{\n\n    protected $_coreRegistry;\n\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        \\Magento\\Framework\\Registry $registry,\n        array $data = []\n    )\n    {\n        $this->_coreRegistry = $registry;\n        parent::__construct($context, $data);\n    }\n\n    public function getTabLabel()\n    {\n        return __('Custom Tab');\n    }\n\n    public function getTabTitle()\n    {\n        return __('Custom Tab');\n    }\n\n    public function canShowTab()\n    {\n        if ($this->getCustomerId()) {\n            return true;\n        }\n        return false;\n    }\n\n    public function getCustomerId()\n    {\n        return $this->_coreRegistry->registry(RegistryConstants::CURRENT_CUSTOMER_ID);\n    }\n\n    public function isHidden()\n    {\n        if ($this->getCustomerId()) {\n            return false;\n        }\n        return true;\n    }\n\n    public function getTabClass()\n    {\n        return '';\n    }\n\n    public function getTabUrl()\n    {\n        return $this->getUrl('module\/*\/custom', ['_current' => true]);\n    }\n\n    public function isAjaxLoaded()\n    {\n        return true;\n    }\n}<\/pre>\n\n\n\n
5. Create module_index_custom.xml<\/strong> at app\/code\/Vendor\/Module\/view\/adminhtml <\/strong>directory.<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n\n<layout xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/layout_generic.xsd\">\n    <container name=\"root\" label=\"Root\">\n        <block class=\"Vendor\\Module\\Block\\Adminhtml\\Edit\\Tab\\View\\Custom\" name=\"custom_tab\"\/>\n    <\/container>\n<\/layout><\/pre>\n\n\n\n
6. Create Custom.php<\/strong> at app\/code\/Vendor\/Module\/Block\/Adminhtml\/Edit\/Tab\/View <\/strong>directory.<\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml\\Edit\\Tab\\View;\n\nuse Magento\\Backend\\Block\\Template\\Context;\nuse Magento\\Backend\\Helper\\Data;\nuse Magento\\Customer\\Controller\\RegistryConstants;\nuse Magento\\Framework\\Registry;\nuse Vendor\\Module\\Model\\ResourceModel\\ModuleName\\CollectionFactory;\n\nclass Custom extends \\Magento\\Backend\\Block\\Widget\\Grid\\Extended\n{\n    protected $_coreRegistry = null;\n\n    protected $_collectionFactory;\n\n    public function __construct(\n        Context $context,\n        Data $backendHelper,\n        CollectionFactory $collectionFactory,\n        Registry $coreRegistry,\n        array $data = []\n    ) {\n        $this->_coreRegistry = $coreRegistry;\n        $this->_collectionFactory = $collectionFactory;\n        parent::__construct($context, $backendHelper, $data);\n    }\n\nprotected\nfunction _construct()\n{\n    parent::_construct();\n    $this->setId('view_custom_grid');\n    $this->setDefaultSort('created_at', 'desc');\n    $this->setSortable(false);\n    $this->setPagerVisibility(false);\n    $this->setFilterVisibility(false);\n}\n\nprotected function _prepareCollection()\n{\n    $collection = $this->_collectionFactory->create()->setCustomerId(\n        $this->_coreRegistry->registry(RegistryConstants::CURRENT_CUSTOMER_ID));\n    $this->setCollection($collection);\n    return parent::_prepareCollection();\n}\n\n\nprotected function _prepareColumns()\n{\n    $this->addColumn(\n        'product_id',\n        ['header' => __('ID'), 'index' => 'product_id', 'type' => 'number', 'width' => '100px']\n    );\n    $this->addColumn(\n        'product_name',\n        [\n            'header' => __('Product Name'),\n            'index' => 'name',\n        ]\n    );\n    return parent::_prepareColumns();\n}\n\npublic function getHeadersVisibility()\n{\n    return $this->getCollection()->getSize() >= 0;\n}\n\npublic function getRowUrl($row)\n{\n    return $this->getUrl('catalog\/product\/edit', ['id' => $row->getProductId()]);\n}\n}<\/pre>\n\n\n\n
The display will be look like as shown below.<\/p>\n\n\n\n
\"How<\/figure>\n\n\n\n
The custom tab is created in the customer information section and the custom grid is now displayed with loading data from the table using the above solution.<\/p>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
You can also add a custom tab view in Magento 2<\/a> to enhance page speed and optimize overall performance<\/p>\n\n\n\n
Also, please share the solution with Magento Community via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
Store owners try to get maximum information about their customers in order to understand their purchase behaviour, the pattern of thinking, and purchase power. It…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1738","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1738"}],"version-history":[{"count":9,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1738\/revisions"}],"predecessor-version":[{"id":18098,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1738\/revisions\/18098"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}