{"id":1211,"date":"2024-03-04T19:20:05","date_gmt":"2024-03-04T13:50:05","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1211"},"modified":"2025-01-11T22:50:07","modified_gmt":"2025-01-11T17:20:07","slug":"how-to-add-custom-tab-on-admin-dashboard-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-add-custom-tab-on-admin-dashboard-in-magento-2\/","title":{"rendered":"How To Add Custom Tab on Admin Dashboard in Magento 2\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to Add Custom Tab on the Admin Dashboard in Magento 2.<\/p>\n\n\n\n

Creating a Custom Tab on Dashboard will be useful to display some specific information relevant to your business.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Custom Tab on Admin Dashboard in Magento 2.<\/p>\n\n\n\n

STEPS FOR ADD CUSTOM TAB ON ADMIN DASHBOARD IN MAGENTO 2<\/strong><\/h2>\n\n\n\n

Step 1: Create file routes.xml<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/adminhtml\/routes.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/App\/etc\/routes.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<router id="admin">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<route id="helloworld" frontName="helloworld">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<module name="Vendor_Extension" before="Magento_Backend"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/route>\n\n\u00a0\u00a0\u00a0\u00a0<\/router>\n\n<\/config>\n<\/pre><\/div>\n\n\n
Step 2: Create file MagecuriousCustomTab.php<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Controller\/Adminhtml\/Dashboard\/MagecuriousCustomTab.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Controller\\Adminhtml\\Dashboard;\n\nuse Magento\\Backend\\App\\Action\\Context;\n\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nuse Magento\\Backend\\Controller\\Adminhtml\\Dashboard\\AjaxBlock;\n\nuse Magento\\Framework\\Controller\\Result\\RawFactory;\n\nuse Magento\\Framework\\View\\LayoutFactory;\n\nclass MagecuriousCustomTab extends AjaxBlock\n\n{\n\n\u00a0\u00a0\u00a0\u00a0protected $_resultPageFactory;\n\n\u00a0\u00a0\u00a0\u00a0protected $resultRawFactory;\n\n\u00a0\u00a0\u00a0\u00a0protected $layoutFactory;\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Context $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0RawFactory $resultRawFactory,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0LayoutFactory $layoutFactory,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0PageFactory $resultPageFactory\n\n\u00a0\u00a0\u00a0\u00a0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context,$resultRawFactory,$layoutFactory);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->_resultPageFactory = $resultPageFactory;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function execute()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$resultPage = $this->_resultPageFactory->create();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$resultPage->getConfig()->getTitle()->prepend(__('Add Custom Tab'));\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$block = $resultPage->getLayout()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->createBlock('Magento\\Framework\\View\\Element\\Template')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->setTemplate('Vendor_Extension::custom_file.phtml')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->toHtml();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->getResponse()->setBody($block);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Create file custom_file.phtml<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/templates\/custom_file.phtml<\/strong><\/p>\n\n\n
\n<div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo __("Magecurious Tab");?>\n\n<\/div>\n<\/pre><\/div>\n\n\n
Step 4: Create file di.xml<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/etc\/adminhtml\/di.xml<\/strong><\/p>\n\n\n
\n<?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/ObjectManager\/etc\/config.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<preference for="Magento\\Backend\\Block\\Dashboard\\Grids" type="Vendor\\Extension\\Block\\Dashboard\\Grids"\/>\n\n<\/config>\n<\/pre><\/div>\n\n\n
Step 5: Create file Grids.php<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Block\/Dashboard\/Grids.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Block\\Dashboard;\n\nclass Grids extends \\Magento\\Backend\\Block\\Dashboard\\Grids\n\n{\n\n\u00a0\u00a0\u00a0\u00a0protected function _prepareLayout()\u00a0\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::_prepareLayout();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->addTab(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'custom_tab',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' \u00a0 \u00a0 => __('Magecurious Custom Tab'),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'url' \u00a0 \u00a0 \u00a0 => $this->getUrl('helloworld\/dashboard\/magecuriouscustomtab', ['_current' => true]),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'class' \u00a0 \u00a0 => 'ajax',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'active'\u00a0 \u00a0 => false\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 6: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento setup:upgrade\n\n$ php bin\/magento cache:clean\n\n$ php bin\/magento cache:flush\n<\/pre><\/div>\n\n\n
Step 7: Output:<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/strong><\/h2>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Add Custom Tab on Admin Grid in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>