Tab : – Tabs in Magento 2 can be customized and extended to meet the specific needs of an
online store. Developers and store owners can add new tabs, rename existing tabs, and
modify the content of tabs to display custom data. This flexibility allows store owners to create
a personalized user interface that meets the unique needs of their business.
To create a custom tab in Magento 2, please follow the below steps:
Step1 – Firstly, create registration.php file inside app\code\BluethinkInc\AddCustomTab
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php /** * Copyright © BluethinkInc. All rights reserved. * See COPYING.txt for license details. */ use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( ComponentRegistrar::MODULE, "Bluethinkinc_AddCustomTab", __DIR__ ); |
Step2 – create module.xml file inside app\code\BluethinkInc\AddCustomTab\etc
1 2 3 4 5 |
<?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Bluethinkinc_AddCustomTab"/> </config> |
Step3 – create routes.xml file inside app\code\BluethinkInc\AddCustomTab\etc\adminhtml
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route id="popupmodal" frontName="popupmodal"> <module name="Bluethinkinc_AddCustomTab" before="Magento_Adminhtml"/> </route> </router> </config> |
Step4 – create menu.xml file inside app\code\BluethinkInc\AddCustomTab\etc\adminhtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd"> <menu> <add id="Bluethinkinc_AddCustomTab::popup" title="Bluethinkinc" translate="title" module="Bluethinkinc_AddCustomTab" sortOrder="15" resource="Bluethinkinc_AddCustomTab::popup"/> <add id="Bluethinkinc_AddCustomTab::grid" title="Grid Tabs" translate="title" module="Bluethinkinc_AddCustomTab" parent="Bluethinkinc_AddCustomTab::popup" sortOrder="10" resource="Bluethinkinc_AddCustomTab::grid" action="popupmodal/index/gridtab" /> </menu> </config> |
Step5 – create GridTab.php file inside app\code\BluethinkInc\AddCustomTab\Controller\Adminhtml\Index
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?php declare(strict_types=1); /** * Copyright © BluethinkInc All rights reserved. * See COPYING.txt for license details. */ namespace Bluethinkinc\AddCustomTab\Controller\Adminhtml\Index; use Magento\Backend\App\Action\Context; use Magento\Framework\View\Result\PageFactory; class GridTab extends \Magento\Backend\App\Action { /** * Page return * * @var PageFactory */ protected $_pageFactory; /** * Execute function * * @param Context $context * @param PageFactory $pageFactory */ public function __construct( \Magento\Backend\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $pageFactory ) { $this->_pageFactory = $pageFactory; parent::__construct($context); } /** * Page return * * @return mixed */ public function execute() { $resultPage = $this->_pageFactory->create(); $resultPage->setActiveMenu("Bluethinkinc_AddCustomTab::popup"); $resultPage ->getConfig() ->getTitle() ->prepend(__("Tabs")); return $resultPage; } } |
Step6 – create DataProvider.php file inside app\code\BluethinkInc\AddCustomTab\Model\CustomTab
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ namespace Bluethinkinc\AddCustomTab\Model\CustomTab; use Bluethinkinc\AddCustomTab\Model\ResourceModel\View\CollectionFactory; use Magento\Framework\App\Request\DataPersistorInterface; use Magento\Ui\DataProvider\Modifier\PoolInterface; /** * Class DataProvider */ class DataProvider extends \Magento\Ui\DataProvider\ModifierPoolDataProvider { /** * @var \Magento\Cms\Model\ResourceModel\Block\Collection */ protected $collection; /** * @var DataPersistorInterface */ protected $dataPersistor; /** * @var array */ protected $loadedData; /** * Constructor * * @param string $name * @param string $primaryFieldName * @param string $requestFieldName * @param CollectionFactory $blockCollectionFactory * @param DataPersistorInterface $dataPersistor * @param array $meta * @param array $data * @param PoolInterface|null $pool */ public function __construct( $name, $primaryFieldName, $requestFieldName, CollectionFactory $blockCollectionFactory, DataPersistorInterface $dataPersistor, array $meta = [], array $data = [], PoolInterface $pool = null ) { $this->collection = $blockCollectionFactory->create(); $this->dataPersistor = $dataPersistor; parent::__construct( $name, $primaryFieldName, $requestFieldName, $meta, $data, $pool ); } /** * Get data * * @return array */ public function getData() { if (isset($this->loadedData)) { return $this->loadedData; } $items = $this->collection->getItems(); /** @var \Magento\Cms\Model\Block $block */ foreach ($items as $block) { $this->loadedData[$block->getBluethinkId()] = $block->getData(); } $data = $this->dataPersistor->get("bluethink_blog"); if (!empty($data)) { $block = $this->collection->getNewEmptyItem(); $block->setData($data); $this->loadedData[$block->getBluethinkId()] = $block->getData(); $this->dataPersistor->clear("bluethink_blog"); } return $this->loadedData; } } |
Step7 – create popupmodal_index_gridtab.php file inside app\code\BluethinkInc\AddCustomTab\view\adminhtml\layout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0"?> <!-- /** * Copyright © BluethinkInc All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <uiComponent name="grid_tab_listing"/> </referenceContainer> </body> </page> |
Step8 – create grid_tab_listing file inside app\code\BluethinkInc\AddCustomTab\view\adminhtml\ui_component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?xml version="1.0" encoding="UTF-8"?> <!-- /** * Copyright © BluethinkInc All rights reserved. * See COPYING.txt for license details. */ --> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string">grid_tab_listing.grid_tab_listing_data_source</item> <item name="deps" xsi:type="string">grid_tab_listing.grid_tab_listing_data_source</item> </item> <item name="label" translate="true" xsi:type="string">Tabs</item> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">data</item> <item name="namespace" xsi:type="string">grid_tab_listing</item> </item> </argument> <settings> <layout> <navContainerName>left</navContainerName> <type>tabs</type> </layout> </settings> <dataSource name="grid_tab_listing_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">Bluethinkinc\AddCustomTab\Model\CustomTab\DataProvider</argument> <argument name="name" xsi:type="string">grid_tab_listing_data_source</argument> <argument name="primaryFieldName" xsi:type="string">bluethink_id</argument> <argument name="requestFieldName" xsi:type="string">bluethink_id</argument> </argument> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item> </item> </argument> </dataSource> <fieldset name="tab1"> <settings> <label translate="true">Tab 1</label> </settings> </fieldset> <fieldset name="tab2"> <settings> <label translate="true">Tab 2</label> </settings> </fieldset> </form> |
Now, run below commands
1 2 3 4 |
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento static:content:deploy -f php bin/magento cache:flush |
Here is your output
bluethinkinc_blog
2023-04-11